Cara Membuat Syntax Higliter - Simple Mudah

Cara Membuat Syntax Higliter - Simple Mudah

Hallo,Sobat IDTemplatez,Pada kesempatan Kali ini saya akan membahas membuat Kotak Syntax atau Di sebut dengan Syntax Highliter di blog,Syntax Highliting Ini memudahkan kita dalam menaruh code di Blogger.

Tutorial Ini saya dapat ketika saya mengunjungi blog sahabat, Yang sedang membahas Penerapan Syntax ini,Untuk tutorial silahkan kalian Perhatikan dengan seksama dan Peraktekan.

1. Masuk Ke akun Blog Kalian ➯Pilih Tema ➪ Klik Edit HTML

2. Pasang CSS Di bawah di atas kode </style> atau <b:skin>

/* CSS Syntax Highlighter - IDTemplatez.blogspot.com */
 .post-body pre{position:relative;overflow:auto;background:#1e88e5;color:#ddd;font-size:12px;max-height:500px;font-family:monaco,'Courier New',monospace;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
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:#1e88e5
;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;user-select: all;}
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:#ffffff;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;white-space:pre;overflow:auto}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{font-family: sans-serif;background-color:#fff;box-shadow:inset 0 0 0 1px #eee}

3.Save Template 
4. Untuk Pemasangan Syntax Highliter Copy HTML Berikut Ini dan letakkan pada postingan kalian.

<pre data-codetype="HTMLku" title="HTML"><code> ... KODE ... </code></pre>

        <pre data-codetype="JavaScriptku" title="JavaScript"><code> ... KODE ... </code></pre>
        
        <pre data-codetype="CSSku" title="CSS"><code> ... KODE ... </code></pre>
        
        <pre data-codetype="JQueryku" title="JQuery"><code> ... KODE ... </code></pre>

5.Selesai dan Save Sekarang Lihat Hasilnya 
6.Kalau Kalian Ingin melihat hasilnya bisa Lihat di bawah




NB : Pastikan Kalian sudah memasang Font awesome Biar Terlihat Iconya.

THANKS TO :
https://justirva-kode.blogspot.com/2018/05/cara-membuat-syntax-highlighting-di.html