Cara Membuat Syntax Highlighter (Kotak Script) Pada Blog Post Terbaru

Arif Hanafi    April 30, 2019    Blog , Tutorial   

syntax highlighter: wakselow.com

Selamat malam, kali ini saya akan membagikan cara membuat Syntax Highlighter atau Kotak Script yang biasa digunakan untuk menuliskan kode program seperti: Java Script, JQuery, CSS, PHP, HTML dan lain lain. Fungsi dari Syntax Highlighter ini yaitu untuk memudahkan pembaca dalam mengelompokkan kode-kode dan membuatnya lebih rapi, dengan menggunakan Syntax Highlighter dapat memudahkan pengunjung untuk meng copy paste script karena hanya tinggal di blok script yang akan di copy paste. 

Langkah-langkah membuat Syntax Highlighter di Blogger

1. Buka Blogger kemudian Login
2. Masuk ke Dashboard kemudian pilih Template
3. Edit HTML
4. Temukan kode ]]></b:skin> atau </style> untuk mempercepat proses menemukan kode bisa pakai CTRL + F
5. Copy&paste script dibawah ini ]]></b:skin> atau </style>

/* CSS Sintax Haighlighter */
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#374760;position:relative;border-radius:4px;max-height:500px;}
pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold;}
pre::after{content:'</>';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out;}
code{font-family:Consolas,Monaco,' Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#88a9ad;background-color:transparent;padding:1px 2px;font-size:12px;}
pre code{display:block;background:none;border:none;color:#e9e9e9;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold;}
code .token.punctuation{color:#ccc;}
pre code .token.punctuation{color:#fafafa;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata{color:#777;}
code .namespace{opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number{color:#e5dc56;}
code .token.selector,code .token.attr-name,code .token.string{color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name{color:#fafafa;}
pre code .token.string{color:#40ee46;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string{color:#ccc;}
code .token.operator{color:#1887dd;}
code .token.atrule,code .token.attr-value{color:#009999;}
pre code .token.atrule,pre code .token.attr-value{color:#1baeb0;}
code .token.keyword{color:#e13200;font-style:italic;}
code .token.comment{font-style:italic;}
code .token.regex{color:#ccc;}
code .token.important{font-weight:bold;}
code .token.entity{cursor:help;}
pre mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre{padding:10px 10px 15px 10px;background:#2c323c;}
.comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border-radius:4px;border:none;}
.comments pre::after{font-size:11px;}
.comments pre code{color:#eee;}
.comments pre.line-numbers{padding-left:10px;}
pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code{position:relative;}
.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0;}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype='HTML']:before{background-color:#3cc888;}
pre[data-codetype='CSS']:before{background-color:#00a1d6;}
pre[data-codetype='jQuery']:before{background-color:#e5b460;}
pre[data-codetype='Javascript']:before{background-color:#75d6d0;}

6. Kemudian temukan script kode </body>
7. Copy&paste script berikut ini dan letakkan di atas </body>

<script src='https://rawgit.com/hilmay619/pribadi/master/sintax.js' type='text/javascript'/> <script> $(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;); Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)}) </script> <script type='text/javascript'> var pres = document.getElementsByTagName(&quot;pre&quot;); for (var i = 0; i &lt; pres.length; i++) { pres[i].addEventListener(&quot;dblclick&quot;, function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } </script>

8. Simpan Template

Langkah-langkah Menggunakan Syntax Highlighter Pada Blogger:

Untuk menggunakan Syntax Highlighter untuk kode HTML, Java Script, JQuery anda diharuskan Parse HTML terlebih dahulu tapi untuk kode CSS tidak harus Parse HTML.

1. Buat Entri baru
2. Kemudian pilih HTML bukan Compose
3. Pilih salah satu dibawah ini HTML untuk kode HTML, CSS untuk kode CSS, JQuery untuk JQuery kemudian disisipkan diantara artikel blog anda.

<pre data-codetype="HTML" title="HTML"><code class="language-markup">...KETIK CODE HTML DISINI .... </code></pre>
<pre data-codetype="CSS" title="CSS"><code class="language-css">...KETIK CODE CSS DISINI ....</code></pre> 
<pre data-codetype="Javascript" title="Javascript"><code class="language-javascript">...KETIK CODE Javascript DISINI ....</code></pre>
<pre data-codetype="jQuery" title="jQuery"><code class="language-javascript">...KETIK CODE jQuery DISINI ....</code></pre>

Demikian tutorial cara membuat syntax highlighter (kotak script) pada blog post terbaru apabila ada ada kesalahan atau kurang mengerti mengenai tutorial ini bisa langsung sharing dengan komen dibawah, sekian semoga bermanfaat.