Cara Mempercantik Kolom Script dengan Syntax Highlighter

Kali ini, izinkan saya berbagi tutorial bagaimana caranya membuat, memasang atau menampilkan Syntax Highlighter di template blogger LinkMagz. Disebut juga, mempercantik kolom script HTML, CSS, jQuery, dan JavaScript (Js) dengan Syntax Highlighter.

Syntax Highlighter merupakan fitur yang berfungsi membungkus kode HTML, CSS, JavaScript (Js) dan kode lainnya di dalam kotak, dengan tampilan warna-warni di dalam artikel blog.

Cara Menambahkan Syntax Highlighter

1. Buka Blogger > Tema > Edit HTML

2. Salin (copy) kode di bawah ini, tempel (paste) di atas kode </head>

<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

3. Selanjutnya, tambahkan kode di bawah ini, TEPAT di atas kode ]]></b:skin>

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:300px}
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}

4. Ketuk tombol Simpan. OK selesai.

Terkait bagaimana cara mengaktifkan atau menampilkan Syntax Highlighter di artikel blog, kawan-kawan harus menggunakan kode berikut:

<pre><code> Kode di Sini </code</pre>

Ganti teks Kode di Sini dengan kode HTML, CSS, jQuery, JavaScript (Js) yang diinginkan. Penggunaannya sendiri dilakukan pada saat menulis atau membuat konten artikel, pada mode tulis Tampilan HTML. Contohnya:

pre{word-break:break-word;white-space:pre-wrap;background:rgba(232,191,115,0.08);border-left:5px solid rgba(245,228,194,0.17);padding:15px 20px;margin:20px 0;margin:1.25rem 0}

Begitulah tutorial bagaimana caranya membuat, memasang atau menampilkan Syntax Highlighter di template blogger LinkMagz. Mau coba terapkan model Syntax Highter lainnya?

Thanks for reading Cara Mempercantik Kolom Script dengan Syntax Highlighter! 😃