Script Syntax Highlight Mirip Google Code

 <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 saya tandai di atas adalah CSS/style dari highlight.js yang bisa anda dipilih atau diganti sesuai selera. Karena di tutorial ini membuat syntax highlighter mirip seperti google code, maka saya menggunakan css googlecode. 

Silahkan sesuaikan style highlight.js 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.

Kemudian, letakkan kode berikut ini diatas 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>

Langkah selanjutnya tambah kode CSS berikut diatas 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}

Simpan Tema.

Cara Menggunakan Syntax Highlight.js Mirip Google Code di Blogger/Blogspot

Untuk menggunakan Syntax Highlighter harus melalui tab HTML (jangan tab Compose) dengan pemanggilan kode sebagai berikut.

<pre><code> __Letakkan kode CSS/HTML/JavaScript/jQuery disini__ </code></pre>

Atau jika ingin membuat syntax highlight di komentar Blogger, silahkan gunakan pemanggilan kode seperti berikut ini:

<i rel="pre"> __Letakkan kode disini__ </i>

BangJago

Bukan wibu tapi manusia normal

Bagikan Artikel ini