Cara Pasang Syntax Highlighter Sederhana

Tips yang aku bagikan kali ini cukup sederhana, yakni bagaimana cara memasang Syntax Highlighter di Blogger/Blogspot. Syntax Highlighter ialah aba-aba atau script yang akan menciptakan kau dapat menuliskan bahasa pemrograman apapun di situs web.

Ada banyak macam Syntax Highlighter. Ada yang terkesan glamor dan modern dimana setiap aba-aba mempunyai warna yang berbeda, tapi menciptakan loading situs tambah berat alasannya menggunakan JavaScript eksternal yang panjang dan lengkap.

Ada juga yang minimalis dan sederhana, tanpa warna-warni aba-aba yang meriah tapi cukup untuk sekedar memberi tanda; mana yang script atau aba-aba dan mana yang goresan pena biasa. Berhubung template blog ini mempunyai kesan minimalis maka aku akan menciptakan tutorial cara memasang Syntax Highlighter sederhana di template VioMagz.

Kode atau script yang dituliskan di blog biasanya mempunyai kegunaan semoga gampang dicopy-paste orang lain, contohnya dalam sebuah tutorial atau trik-trik tertentu. Gabungkan dengan Script Anti Copy Paste di Blogger pada goresan pena aku sebelumnya maka kau dapat menciptakan tutorial yang tidak dapat dicopy-paste kecuali pada bab kodenya saja.

Yuk, eksklusif kita simak dan praktekkan caranya !

1. Bukalah dashboard Blogger kau dan eksklusif masuk ke sajian Theme - Edit HTML.


2. Carilah aba-aba di ini: ]]></b:skin>


3. Jika sudah ketemu, copy-paste script di bawah ini sempurna di atas kodenya :
   

   /* Syntax highlighter - MasAping.blogspot.com */ 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 jikalau kau ingin menciptakan posting berisi aba-aba bahasa pemrograman cukup eksklusif copy-paste aba-aba yang mau dituliskan pada mode Compose.


6. Kemudian beralihlah ke mode HTML  kemudian tambahkan aba-aba berikut ini pada script kau :

   <pre><code> ..... < script kau di sini > ..... </code></pre>

Cukup mudah, bukan? Jika kau masih merasa kesulitan, tinggalkan pesan di kotak komentar di bawah ini. Begitulah goresan pena singkat aku mengenai cara memasang sendiri Syntax Highlight di blogger. Semoga membantu.

Bagikan Artikel ini