Cara Mudah Membuat Syntax Highlighter di Blogger
Assalamualaikum Sahabat Blogger.
Cara Mudah Membuat Syntax Highlighter di Blogger - Syntax highlighter adalah fitur editor teks yang digunakan untuk programming, scripting, atau bahasa markup, seperti HTML. Fitur ini menampilkan teks, terutama kode script dalam berbagai warna dan font sesuai dengan kategori. Fitur ini memudahkan penulisan dalam bahasa terstruktur seperti bahasa programming atau bahasa markup.

Untuk anda yang memiliki niche blog tutorial seputar programming atau blogger yang menggunakan bahasa markup. Anda bisa menggunakan Syntax Highlighter untuk mempermudah pembaca memahami keseluruhan kodenya.

Baca Juga : Cara Mudah Mengunci Artikel Blog Agar Tidak Bisa di Copas

Jika anda tertarik untuk menggunakan syntax highlighter pada blog anda, silakan anda ikuti tutorial berikut ini.

Cara Membuat Syntax Highlighter di Blogger

Tahap #1
Masuk ke dashboard blog anda -> Pilih "Tema" -> Klik "Edit HTML" kemudian letakkan kode script dibawah ini sebelum kode </head> atau &lt;/head;&lt;!--<head/>--&gt;
<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/Sunburst.min.css");
  //]]>
</script>

Tahap #2
Letakkan kode dibawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<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>

Tahap#3
Agar tampilan terlihat rapih dan tidak berantakan saat di muat, silakan anda tambahkan kode dibawah ini sebelum 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}
Catatan : Untuk anda yang menggunakan template VioMagz, anda tidak perlu menambahkan kode Tahap #3, karena di dalam template VioMagz sudah terdapat kode tersebut.
Baca Juga : Cara Mudah Menghapus Pagination di Blog

Berikut tampilan kode CSS yang ada di VioMagz
/* code & blockquote */
pre,code{font-family:"Courier New",Courier,Monospace;color:inherit;}pre{white-space:pre;word-wrap:normal;overflow:auto;}blockquote{background:#f6f6f6;margin-left:2em;margin-right:2em;padding:1em 1em;font-style:italic;font-size:105%;}blockquote::before {content: "\f10d";font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;padding-right:4px;color:#666;}

Tahap #4
Silakan anda simpan dan selamat mencoba.

Cara Menggunakan Syntax Highlighter

Jika anda telah selesai menerapkan tutorial diatas, sekarang saatnya anda mencobanya, apakah berhasil atau tidak.

Tahap #1
Buat "Entri Baru" -> Pilih mode "HTML" dan masukan kode pemanggil dibawah ini.
<pre><code>...</code></pre>
Catatan : Untuk tanda " ... " silakan anda ganti dengan kode script yang ingin anda gunakan. Untuk memasukkan kode yang ingin anda gunakan ganti di mode Compose.
Baca Juga : Cara Mudah Redirect Halaman Error 404 Ke Homepage Dengan JavaScript

Lebih jelasnya lihat gambar dibawah ini :
Cara Mudah Membuat Syntax Highlighter di Blogger

Tahap #2
Silakan anda Preview atau Pratinjau untuk memastikan cara pemasangannya berhasil atau tidak. Jika berhasil tampilannya akan seperti gambar dibawah ini :
Cara Mudah Membuat Syntax Highlighter di Blogger

Tambahan
Untuk anda yang ingin berkomentar menggunakan syntax highlighter dikolom komentar, silakan anda masukan scriptnya seperti dibawah ini :
<i rel="pre"> Masukkan Kode Disini </i>
Demikianlah artikel kali ini tentang Cara Mudah Membuat Syntax Highlighter di Blogger. Semoga bermanfaat dan semoga berhasil diterapkan diblog anda. Terimakasih Wassalamualaikum.
Penulis : MasPutro.com

Post a Comment

Lebih baru Lebih lama