Keyzo Nootaru

Syntax Highlighter adalah fitur editor teks yang menampilkan teks, terutama teks yang berupa kode dalam berbagai macam warna dan huruf yang berbeda sesuai dengan jenis kode itu sendiri. Fitur syntax highlighter sangat cocok digunakan untuk kode pemrograman atau bahasa markup karena akan lebih mudah dibaca.

Berikut Cara Memasang Syntax Highlighter di Blog:
1. Login Blogger
2. Klik judul blog
3. Klik Template → Edit HTML
4. Cari kode berikut menggunakan Ctrl + F atau F3

]]></b:skin>

atau

</style>

5. Masukkan kode berikut diatas kode ]]></b:skin> atau </style>

/* Syntax Highlighter */

pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto}
pre.line-number{background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhie2hGH2NLIFjjOn_9oclZz9SalKFpeX5X1sbZYL3MSK7EKPKN0lVriON4qCRg3NPb8K3QUjbGo7moBhTjQLLBvucEcKQ58JiPWrIBgXMWAjGJuy_dMfzQUJqy5Q-X2-Zr6B5Ihyy_lJc/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before{content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
#comments code{color:#bbbb6d}
pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
pre .line-number{float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

6. Cari kode berikut menggunakan Ctrl + F atau F3

</head>

7. Masukkan kode berikut diatas kode </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

8. Klik Simpan template

Untuk memanggil ketik:

<pre><code> ... Masukkan Kode Kamu Disini ... </code></pre>

Hasil:

Isi Syntax Highlighter