Cara Membuat Syntax Highlight Otomatis Si Blogger

Jika anda pernah berkunjung ke suatu blog yang membahas tentang cara script atau kumpulan HTML, Pasti anda sering melihat postingan Script tersebut berada di dalam suatu kolom atau tabel yang cantik dan berwarna. contoh nya seperti gambar di bawah ini kira kira : 

Nah jika anda penasaran bagaimana cara membuat tampilan tersebut, saya akan coba membahas nya kali ini. Mudah mudahan dapat di mengerti ya teman-teman. Mohon disimak yah

Cara Membuat Syntax Highlight Otomatis Si Blogger

Yang pertama harus kamu lakukan adalah membuka BLOGGER -> TEMPLATE -> EDIT TEMPLATE, Kemudian copy kan CSS dibawah ini dan paste tepat diatas/dibawah style amp-custom='amp-custom, Untuk memudahkan pencarian cukup tekan CTRL + F

/*CSS Syntax Highligh*/
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:#ffffff;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:#ffffff;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;}
code {font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}
code{color:#BC587E}
pre mark,code mark,pre code mark {background-color:#3498db;color:#fff;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:#22A7F0;box-shadow:inset 0 0 0 1px #ffffff;}

Klik save

Yang kedua ada script pemanggil kode css diatas, Jadi cara terakhir ini cukup gambar, Ketika anda membuat Postingan,anda cukup copy paste script dibawah ini dlm mode HTML, dan untuk membuat postingan nya anda kembali lagi di menu compose.

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
Disini IsI script yang mau di posting
</pre></code>

Sebelum anda Publikasi kan, Alangkah baik nya di preview atau Partinjau dahulu.

Semoga artikel kali ini bermanfaat buat sobat semua nya,, terimaksih atas kunjungan nya yah.
Happy blogging

Dadang Kurnia

Hanya seorang Nubie, Memulai blog Sebagai Hobby.

Share this post