Cara Membuat Syntax Highlighter di Dalam Postingan Blog

Assalamualaikum warahmatullahi wabarakaatuh, Alhamdulillah segala puji bagi Allah ta'ala yang telah melimpahkan nikmat dan karunianya sehingga admin dapat kembali hadir memberikan tutorial yang InsyaAllah bermanfaat bagi kita semua

Kali ini admin ingin membagikan tutorial menambahkan syntax highlighter di blog, syntax highlighter, atau saya sebut box script bermanfaat untuk merapikan tampilan script yang kita post di blog. Syntax highligter ini akan membedakan mana yang script dan mana yang tulisan biasa, sehingga antara postingan dan tulisan biasa dapat lebih mudah dibaca oleh manusia.

Cara menambahkan Syntax Highlighter pada postingan blog

Caranya cukup mudah, anda tidak perlu memiliki keahlian khusus untuk dapat membuat syntax highlighter. Berikut adalah tahapannya

• Buka blog dan pilih tema > edit HTML
• Tambahkan code CSS di bawah ini di atas </style>

/* Syntax Highlighter */
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}

• Tambahkan code di bawah ini dan letakkan di atas </head>

<!-- Syntax Highlighter -->
<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>
<!-- End Syntax Highlighter -->

• Simpan tema
• Langkah selanjutnya adalah anda tinggal menambahkan syntax highlighter pada postingan blog. buat postingan baru
• plih tab HTML, dan tulis <pre></code>............</code></pre>

• isi titik-titik merah ini  ............ dengan script yang telah diparsing, untuk melakukan parsing anda dapat mencoba website ini http://www.blogcrowds.com/resources/parse_html.php

Parsing berguna untuk mencegah browser melakukan format pada html script yang ditulis. Jika browser memformat script html yang ditulis, maka tag-tag yang ada di dalamnya tidak dapat dibaca 

• simpan lalu klik pratinjau untuk melihat hasilnya

Bagaimana cukup mudah bukan ? anda tinggal copy paste saja, dan tinggal nikmati hasilnya. Sekian tutorial kali ini, mudah-mudahan bermanfaat bari para pembaca, dan selamat mencoba