Membuat Syntax Highlighter Keren

Cara Menampilkan Syntax Highlighter

Kali ini saya akan memberikan tutorial membuat syntax highlighter untuk blog fungsi dari syntax higlighter ini adalah untuk memunculkan kode atau script dari blog baik itu html, javascript maupun CSS.

Pertama :

• Masuk Blogger anda.
• Edit Html -> CTRL+F atau Search kode ]]></b:skin>
• Letakan CSS berikut, diatas kode ]]></b:skin>.

/* Syntax Highlghter */
pre {
 background-color: #2f3741;
 border-left: 4px solid #40627E;
 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;
 font-size: 13px;
 line-height: 1.4em;
 margin: 0;
 padding: .8em 1em;
 position: relative;
 white-space: pre-wrap;
 word-wrap: normal; }
 
 pre.line-number {
  background:#2f3741 url(http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGmyK7Za2nzmOvziQqoK2h2FN0CG3uvjrZckZUlZMvHeKL4WkLOa7FgUGPwn7jwjgnPsgqFut_EHt43tD2nnQvGw7y_KFu-BbbB7kRinFBieDMYtMSvD3VpKVU144Bx7bhKkWjvQPzmyE/s1600/new-line-number.png)no-repeat top left;
  border-left: none;
  padding-left: 54px;
overflow:auto; }
 
  pre.line-number:after {
   background-color: #39424e;
   bottom: 0;
   content: "";
   height: 8px;
   left: 0;
   position: absolute;
   width: 35px; }
 
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 {
 background-color: #41749f;
 color: white
 content: attr(data-codetype);
 display: block;
 font-family: Oswald,Arial,Sans-serif;
 font-size: 14px;
 margin: -11px -13px 10px -54px;
 padding: 8px 12px;
 text-transform: uppercase; }
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 {
 color: #d14;
 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; }
 
#comments code { color: #bbbb6d; }
 
pre code {
 background: none !important;
 border: none !important;
 color: #a3a49a;
 display: block;
 padding: 0 !important; }
 
pre .line-number {
 background-color: #39424e;
 color: #61686d;
 float: left;
 margin: 0 1em 0 -1em;
 min-width: 2.5em;
 padding-right: 4px;
 text-align: right; }
 
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
 color: #586e75;
 font-style: italic; }
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title { color: #859900; }
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor { color: #7195a3; }
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function { color: #569dcf; }
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type { color: #aa985a; }
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: #509a55; }
pre .deletion { color: #dc322f; }
pre .tex .formula { background: #073642; }

• Kemudian letakan Jquery ini diatas kode </body>.

<script src="https://deris-cole.googlecode.com/svn/branches/HiglightSyn.js">
 <script>
 hljs.initHighlightingOnLoad();
 </script>

• Silahkan save templatenya.

Penerapan :

Untuk penerapan dalam postingan, Tinggal masukan kode ini.

<pre class="line-number" data-codetype="CSS"><code> MASUKAN KODE </code></pre>
<pre class="line-number" data-codetype="Jquery"><code> MASUKAN KODE </code></pre>
<pre class="line-number" data-codetype="HTML"><code> MASUKAN KODE </code></pre>