Cara Memasang Syntax Highlighter Keren

Baca Juga

Syntax Highlighter merupakan elemen penting bagi sebuah blog, terutama bagi blog tutorial menyerupai blog ini.
Syntax Highlighter biasa dipakai untuk menyimpan arahan menyerupai Html, Javascript, Jquery, dan CSS.

pada umunnya semua template sudah memiliki 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 aku bagikan mungkin sahabat juga pernah lihat di blognya arlina design, namun kini arlina design sudah ganti template jadi menyerupai berikut screenshootnya.

Bagi yang mau menerapkannya pada blog sahabat silahkan simpan CSS dibawah ini sempurna di atas arahan </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 sahabat dapat gunakan arahan dibawah ini pada postingan di sajian Html

<pre data-codetype="HTMLku" title="Cara Memasang Syntax Highlighter Keren"><code class="language-markup"> arahan yang sudah di parse </code></pre> <pre data-codetype="CSSku" title="Cara Memasang Syntax Highlighter Keren"><code class="language-markup"> arahan yang sudah di parse </code></pre> <pre data-codetype="Javascriptku" title="Cara Memasang Syntax Highlighter Keren"><code class="language-markup"> arahan yang sudah di parse </code></pre> <pre data-codetype="Jqueryku" title="Cara Memasang Syntax Highlighter Keren"><code class="language-markup"> arahan yang sudah di parse </code></pre>

Silahkan pilih sajian mana yang akan sahabat tampilkan ada CSS, Javascript, Jquery, Html. Simpan arahan yang akan dipasang pada goresan pena kode yang sudah di parse serta jangan lupa kodenya diparse dulu.

Dengan memasang syntax ini blog sahabat jadi lebih keren dan elegan.

Itulah tutorial singkat cara memasang custom syntax highlighter, biar bermanfaat !