Cara Membuat Syntax Sederhana di Blog
Kehadiran Syntax Highlighter pada suatu website maupun blog sangat penting, karena Syntax ini berfungsi sebagai fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemograman seperti: Skrip, Markup, HTML, CSS, Javascript, JQuery maupun skrip jenis lainnya.
Fitur ini menampilkan skrip teks, terutama kode sumber dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemograman itu sendiri. Dengan menggunakan fitur Syntax Highlighter ini memudahkan kita untuk menyorotkan suatu teks atau bahasa pemograman agar lebih mudah di baca layaknya software Notepad++.
Penggunakan Syntax ini membuat pembaca atau visitor menjadi terlihat lebih nyaman, karena skrip atau kode yang sobat masukkan ke dalam postingannya menjadi lebih rapi dan bersih.
Jika Blog sobat belum memasang Syntax Highlighter pas dan cocok sekali mengunjungi blog ini, karena saya akan memberikan tutorial mudah dan gampang untuk dipahami.
Cara Memasang Syntax Highlighter di Blog
Login terlebih dahulu ke akun blogger sobat masing-masing lalu klik Tab Tema - Edit HTML.
Lalu tambahkan kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin> atau kode </style>
/* Syntax Highlighter Cara Terkini */
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}
Kemudian tambahkan kode ini di atas 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 -->Terakhir klik Simpan Tema.
Catatan:
Jika sobat ingin mengganti warna atau style dari Syntax Highlighter ini silahkan kunjungi link disini
https://github.com/isagalaev/highlight.js/tree/master/src/styles
Cara Menggunakan Syntax Highlighter
Untuk menerapkannya cukup mudah dan simpel. Untuk pemanggilan skripnya bisa ditulis dengan kode: <pre> dan <code>
untuk tag penutupnya </code> </pre> Untuk detailnya lihat di bawah ini:
<pre><code>
<!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
1. Contoh Javascript
2. Contoh CSS
3. Contoh HTML
</pre></code>Jika ingin memasukan kodenya silahkan di parse terlebih menggunakan Parse HTML, Tetapi untuk kode CSS tidak perlu melalukan parse HTML.
Bagaimana mudah bukan untuk memasang dan menerapkannya. Terima kasih sudah berkunjung ke Artikel ini semoga bermanfaat.