26 Oktober 2015

Cara Menggunakan Syntax Highlighter Pada Blog

Syntax Highlighter yaitu salah satu metode yang digunakan untuk membedakan antara tulisan biasa dan kode-kode yang ditulis dalam postingan. Lebih mudahnya Syntax Highlighter ini bisa diartikan sebagai untuk membuat kode berwarna-warni.

Syntax Highlighter Pada Blog

Ada banyak sekali style yang bisa digunakan dalam penulisan kode, hal ini bergantung dari masing-masing kode CSS yang digunakan. Nah, keuntungan menggunakan syntax highlighter adalah kita bisa dengan mudah memasang kode-kode di dalam postingan dengan tampilan yang berbeda dan khas.

Cara Menggunakan Syntax Highlighter Pada Blog:

  1. Login akun blogger Anda.
  2. Lalu pilih Theme > Edit HTML
  3. Salin kode di bawah ini dan tempel di atas kode </head>
    <script src='https://cdn.jsdelivr.net/gh/NegeriMakmur/js@master/syntax-highlighter.js'></script>
    <script>hljs.initHighlightingOnLoad();</script>
  4. Salin CSS di bawah ini dan tempel di atas kode </style>
    pre, i[rel=&quot;pre&quot;] {padding:.8em 1em; margin:0; background-color:#2f3741; border-left:4px solid #40627E; font-size:11px; color:#839496; font-family:Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,Courier,Monospace; line-height:1.4em; position:relative; white-space:pre; word-wrap:normal; overflow:auto;}
    pre.line-number {background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ciRTBV7KjuV4WeK1MnV23JfzCsyhGxOos-QAmZfBbCGeNRSwyWg6xP7Q7cgoVx7KHQViSyONozJQfia7oERkglCqda721FDWJFUk-DgCqe2MRatA8qgFq6cYoM045SQmRjqFTQWN-d8/s1600/new-line-number.png)no-repeat top left; padding-left:54px; border-left:none;}
    pre.line-number:after {content:&quot;&quot;; width:35px; height:8px; background-color:#39424e; bottom:0; left:0; position:absolute;}
    pre[data-codetype=&quot;CSS&quot;] {border-left-color:#5fbbba;}
    pre[data-codetype=&quot;HTML&quot;] {border-left-color:#4fc1eb;}
    pre[data-codetype=&quot;JavaScript&quot;] {border-left-color:#ff6c60;}
    pre[data-codetype=&quot;JQuery&quot;] {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=&quot;CSS&quot;]:before {background-color:#a9d86e;}
    pre.line-number[data-codetype=&quot;HTML&quot;]:before {background-color:#4fc1eb;}
    pre.line-number[data-codetype=&quot;JavaScript&quot;]:before {background-color:#ff6c60;}
    pre.line-number[data-codetype=&quot;JQuery&quot;]:before {background-color:#99c262;}
    code {font-family:Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,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:#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;}
  5. Untuk mengaktifkan di dalam komentar, tambahkan JavaScript di bawah ini di atas kode </body>
    <script type='text/javascript'>
      $(&#39;;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
        return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
        });
    </script>
  6. Kemudian klik Save.
Sampai tahap ini syntax highlighter sudah bisa digunakan, sekarang tinggal mengaplikasikan. Untuk menggunakannya, cara penulisannya adalah seperti di bawah ini. Ingat, pada HTML view.
<pre><code>...kode HTML atau JavaSript yang sudah di Parse...</code></pre>