Cara Membuat Syntax Highlight bernomor

Membuat tempat menyematkan scrypt di postingan dengan Syntax Highlight bernomor dapat menjadi daya tarik bagi pengunjung.
Cara memasang Syntax Highlight bernomor dapat dilakukan dengan mengikuti tutorial berikut ini

1. Buka Blogger lalu login
2. Masuk ke halaman utama blogger
3. klik Tema
4. Pilih Edit HTML

Cara Kedua
1. Cari kode ]]></b:skin> atau </style>
2. Copy kode di bawah ini dan paste di bawah kode ]]></b:skin>  atau </style>

/* CSS Sintax Haighlighter MINTAILMU.COM */
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;} 

3. Copy kode berikut

4. Tambahkan kode di atas dengan kode di bawah ini

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='HTMLku']:before{background-color:#3cc888;}
pre[data-codetype='CSSku']:before{background-color:#00a1d6;}
pre[data-codetype='JQueryku']:before{background-color:#e5b460;}
pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0;}
pre[data-codetype='PHPku']:before{background-color:#75d6d0;}

5. Cari kode </body>

6.  Copy dan pastekan sebelum atau di atas kode </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> 

7. Tambahkan lagi kode di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection Highlighter 
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

8.    Setelah itu simpan

9.    Masuk ke kembali dasboard anda pilih laman posting kemudian klik Entri Baru

10.  Pilih HRML bukan compose

11.  Copy dan pastekan kode di bawah ini

.<pre data-codetype="HTMLku" title="HTML"> DI SINI </code></pre>
.<pre data-codetype="CSSku" title="CSS"> DI SINI </code></pre>
.<pre data-codetype="JavaScriptku" title="Javascript"> DI SINI </code></pre>
.<pre data-codetype="JQueryku" title="jQuery"> DI SINI </code></pre>
.<pre data-codetype="PHPku" title="php"><code class="language-javascript"> ISI KODE </code></pre> 

12.  Letakkan scrypt yang akan diposting sesuai petunjuk di atas (ganti kata DI SINI dengan scrypt anda)

13.  Sebelum meletakkan scrypt untuk diposting harus diparse dulu agar scrypnya tidak bentrok
14.  Tools untuk memparse scrypt ada di bawah ini


15.  Simpan dan lihat hasilnya

16.  Keren kan

Demikian tutorial tentang cara memasang syntax highlight bernomor yang dapat saya sampaikan. Jangan lupa kalau udah berhasil memasangnya beri komentar yah.

Semoga bermanfaat