Cara Membuat Syntax Highlighter di Blogger

Cara Membuat Syntax Highlighter di Blogger

Cara Membuat Syntax Highlighter di Blogger - Jika kalian seorang web developer dan sedang mengelola website yang banyak menulis kode script, sebaiknya pasang syntax ini guna memperbaiki tampilan artikel agar terlihat lebih rapi dan terlihat profesional.

Syntax Highlighter sendiri mempunyai manfaat yaitu membungkus kode script tertentu agar pengunjung bisa membedakan antara artikel yang harus dibaca dan kode script yang harus di copy paste. Sedangkan untuk menerapkannya, anda diharuskan parse kode script terlebih dahulu yang akan dibagikan agar tidak terjadi kesalahan saat di publikasikan.

Pada umumnya tutorial ini diterapkan apabila website memiliki konten berbagi script HTML, JQuery, CSS, JavaScript, dan lainnya. Syntax Highlighter sendiri bisa memberikan efek warna-warni pada kode yang dibungkus agar terlihat menarik dan pembaca lebih jelas membedakan jenis kode yang di bagikan.

Untuk tutorial kali ini, kami mengambil dari racikan Alex Gorbatchev yang kode nya dikenal dengan nama Stabilo Syntacs dan sudah banyak digunakan oleh para blogger seperti kami.

Tutorial Pemasangan

Perhatian!
Backup template terlebih dahulu jika ingin melanjutkan ke tutorial pemasangan.
  1. Login terlebih dahulu ke Blogger.
  2. Pada menu dashboard, silahkan pilih menu Theme > Edit HTML
  3. Letakkan kode berikut ini, dan letakkan 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>
    Anda bebas untuk merubah style dengan mengganti kode yang telah di marking, dan untuk mengambil style nya kunjungi DISINI.
  4. Setelah itu letakkan juga 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>
  5. Kemudian tambahkan CSS berikut ini diatas kode </style>
    /* Highlight CSS */
    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}
  6. Simpan Template.
Untuk cara menerapkan di postingan anda, silahkan gunakan format HTML seperti dibawah ini

<pre><code>Masukkan Kode</code></pre>
Sebelum menyisipkan kode script sebaiknya parse kode terlebih dahulu DISINI, agar dapat ditampilkan dengan sempurna.
Jika ingin tampilan yang lebih menarik silahkan anda kreasikan sendiri dengan edit kode CSS yang tadi telah kami share. Jika kalian mempunyai pertanyaan seputar Syntax Highlighter silahkan diteruskan pada kolom komentar yang tersedia dibawah artikel ini.

Mungkin sekian dahulu artikel dari Cara Membuat Syntax Highlighter di Blogger yang bisa kami share, semoga bermanfaat untuk kalian pengunjung setia.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

2 komentar

  1. Mas,, cara menampilkan profil di bawah postingan itu gimana ya..
    Sy menggunakan tamplate linkmagz juga..

    BalasHapus
    Balasan
    1. dari tata letak bisa mas, setting di bagian blog post, dan checklist profil pengarang

      Hapus

Posting Komentar