Penulis 
Di post ketiga ini akan berbagi tutorial cara memasang syntax highlighter di postingan blogger, kalau bingung biasanya disebut kotak kode atau sering disebut juga dengan syntax highlighting, prism syntax highlighter, pre code parse atau pre code seleksi.
Nah fungsinya fitur ini yang pastinya agar kode terlihat jelas dalam postingan dan tentunya agar dapat memudahkan pencopyan kode.
Syntax Highlighter ini cocok buat anda yang suka berbagi kode program
Memasang Syntax Highlighter
- Login ke Blogger.com
- Pilih Menu Template > Edit HTML, Kemudian
- Cari kode "" ]]></b:skin>> "" atau "" </style> ""
- Setelah ketemu, copy dan pastekan kode Css dibawah ini tepat diatas kode yang tadi dicari
/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}
- Sekarang Save Template
Kemudian bagaimana penerapan syntax highlighter ini???
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
Kode anda disini......</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Kode anda disini......
</code></pre>
<pre data-codetype="JavaScriptku" title="JavaScript"><code class="language-markup">Kode anda disini......
</code></pre>
<pre data-codetype="JQueryku" title="JQuery"><code class="language-markup">
Kode anda disini......
</code></pre>
- Silahkan masuk ke postingan baru
- Sekarang tinggal Masuk ke tab HTML pada postingannya
- Selanjutnya Paste HTML pembungkus scriptnya
- Jangan lupa untuk memilih salah satu pembungkus sesuai dengan kode isinya
Ingat!!parse kode terlebih dahulu agar kode bisa tampil dengan rapih
Oke cukup tutorial kali ini, kalau bingung bisa tanya dikolom komentar, semoga tutorial ini dapat bermanfaat..
Happy Blogging....
EmoticonEmoticon