Pasang Syntax Highlighter Dengan Number - Agiel Triono

Pasang Syntax Highlighter Dengan Number

Baca Juga
Syntax Highlighter


siang Bro , kali ini saya mau bagi TUTORIAL cara pasang syntax Highlighter dengan number , syntax highlighter juga berfungsi sebagai pembungkus markup,javascript, dan css tag dengan memberikan warna pada setiap tag tersebut. sekarang mari perhatikan cara pemasangan pada blogger

pertama kita tambahkan CSS terlebih dahulu ke ]]> </ b: skin> atau <style> .
Contoh ada pada Agiel Triono

.hljs{display:block;overflow-x:auto;padding:0 !important;background:#222;color:white}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
code {padding: 0;font-size: inherit;color: inherit;white-space: pre !important;}
pre .line-number{color:#666666;min-width:1em}
pre .line-number span{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
pre .line-number span:nth-child(even){background-color:#EEEEEE}
pre .cl{display:block;clear:both}
pre .line-number{float:left;border-right:2px solid #666666;text-align:right}
pre .line-number span{padding:0 .8em 0 1em}

lalu CTRLF pada keyboard cari </body>
lalu tambahkan kode di bawah ini tepat di atas kode </body>
<script type='text/javascript'> 
//<![CDATA[
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j + 1) + '</span>';
        }
    }
})();
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/agiltriono/Blogger-Demo-Templates/master/highlightpro.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
SAVE TEMPLATE. Lihat hasil nya.

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.