Cara Membuat Syntax Highlighter Mirip Google Code di Blogger
Arsipbiru.com - Di postingan sebelumnya, saya telah membagikan tutorial bagaimana cara membuat syntax highlighter di postingan blogger. Seperti yang kita ketahui bahwa Syntax Highlighter merupakan script yang dapat membuat kode menjadi warna-warni.
Selain memperindah tampilan barisan kode pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang disajikan oleh penulis.
Manfaat penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa nyaman ketika membaca konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih profesional dalam menyajikan artikel-artikel pada blog tutorialnya.
Syntax Highlighter juga bisa disebut sebagai tools pengganti blockquote, mengingat tampilan blockquote yang tidak mendukung warna-warni untuk kode script, maka solusinya adalah menggunakan Syntax Highlighter ini.
Cara Memasang Syntax Highlighter Mirip Google Code di Blogger
Dalam postingan kali ini, saya akan membagikan tutorial bagaimana cara membuat syntax highlighter mirip Google Code di Blogger. Untuk cara pemasangannya, silahkan ikuti langkah-langkah berikut ini.
1. Pertama, masuk ke Blogger > Pilih Tema > Edit HTML.
2. Lalu letakkan kode berikut di atas kode </head>.
<script type='text/javascript'>
//<![CDATA[
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/googlecode.min.css");
//]]>
</script>Kode yang terdapat pada "cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/googlecode.min.css" di atas adalah CSS/style dari highlight.js yang bisa Anda pilih atau ganti sesuai selera. Sebab dalam tutorial kali ini, untuk membuat syntax highlighter mirip seperti Google Code, maka saya menggunakan css googlecode.
Silahkan sesuaikan style highlight yang Anda suka dengan mengganti googlecode pada kode tersebut dengan style yang diinginkan. Misalnya, suka dengan style Github Gist, maka tinggal ganti googlecode tersebut dengan github-gist. Atau Anda juga bisa mengambil style highlight.js lain di link GitHub.
3. Kemudian, letakkan kode berikut ini di atas kode </body>.
<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. Langkah selanjutnya tambahkan kode CSS berikut ini di atas kode </style>.
/* Highlight */
code, pre, pre code {font-family:Consolas,Monaco,'Andale Mono',monospace;word-spacing:normal;font-size:14px;line-height:1.3em;}
pre code {padding:20px!important;margin:20px auto 50px;background-color:#fff!important;box-shadow:0 9px 19px 7px rgba(0,0,0,.04),0 10px 17px -2px rgba(0,0,0,.070);border-top:1px solid rgba(0,0,0,0.02);}
.post-body code {color:#e20d58}5. Simpan template.
Cara Menggunakan Syntax Highlight Mirip Google Code di Blogger
Untuk menggunakan Syntax Highlighter, Anda harus membuat postingan dan pilih mode HTML (jangan mode Compose). Kemudian masukkan kode berikut ini agar dapat menampilkan syntax highlighter mirip Google Code di posting blog.
<pre><code>Letakkan kode Anda disini </code></pre>Atau jika ingin membuat syntax highlight di komentar Blogger, silahkan gunakan pemanggilan kode seperti berikut ini:
<i rel="pre"> Letakkan kode Anda disini </i>Catatan: Khusus untuk kode HTML/JavaScript silahkan parse terlebih dahulu dengan HTML Parse.
Demikian tutorial bagaimana cara membuat syntax highlighter mirip Google Code di blogger. Semoga bermanfaat.
Sumber:
Traktir creator minum kopi dengan cara memberikan sedikit donasi.
Posting Komentar