Cara Membuat Syntax Highlighter dalam Postingan Blog

Syntax Highlighter merupakan sebuah cara untuk mengedit skrip kode yang ada di konten blog atau pun website agar semakin rapi dan cantik. Biasanya orang-orang juga menyebutnya sebagai Script Box berwarna-warni. Skrip kode yang diedit berupa bahasa pemograman seperti javascript, php, vbs, html, css, dan lain-lain. Masing-masing bahasa pemograman tersebut mempunyai style (warna dan font) tersendiri sesuai dengan tipe sintaknya.

Dalam suatu bahasa program, pasti akan ditemukan berbagai macam sintak seperti tag, string, comment, function, class, value, dan lain sebagainya. Nah, macam-macam sintak tersebut bisa Anda hiasi dengan Syntax Highlighter guna mempermudah pengunjung blog Anda membedakan mana skrip kode yang Anda tulis dan mana yang merupakan tulisan biasa. Jadi, postingan yang Anda bagikan dapat lebih mudah dibaca dan membuat pengunjung nyaman ketika melihat kode skripnya. Mereka juga bisa mengenal bahasa pemograman yang digunakan dengan lebih jelas.

Syntax Highlighter
Syntax Highlighter

Baca Juga : 5 Aplikasi Live Tanpa Banned Terbaik Yang Wajib Dicoba

Kali ini kami ingin membagikan tutorial cara menambahkan Syntax Highlighter di blog. Caranya cukup mudah, Anda tidak perlu memiliki keahlian khusus yakni coding agar bisa membuat Syntax Highlighter di dalam postingan blog Anda. Berikut adalah tahapan pembuatannya :

1. Buka blog Anda.

2. Pilih “Tema” atau “Template”.

3. Kemudian, klik “Edit HTML”.

4. Cari kode </style> atau ]]></b:skin> dan letakkan kode CSS di bawah ini tepat di atasnya :
/* 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}
Tambahkan code di bawah ini dan letakkan di atas </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. Simpan tema atau template.

6. Tahap selanjutnya adalah menambahkan Syntax Highlighter ke dalam postingan blog Anda. Silahkan buat postingan baru terlebih dahulu atau masuk ke postingan yang Anda ingin pasangi Syntax Highlighter, lalu pilih pada bagian HTML dan ketikkan kode <pre></code>…………</code></pre>. Silahkan isi titik-titik merah dengan skrip kode yang Anda ingin bagikan dan telah Anda parsing. Salah satu website tool parse html yang bisa Anda coba untuk melakukan parsing, yakni www.blogcrowds.com.

Catatan : Parsing ini penting karena berguna untuk mencegah browser melakukan format pada skrip html yang Anda tulis. Jika browser memformat skrip html, maka tag-tag yang ada di dalamnya tidak akan dapat dibaca.

7. Jika sudah, simpan dan lakukan pratinjau untuk memastikan hasilnya sebelum mempublish postingan. Bagaimana cukup mudah bukan membuat Syntax Highlighter ini? Anda hanya perlu mengikuti tahap demi tahap cara yang telah kami paparkan di atas dengan urut.

Demikian artikel kali ini mengenai tips dan trik cara membuat Syntax Highlighter di postingan blog. Semoga membantu dan selamat mencoba.

Baca Juga : 5 Aplikasi Penurun Berat Badan Dijamin Manjur! Agar Diet Menjadi Mudah

Previous Post
Next Post
Bagikan:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *