Saturday, September 24, 2016

Pasang Syntax Highlighter Dengan Number

Tags

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.

Penggunaan Markup
  • Untuk memasukan gambar dan youtube link silahkan taruh link gambar dan youtube link tanpa tag <img> dan <iframe>.
  • Untuk menulis huruf bold silahkan gunakan [strong]KONTEN[/strong] atau [b]KONTEN[/b].
  • Untuk menulis huruf italic silahkan gunakan [em]KONTEN[/em] atau [i]KONTEN[/i].
  • Untuk menulis huruf underline silahkan gunakan [u]KONTEN[/u].
  • Untuk menulis huruf strikethrought silahkan gunakan [strike]KONTEN[/strike].
  • Untuk menulis kode HTML silahkan gunakan [code]KONTEN[/code] atau [pre]KONTEN[/pre] atau [pre][code]KONTEN[/code][/pre], dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Penggunaan Parse Kode Dan Emoticon Tidak Berlaku Di Ponsel.
Show EmoticonHide Emoticon Off Topic