Syntax Highlighter biasa digunakan untuk menyimpan kode seperti Html, Javascript, Jquery, dan CSS.
pada umunnya semua template sudah mempunyai elemen ini, hanya saja tampilannya sederhana dan simpel. Contohnya kaya blog ini sederhana saja.
Agar tampilan Syntax higlighter menjadi lebih menarik kita harus menambahkan custom css.
Jenis syntax yang ajan saya bagikan mungkin sobat juga pernah lihat di blognya arlina design, namun sekarang arlina design sudah ganti template jadi seperti berikut screenshootnya.
Bagi yang mau menerapkannya pada blog sobat silahkan simpan CSS dibawah ini tepat di atas kode </style> pada edit Html template sobat.
/* 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;}Untuk cara menggunakannya sobat bisa gunakan kode dibawah ini pada postingan di menu Html
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
kode yang sudah di parse </code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-markup">
kode yang sudah di parse </code></pre>
<pre data-codetype="Javascriptku" title="Javascript"><code class="language-markup">
kode yang sudah di parse </code></pre>
<pre data-codetype="Jqueryku" title="Jquery"><code class="language-markup">
kode yang sudah di parse </code></pre>Silahkan pilih menu mana yang akan sobat tampilkan ada CSS, Javascript, Jquery, Html. Simpan kode yang akan dipasang pada tulisan kode yang sudah di parse serta jangan lupa kodenya diparse dulu.
Dengan memasang syntax ini blog sobat jadi lebih keren dan elegan.
Itulah tutorial singkat cara memasang custom syntax highlighter, semoga bermanfaat !
