Cara Membuat Syntax Highlighter pada Postingan Blog

Prodeku - Syntax Highlighter merupakan sebuah fitur perkodean dalam bahasa pemrograman yang digunakan untuk menampilkan coding dalam berbagai warna agar dapat mempermudah programmer untuk membaca serta menganalisa source code tersebut. Syntax highlighter ini sangat cocok buat anda yang suka posting perkodean seperti PHP, Javascript, HTML, CSS, dan lainnya. Kenapa sangat cocok? Tentunya untuk mempermudah dalam menarik pengunjung. Kalo warna nya cuma satu pastinya pengunjung bingung untuk mempelajari nya langsung dari blog. Lalu, bagaimana cara penerapan syntax highlighter pada blogger?

Untuk penulisan kode biasanya sobat blogger menggunakan blockquote atau textarea, iya gak sih? Fungsinya hampir, namun untuk syntax highlighter ini memiliki kelebihan karena dengan adanya fitur-fitur yang didukung oleh JQuery.

Sesuai dengan pembahasan diatas, kali ini saya akan membagikan tutorial tentang Cara Membuat Syntax Highlighter pada Postingan Blogger dengan Mudah. Yuk, ikuti tutorial berikut ini.

Membuat Syntax Highlighter

1. Buka akun Blogger anda
2. Pilih menu Template > Edit HTML
3. Salin kode dibawah ini, pastekan tepat sebelum </head>

<script src="https://sites.google.com/site/m4w4nz/highlight.pack.js" type='text/javascript'></script> 
  <script type='text/javascript'>
      hljs.initHighlightingOnLoad();
  </script>

4. Salin kode berikut ini, pastekan tepat diatas kode ]]></b:skin>

pre code {
  display: block; padding: 0.5em;
  color: #DCCF8F;
  background: url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}

pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}

pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}

pre .css .attribute {
  color: #b89859;
}

pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}

pre .css .class {
  color: #d3a60c;
}

pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #073642;
}

6. Jika sudah, klik Simpan Template.

Penerapan Syntax Highlighter pada Postingan

Biasanya untuk menyisipkan kode pada postingan kita menggunakan ikon pada blockquote, namun untuk syntax highlighter, anda dapat menerapkannya sebagai berikut.

<pre><code>

----Letakkan Source Code disini----

</code></pre>

Demikian tutorial tentang Cara Membuat Syntax Highlighter pada Postingan Blog dengan mudah. Terus ikuti tutorial lainnya hanya di Prodeku. Selamat mencoba!

Bagikan Artikel ini