Syntax highlighter adalah suatu text editor yang menampung maupun menyoroti penulisan markup kode pada halaman situs agar mempermudah pengunung dalam mengenali keseluruhan kodenya. Biasanya syntax highlighter ini seringkali ditemukan pada blog yang bertemakan tutorial blogger yang dimana pengunjung dapat membedakan mana kode yang berupa CSS, HTML, serta Javascript dengan tulisan biasa.
Mungkin anda seringkali menemukan syntax highlighter pada situs tertentu yang membuat huruf kode menjadi warna-warni ataupun hanya satu warna. Selain membuat pengunjung mudah memahami struktur kode yang telah anda berikan pada artikel, maka dampak baik selanjutnya adalah artikel maupun blog anda akan terlihat rapi dan terstruktur ketika menggunakan syntax highlighter ini.
Cara Membuat Syntax Highlighter di Blogger
Pada artikel kali ini saya akan memberikan berupa langkah-langkah mengenai cara membuat syntax highlighter dengan mudah tanpa memberatkan loading blog. Berikut adalah langkah-langkah yang wajib anda lakukan.
- Langkah #1 : Masuk ke akun Blogger anda masing-masing.
- Langkah #2 : Selanjutnya pilih menu Tema » Edit HTML.
- Langkah #3 : Lalu cari kode
]]></b:skin>atau</style>kemudian letakkan kode CSS dibawah ini sebelum kode tersebut.
/* 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}
- Langkah #4 : Setelah kode tersebut sudah dipaste, maka langkah selanjutnya anda bisa cari kode
</head>dan letakkan kode dibawah ini sebelum kode tersebut.
<!-- 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 -->
- Langkah #5 : Lantas Save template.
Cara Menerapkan Syntax Highlighter di Blogger
Untuk merapkan syntax highlighter pada postingan blog anda, maka anda hanya perlu memasukan kode <pre> dan <pre> untuk memanggil syntax higlighter. Lebih jelasnya anda bisa lihat contohnya dibawah ini.
Masukkan semua kode CSS, HTML atau Javascript disini
Penting!
Apabila anda ingin memasukan HTML dan Javascript di dalam syntax highlighter, maka sangat disarankan untuk melakukan parse kode terlebih dahulu agar tampilan template anda tidak berantakan. Untuk melakukan parse kode, Anda bisa mengunjungi situs blog
Demikianlah informasi kali ini mengenai cara membuat syntax highlighter yang bisa anda terapkan pada blog anda. Mudah-mudahan dengan adanya artikel ini dapat membantu anda untuk membuat syntax highlighter ini, Selamat mencoba!
