Cara Memasang dan Menggunakan Syntax Highlighter di Postingan Blog

TipsIM.com - Memasang Syntax Highlighter. Pada kesempatan ini TipsIM akan berbagi tutorial bagaimana cara memasan syntax highlighter seperti di blog TipsIM ini atau di blog-blog lainnya.

Sebelum berlanjut ke cara pemasangannya, saya akan sedikit menjelaskan mengenai syntax highlighter. Pada intinya, syntax highlighter adalah suatu tempat atau wadah untuk meletakkan berbagai macam script/kode (seperti HTML, CSS, JS, PHP, dan lain lain) di postingan blog, dimana script yang diletakkan pada syntax tersebut masing-masing warnanya akan berbeda sesuai dengan jenis scriptnya, sehingga akan terlihat lebih cantik dan lebih memudahkan pengguna dalam mengenali setiap jenis script yang diberikan penulis.

Mungkin ada yang bertanya, "bedanya dengan kotak script biasa dengan syntax highlighter itu apa?"

Perbedaannya hanya pada warna di setiap jenis kode atau script. Kalau kotak script biasa hanya memiliki satu warna (kecuali warna scriptnya dibuat berbeda secara manual), sedangkan syntax highlighter memiliki warna yang berbeda-beda pada setiap jenis script (warna berbeda secara otomatis).

"Fitur apa saja yang terdapat pada syntax highlighter?"

Ada beberapa fitur yang bisa kita dapatkan setelah kita memasang syntax highlighter. Nah berikut ini fitur-fiturnya:

• Mendukung banyak format bahasa pemrograman.
• Support semua browser : Google Chrome, Mozilla FireFox, Internet Explorer, Opera dan lainnya.
• Dapat di pasang dan digunakan dengan mudah.
• 100% untuk pengguna tanpa campur tangan server.
• Ringan digunakan di blog.
• Dan fitur lainnya.

Syntax Highlighter mendukung bahasa pemrograman seperti berikut:

Language	Aliases
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	Css
Delphi	delphi, pascal
Java	Java
Java Script	js, jscript, javascript
PHP	Php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	Sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

Nah, kali ini TipsIM akan berbagi tutorial cara memasang dan menggunakan syntax highlighter di postingan blog, seperti halnya yang telah saya gunakan di blog TipsIM ini sob. Langsung saja simak langkah-langkahnya.

Cara Memasang Script Syntax Highlighter di Dalam Tema (Edit HTML)

1. Silahkan masuk ke dashboard blogger yang ingin dipasang syntax highlighter.
2. Lalu masuk ke menu Tema / Theme dan klik Edit HTML.
3. Setelah masuk ke halaman Edit HTML, silahkan cari kode ]]></b:skin> atau </style> dengan cara klik CTRL+F di dalam kolom script.
4. Kemudian masukkan kode CSS berikut ini tepat sebelum kode ]]></b:skin> atau </style>.

/* Syntax Highlighter Blogger */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}
hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}
.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}
.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}
.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}
.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}
.post-body .hljs-tag{color:#62c8f3}
.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}
.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}
.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}
.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}
.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}
.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}
.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}
.post-body .hljs-meta{color:#fc9b9b}
.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}
.post-body .hljs-addition{background-color:#a2fca2;color:#333}
.post-body .hljs a{color:inherit}
.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}
mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}
.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}
.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}

5. Lalu masukkan kode JavaScript berikut ini tepat sebelum </body> atau </head>.

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.staticaly.com/gh/TipsIM/frame/15c89c21/TIMhighlighter.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

6. Sekarang tinggal save dan beralih ke penggunaan syntax highlighter di postingan.

Cara Menggunakan Syntax Highlighter di Postingan Blog

1. Siapkan script atau kode yang ingin dimasukkan di syntax highlighter.
2. Silahkan masuk ke menu post dan buatlah postingan baru.
3. Setelah masuk ke halaman postingan, silahkan pilih HTML jangan Compose.
4. Masukkan kode HTML berikut ini di dalam postingan dalam mode HTML tersebut.

<pre><code> SILAHKAN MASUKKAN KODE SCRIPT DI SINI (HTML, CSS, JS, PHP, ATAU LAINNYA) </code></pre>

5. Ganti tulisan yang di blok merah itu dengan kode script anda. Namun sebelum dimasukkan, silahkan parse kode scriptnya dulu di sini.

Contoh Penggunaan Syntax Highlighter di Postingan Blog (dilihat di mode HTML)

Untuk mempermudah dan memperjelas bagaimana penggunaan dan memasangannya di postingan blog, silahkan lihat pada gambar di bawah ini.

Dan lihat pemasangannya di mode HTML seperti berikut ini (kode di parse terlebih dahulu).

<pre><code>/* CSS Syntax Highlighting */
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#222;color:white}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#222}
.hljs-addition{background-color:#a2fca2;color:#222}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}</code></pre>

7. Sekarang tinggal di Publish dan lihat hasilnya sob.

Hasilnya seperti apa?

Persis seperti yang saya pasang di blog TipsIM ini.

Demikian tutorial cara memasang dan menggunakan syntax highlighter di postingan blog. Semoga bermanfaat bagi kita semua. Terima kasih sudah bersedia mengunjungi blog TipsIM dan membacanya artikelnya sampai selesai.

Baca juga:

9 Most Expensive Cars Made In The United States