Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Pasang Syntax Highlighter Sederhana

Cara Pasang Syntax Highlighter Sederhana

Tips yang saya bagikan kali ini cukup sederhana, yakni bagaimana cara memasang Syntax Highlighter di Blogger/Blogspot. Syntax Highlighter adalah kode atau script yang akan membuat kamu bisa menuliskan bahasa pemrograman apapun di situs web.

Ada banyak macam Syntax Highlighter. Ada yang terkesan mewah dan modern dimana setiap kode memiliki warna yang berbeda, tapi membuat loading situs tambah berat karena memakai JavaScript eksternal yang panjang dan lengkap.

Ada juga yang minimalis dan sederhana, tanpa warna-warni kode yang meriah tapi cukup untuk sekedar memberi tanda; mana yang script atau kode dan mana yang tulisan biasa. Berhubung template blog ini memiliki kesan minimalis maka saya akan membuat tutorial cara memasang Syntax Highlighter sederhana di template VioMagz.

Kode atau script yang dituliskan di blog biasanya berguna agar mudah dicopy-paste orang lain, misalnya dalam sebuah tutorial atau trik-trik tertentu. Gabungkan dengan Script Anti Copy Paste di Blogger pada tulisan saya sebelumnya maka kamu bisa membuat tutorial yang tidak bisa dicopy-paste kecuali pada bagian kodenya saja.

Yuk, langsung kita simak dan praktekkan caranya !
  1. Bukalah dashboard Blogger kamu dan langsung masuk ke menu Theme - Edit HTML.

  2. Carilah kode ini: ]]></b:skin>

  3. Jika sudah ketemu, copy-paste script di bawah ini tepat di atas kodenya :
    /* Syntax highlighter - Oom.web.id */
    pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
    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}
    pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
    pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
    pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
    pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
    pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
    pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
    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:#000;font-weight:bold}
    pre .deletion{color:#dc322f}
    pre .tex .formula{background:#eee8d5}

  4. Klik tombol Simpan.

  5. Sekarang jika kamu ingin membuat posting berisi kode bahasa pemrograman cukup langsung copy-paste kode yang mau dituliskan pada mode Compose.

  6. Kemudian beralihlah ke mode HTML  lalu tambahkan kode berikut ini pada script kamu :
    <pre><code>
    script kamu di sini
    </code></pre>

Cukup mudah, bukan? Jika kamu masih merasa kesulitan, tinggalkan pesan di kotak komentar di bawah ini.

1 komentar untuk "Cara Pasang Syntax Highlighter Sederhana"