Cara Merubah Tampilan Syntax Highlighter menjadi Lebih Clean dan Mantap

agranik.id - Website yang membahas tutorial biasanya selalu menampilkan coding Untuk menampilkan coding biasa dikenal dengan istilah Syntax Highlighter. Keunggulan Syntax Highlighter salah satunya merubah tampilan coding menjadi lebih menarik. Tidak semua syntax highlighter memiliki tampilan yang menarik berikut ini cara merubah tampilan syntax highlighter menjadi lebih menarik clean dan mantap. Hal ini akan memberikan tambahan nilai tersendiri bagi para pengunjung web.

Pengunjung blog dapat melihat coding dengan mudah sehingga bisa memahami coding yang ditampilkan. Oleh karenanya syntax highlighter ini perlu dipasang agar tampilan coding terlihat lebih menarik.

Memiliki tampilan menarik saat menulis koding-koning di website menjadi perhatian tersendiri. Sayang nya setiap template blog tidak semua memilikinya. Sehingga beberapa template yang tidak memiliki harus menambahkannya sendiri. Berikut ini cara merubah tampilan syntax highlighter menjadi lebih clean dan mantap. Silahkan Ikuti langkah demi langkah cara dibawah ini. langkahnya cukup senderharna anda hanya meng copy lallu mem pastenya sesuai dengan petunjuk berikut ini:

Langkah #1

Silahkan seperti biasa login terlebih dulu ke Bblog kalian masing-masing. Selanjutkan klik menu "Tema" dan klik tanda panah disamping "Sesuaikan" seperti pada gambar di bawah ini:

Cara Merubah Tampilan Syntax Highlighter menjadi Lebih Clean dan Mantap

Selanjutnya silahkan cari kode ]]></b:skin> dengan cara Ctrl+F setelah ketemu copy atau salin kode yang ada dibawah ini tempelkan diatas kode ]]></b:skin> :

/* 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 #2

Pada langkah kedua ini silahkan sobat cari kode yang bertuliskan <body> dan copy atau salin kode dibawah ini dan letakkan atau pastekan tepat di bawah kode <body>.

 <!-- 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 #3

Untuk menggunakannnya syntax highlighter silahkan setiap kali anda menginginkan tampilan gunakan terlebih dulu kode berikut, dalam halaman postingan rubah modenya dari "mode menulis" menjadi "mode HTML" terlebih dulu :

<pre><code>
Simpan Kode JavaScript, jQuery atau CSS disini
</pre></code>

Atau sobat bisa terlebih dulu memparse code tersebut pada halaman Tool Parse HTML.

Untuk merubah backgroundnya silahkan sobat ganti pada langkah pertama code berikut :

background-color:#F7F7F9

Ganti kode #F7F7F9 menjadi #fff8cc.

Jika sobat melakukannya dengan benar maka terlihat seperti gambar di atas. silahkan berikan komentarnya dibawah ini dan bagikan artikel ini semoga bermanfaat.