Anda
pasti sering menemukan kotak berisikan kode saat membaca artikel tutorial blogging atau desain web. Kotak tersebut dikenal dengan nama syntax highlighter,
sebuah editor teks yang berfungsi untuk menempatkan berbagai jenis bahasa
pemrograman atau skrip, seperti CSS, HTML, JavaScript, dan lain-lain.
Berbeda
dengan block quote, editor teks yang satu ini memiliki warna dan font yang
berbeda. Tujuannya supaya pembaca artikel bisa membedakan antara teks biasa dan
bahasa pemrograman yang ditampilkan sehingga lebih mudah dipahami. Ditambah
lagi, kode atau skrip yang ada di dalam kotak juga mudah disalin dan ditempel
di editor lain.
Adapun
kode syntax highlighter yang akan kita gunakan kali ini dikembangkan oleh blog caramanual.com. Teksnya di dalamnya akan
berubah warna dan susunannya lebih rapi ketimbang menggunakan block quote atau
teks biasa.
Bagi
Anda yang tertarik untuk memasang syntax highlighter di blog, cukup ikuti
beberapa langkah mudah berikut ini.
Cara Membuat Syntax Highlighter di
Blogger
#1.
Masuk ke dasbor Blogger, lalu pilih blog yang ingin Anda tambahkan kotak editor
ini.
#2.
Klik menu “Tema” > lalu klik “Edit HTML”.
#3.
Salin kode CSS di bawah, kemudian Anda tambahkan di atas kode ]]></b:skin>
atau </style>.
/*
Syntax Highlighter */
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.
Setelah itu tambahkan juga kode berikut sebelum kode </head>.
<!--
Syntax Highlighter -->
<link
href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css'
rel='stylesheet'/>
<script
src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!--
End Syntax Highlighter -->
#5.
Klik “Simpan” untuk menyimpan perubahan.
Jika
Anda memahami kode di atas, Anda bisa membuat kotak editor atau style dengan
warna yang berbeda di sini.
Cara Menerapkan Syntax Highlighter
di Postingan
Belum
selesai sampai di sini, karena syntax highlighter tidak akan muncul secara
otomatis melainkan harus Anda atur secara manual. Ketika Anda membuat postingan
baru, maka lakukan cara di bawah ini untuk memunculkan syntax highlighter:
#1.
Buat entri baru, lalu tulis artikel sampai selesai terlebih dahulu.
#2.
Setelah itu siapkan kode atau skrip yang ingin Anda sisipkan. Masuk ke tampilan
“HTML”.
#3.
Gunakan kode ini: <pre><code>Kode di sini</code></pre>
Contoh:
<pre><code><script
type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body
a").on("click",function(o){if(""!==this.hash){o.preventDefault();var
t=this.hash;$("html,
body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script></code></pre>
Parse HTML
Apabila
kode yang ingin Anda tambahkan adalah HTML, maka Anda perlu melakukan parse
dengan menggunakan tool Parse HTML. Salin dan tempel kode HTML yang ingin Anda
gunakan, lalu parse di Blogcrowds,
setelah itu salin lagi kode hasil parse ke postingan.
Akan
tetapi untuk kode CSS dan JavaScript, Anda tidak perlu melakukan parse.
Terkecuali jika ternyata syntax highlighter yang Anda buat gagal atau tidak
muncul.
Demikian
penjelasan tentang fungsi syntax highlighter dan bagaimana cara membuatnya di
Blogger. Selamat mencoba.