Cara Membuat Syntax Highlighter Sederhana Di Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu tentang cara membuat syntax highlighter sederhana di blog. Syntax highlighter adalah sebuah modifikasi peletakan script pada postingan agar tampilan lebih rapi dan mudah untuk meletakan script yang ingin ditampilkan. Sehingga dengan adanya syntax highlighter membuat pengunjung lebih mudah melihat, menyalin maupun memahami script yang ditampilkan.


Berbeda dengan syntax highlighter yang sebelumnya pernah saya posting, syntax highlighter kali ini adalah syntax highlighter yang sederhana dan pastinya tidak akan membuat blog menjadi berat. Script syntax highlighter kali ini murni dari css, sehingga tidak akan membuat blog mejadi lama untuk dimuat. Untuk membuat syntax highlighter sederhana di blog anda silakan ikuti beberapa langkah di bawah ini :

Langkah

1. Login pada blog anda masing-masing,

2. Setelah itu pada dashboard blog pilih menu template,

3. Setelah itu pilih menu edit html,

4. Setelah itu cari kode </style> dengan cara ,

5. Copy script di bawah ini lalu paste tepat di atas kode </style> ,

 /* 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',Menlo,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;} 

6. Setelah itu simpan template.

7. Untuk penerapannya, pada menu dashboard blog silakan masuk ke menu pos lalu buat entri baru,

8. Setelah itu ubah mode artikel dari compose menjadi html,

9. Setelah itu silakan copy script-script di bawah ini yang anda butuhkan seperti ingin menampilkan script css, javascript, html, dan jquery,

CSS

 <pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> CSS di sini </code></pre> 

HTML

 <pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> HTML di sini </code></pre> 

Javascript

 <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> Java Script di sini </code></pre> 

Jquery

 <pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> JQuery di sini </code></pre> 

Masukan script pada tempat yang sudah disediakan pada yang sudah dilukis merah!

10. Saat memasukkan script jangan lupa untuk mengubah menjadi mode compose dahulu sebelum memasukan script, hal ini bertujuan agar script tersebut tidak berjalan pada mode html,

11. Selamat mencoba.



Demikian artikel tentang membuat syntax highlighter sederhana di blog semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Share this