26 Oktober 2015

Cara Menggunakan Syntax Highlighter Pada Blog

Syntax Highlighter atau dalam bahasa Indonesia adalah Penyorot Sintaks yaitu salah satu metode yang digunakan untuk membedakan antara tulisan dan kode-kode yang ditulis dalam postingan agar lebih mudah dibedakan. 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. Berbeda dengan kotak script pada postingan sebelumnya, syntax highlighter akan lebih menarik jika kita menggunakannya.

Baca juga : Cara Membuat Kotak Script di Posting Blog

Cara Menggunakan Syntax Highlighter Pada Blog :

  1. Login akun blogger Anda.
  2. Lalu pilih Template > Edit HTML
  3. Salin kode di bawah ini dan tempel di atas kode </head>
    <script src='https://cdn.rawgit.com/NegeriMakmur/js/master/syntax-highlighter.js'></script>
    <script>hljs.initHighlightingOnLoad();</script>
  4. Cari kode ]]></b:skin> atau </style>
    Keterangan : Pilih salah satu, jika tidak bekerja apabila diletakkan pada ]]></b:skin> maka letakkan pada </style>
  5. Salin CSS di bawah ini dan tempel di atas kode ]]></b:skin> atau </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://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/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;}
  6. Untuk mengaktifkan syntax highlighter 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>
  7. Kemudian simpan template.
Sampai tahap ini syntax highlighter sudah bisa digunakan, sekarang tinggal digunakan. Untuk menggunakannya cara penulisannya adalah seperti di bawah ini. Ingat, pada mode HTML bukan Compose.
<code><pre>...kode HTML atau JavaSript yang sudah di Parse...</pre></code>

Selamat mencoba, jika ada kesulitan silakan berkomentar pada kolom komentar di bawah.

Baca juga : Cara Parse HTML

6 komentar

wah bermanfaat banget nih bagi yang suka share perkodean..

Hehe lama ya gak berkunjung ke blog agan, soalnya saya jarang blogwalking sekarang :D

Gan kenapa kalau kode dalam bahasa c++ tidak bisa

Contohnya seperti gimana ? Mungkin emang tidak tersedia gan di dalam CSS-nya, kayak link biasa saja tidak akan bagus tampilannya.
Harus berupa script.

Isikan komentar Anda dengan bijak.