√ Cara Membuat Syntax Highlighter Mirip Google Code di Blogger - AdityaTekno

Social Items

AdityaTekno.com - Cara Membuat Syntax Highlighter Mirip Google Code di Blogger. Ditutorial sebelumnya saya sudah membagikan postingan tentang Cara Membuat Syntax Highlighter di Blogger. Seperti yang sudah saya jelaskan dipostingan sebelumnya, bahwa Syntax Highlighter adalah script yang dapat membuat kode menjadi warna-warni.
Cara Membuat Syntax Highlighter Mirip Google Code di Blogger/Blogspot

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.

Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa nyaman ketika membaca konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya.

Baca Juga: Cara Membuat Tampilan Night Mode di Blogger dengan Cookie

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. Jika anda tertarik untuk menggunakan Syntax Highlighter ini, silahkan ikuti caranya dibawah.

Cara Memasang Syntax Highlighter Mirip Google Code di Blogger


Pertama, masuk ke Blogger >> Tema >> Edit HTML.

Lalu letakkan kode berikut diatas 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 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>

Note:
Khusus untuk kode HTML/JavaScript silahkan parse terlebih dahulu dengan HTML Parse.

Demikian tutorial Cara Membuat Syntax Highlighter Mirip Google Code di Blogger. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com

Cara Membuat Syntax Highlighter Mirip Google Code di Blogger

AdityaTekno.com - Cara Membuat Syntax Highlighter Mirip Google Code di Blogger. Ditutorial sebelumnya saya sudah membagikan postingan tentang Cara Membuat Syntax Highlighter di Blogger. Seperti yang sudah saya jelaskan dipostingan sebelumnya, bahwa Syntax Highlighter adalah script yang dapat membuat kode menjadi warna-warni.
Cara Membuat Syntax Highlighter Mirip Google Code di Blogger/Blogspot

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.

Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa nyaman ketika membaca konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya.

Baca Juga: Cara Membuat Tampilan Night Mode di Blogger dengan Cookie

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. Jika anda tertarik untuk menggunakan Syntax Highlighter ini, silahkan ikuti caranya dibawah.

Cara Memasang Syntax Highlighter Mirip Google Code di Blogger


Pertama, masuk ke Blogger >> Tema >> Edit HTML.

Lalu letakkan kode berikut diatas 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 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>

Note:
Khusus untuk kode HTML/JavaScript silahkan parse terlebih dahulu dengan HTML Parse.

Demikian tutorial Cara Membuat Syntax Highlighter Mirip Google Code di Blogger. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo