×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Dua Cara Memasang Syntax Highlighter (Code Editor) Pada Blogger

Dua Cara Memasang Syntax Highlighter (Code Editor) Pada Blogger

Apa itu Syntax Highlighter ? Syntax Highlighter merupakan sebuah fitur editor teks yang digunakan untuk membungkus atau menulis bahasa pemrograman, scripting, atau bahasa markup seperti HTML. Fitur syntax highlighter ini akan menampilkan teks, terutama kode sumber, dalam berbagai warna.

Nah bagi teman teman yang memiliki sebuah web log yang membahas seputar kode kode pemrograman, kamu bisa gunakan Syntax Highlighter untuk membungkus kode tersebut agar menjadi lebih menarik.

Disini saya akan membagia dua cara memasang Syntax Highlighter (Code Editor) pada postingan blog, adapun cara cara pemasangannya sebagai berikut.
  1. Memasang Syntax Highlighter Hanya Menggunakan CSS,
    Memasang Syntax Highlighter dapat dibuat hanya menggunakan kode CSS (Cascading Style Sheet) aja, tanpa perlu memasang Javascript, namun memasang Syntax Highlighter menggunakan CSS ini hanya dapat menampilkan satu warna saja.
  2. Memasang Syntax Highlighter Dengan Javascript,
    Memasang Syntax Highlighter dengan Javascript menurut saya sangatlah keren, mengapa ? Dengan memasang Syntax Highlighter dengan Javascript, akan menampilkan teks dalam berbagai warna. Situs Blog yang membahas tutorial Programming atau bahasa Markup juga kebanyakan menggunakan ini termasuk saya sendiri.
Nah itulah dua cara memasang Syntax Highlighter (Code Editor), jika kamu ingin memasang Syntax Highlighter kamu bisa memilih salah satu cara diatas, dan tutorial pemasangannya ada diartikel ini, silahkan ikuti tutorial dibawah ini.

Dua Cara Memasang Syntax Highlighter (Code Editor)
Jika template kamu sebelumnya sudah memiliki kode Syntax Highlighter, silahkan dihapus terlebih dahulu semuanya, agar tidak bentrok
Memasang Syntax Highlighter Menggunakan CSS :

1. Pertama, login dulu ke Blogger
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian, copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style>,
.post-body pre {
  background-color: #292E34;
  border-left: 5px solid #ff69b4;
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: orange;
  font-size: 12px; 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}
4. Terakhir Simpan atau save template.

Memasang Syntax Highlighter Dengan Javascript :
Saya anggap disini kamu sudah masuk ke teks editor blogger template.

1. Copy Script dibawah ini dan letakkan tepat diatas kode <head>,
<script type='text/javascript'>
//<![CDATA[
// Syntax Highlighter
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) };loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/atelier-lakeside-dark.min.css");
//]]>
</script>
2. Copy kembali kode CSS dibawah ini dan letakka tepat diatas kode </b:skin>,
/* Syntax Highlighter CSS - Anirocksite*/
pre, pre code {
    font-family: Consolas, Monaco, &#039;Andale Mono&#039;, monospace;
    word-spacing: normal;
    font-size: 13px;
    line-height: 1.3em;
}
pre code {
    padding: 20px !important;
    margin: 0;
    background-color: #292E34 !important;
 border-radius:8px;
}
.post-body code {
    color: #e20d58;
}
3. Terakhir Copy kode dibawah ini, dan letakkan tepat diatas kode </body>, itu berguna sebagai pemanggilan kode Syntax

<b:if cond='data:view.isPost'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>
</b:if>
4. Simpan atau save template tersebut.

Cara Menggunakan Syntax Highlighter
Untuk cara menggunakan syntax Highlihter cukup mudah, namun kamu harus ingat satu hal, ketika memasukkan kode kedalam Syntax, kode tersebut harus kamu parse terlebih dahulu. Berikut cara penggunaannya.

1. Masuk ke ke Menu Postingan ⇒ New Entry,
2. Pilih mode penulisan HTML (Bukan Compose),
3. Untuk pemanggilan kodenya, tulis seperti ini,

<!-- Cara Memanggil Syntax di Postingan Blog -->
<pre><code>
Masukkan Kode HTML, CSS , Javascript Yang Telah Diparse Disini.
</code></pre>

Sekian tutorial bagaimana Dua Cara Memasang Syntax Highlighter (Code Editor) yang dapat saya bagikan, dan Semoga bermanfaat :D.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Dua Cara Memasang Syntax Highlighter (Code Editor) Pada Blogger"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With