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>
Tags:
TUTORIAL
