Cara Mudah Membuat Syntax Highlighter Pada Blog Terbaru, Mungkin bagian sebagian blogger yang baru mengenal atau mendengar Syntax Highlighter terdengar. Karena memang tidak banyak blogger yang menggunakan highlighter pada blog mereka. Biasanya Blogger sering menyebut Syntax Highlighter ini dengan sebutan Kotak Script yang memang fungsinya untuk meletakkan kode semacam html,javascript,css, dsb..
Syntax Highlighter sendiri adalah salah satu script yang dapat membuat kode menjadi warna-warni sesuai dengan namanya Highlighter (mempercerah dan memperjelas) Kode warna-warni tersebut biasanya kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang di dalamnya terdapat script kode HTML, JavaScript, jQuery dan lain sebaigainya.
Selain mempercantik barisan kode pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang diberikan oleh si penulis. Dan tentunya pengunjung akan merasa nyaman membaca konten kita, dan bagi si penulis Blog, akan membuatnya menjadi lebih professional.
Cara Mudah Membuat Syntax Highlighter Pada Blog Terbaru
Sebenarnya pada Blog kalian sudah terpasang Syntax Highlighter loh, cara penggunaannya adalah dengan menerapkan kode <pre><code>---ISI KODE--</code></pre> di dalam artikel Blog pada mode HTML, akan tetapi tampilannya tentu tidak akan semenarik ini.
melainkan masih polos dan belum bisa disebut Syntax Highlighter
Jadi, sekarang kita akan membuat tampilan kotak script kalian menjadi layak disebut sebagai Syntax Highlighter.
- Oke langsung saja menuju Blogger ► Template ► Edit HTML
- Cari kode </style> dengan menggunakan CTRL + F untuk memudahkan pencariannya, lalu letakkan kode CSS dibawah ini tepat diatas kode </style> . Kode dibawah ini gunanya adalah untuk mempercantik tampilan kotak Syntax Highlighter nantinya.
/* Syntax Highlighter */
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#222;color:white}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#222}
.hljs-addition{background-color:#a2fca2;color:#222}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}- Dan letakkan juga kode jQuery ini sebelum kode </body> ini bertujuan supaya nanti kode yang ada di dalam kotak Syntax Highlighter bisa di Double Click. Mau liat contoh double clicknya akan seperti apa? coba kalian double click kode jQuery dibawah ini.
<script type="text/javascript">
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>- Simpan Template.
Cara Membuat Syntax Highlighter Pada Artikel Blog
Sekarang kita akan menerapkan cara membuat kotak Syntax Highlighter ini pada artikel Blog.
- Disaat kita membuat artikel pilihlah mode HTML untuk membuat kotak Syntax Highlighter.
- Kalian tinggal memasukkan kode berikut ini, dan silahkan ganti isi kode di sini dengan kode (HTML, CSS, JavaScript, jQuery) yang ingin kalian bagikan.
<pre><code>---ISI KODE DI SINI--</code></pre>
- Jika kodenya berupa HTML,Javacsript,dan jQuery silahkan di Parse terlebih dahulu kodenya sebelum memasukkannya ke mode HTML. Parse disini
Kenapa kode berupa HTML,Javascript, dan jQuery harus diparse terlebih dahulu? Dengan melakukan HTML Parsing ini, maka akan mencegah tampilan kode yang tidak muncul pada saat membagikan kode tersebut. Coba ajadeh misal kalian memasukkan kode HTML,Javascript, dan jQuery yang tidak di parse sebelum memasukkannya ke mode HTML artikel, pasti pada mode bagian Compose kode tersebut tidak muncul.
Sekian Cara Mudah Membuat Syntax Highlighter Pada Blog Terbaru semoga berhasil diterapkan pada blog kalian, jika ada kesulitan silahkan ajukan pertanyaan di kolom komentar.