Cara Membuat dan Memasang Syntax Highlighter Otomatis di Blog

Tulisan Ndeso, Cara Memasang Syntax Highlighter Otomatis di Blog - Pernahkah anda melihat sebuah blog yang menuliskan syntax atau html yang keren dalam postingan blognya?

Biasanya anda akan menemukan Highlight Syntax atau HTML pada sebuah blog tutorial yang membagikan tutorial blog, atau sebuah tulisan yang ingin di tandai agar lebih mudah dikenal atau berbeda dengan tulisan yang lain.

Kode yang disoroti tersebut akan memiliki style tersendiri sesuai tipe syntaxnya masing-masing.

Sebagaimana kita tahu, dalam suatu bahasa program kita akan menemukan berbagai macam syntax, dengan menggunakan syntax highlighter maka syntax tersebut akan dihiasi dengan style sehingga mempermudah mengenali tulisan yang di soroti.

Syntax Highlighter

Syntax Highlighter akan memberi warna pada komponen-komponen kode sehingga membuatnya nyaman dilihat dan lebih mudah dipahami.

Syntax Highlighter yang ada di atas adalah buah karya dari Alex Gorbatchev. Kode ini juga kerap dikenal sebagai Script Stabilo Syntax yang fungsinya mirip dengan Blockquote.

Saya mendapatkan Syntax Highlighter ini dari blog Bung Frangki yang sudah terkenal di jajaran suhu blogger. Tanpa berlama-lama, mari kita coba memasang Syntax Highlighter dari Bung Frangki ini..

Cara Memasang Syntax Highlighter di Blogspot

Pertama. Login ke akun Blogger anda, kemudian masuk ke Dahsboard.

Kedua. Pilih Theme, kemudian Edit HTML.

Ketiga. Letakkan Kode di bawah ini di atas kode </style> atau ]]></b:skin>

/* syntax highlighter Otomatis */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Keempat. Copy kode di bawah ini, letakkan di atas kode  </body>

<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/bungfrangki/highlight/master/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]> </script>

Kelima. Simpan Template Anda.

Apakah ini sudah selesai?

Dari segi pemasangan sudah selesai, namun ada satu hal yang perlu anda perhatikan ketika menginginkan Syntax Highlighter ini muncul di blog anda.

Tambahkan Kode di bawah ini melalui mode HTML di bagian postingan anda apabila anda akan membuat sebuah postingan blog.

<pre><code> 

Tulisan yang akan anda Highlight

</pre></code>

Itulah step by step cara memasang dan membuat Syntax Highlighter keren dan otomatis di blog anda. Selamat mencoba..

Referensi
https://www.bungfrangki.com/2015/07/membuat-syntax-highlighter-otomatis-di-blogger.html