Cara Memasang Syntax Highlighter Keren di Postingan Blogspot Terbaru

By Bang Feri 04 Apr, 2020 3 comments

Syntax highlighter adalah salah satu fitur teks editor yang sering digunakan untuk pemrograman, markup, scripting, seperti HTML.

Syntax highlighter pada teks editor berfungsi untuk menampilkan teks seperti kode HTML, CSS JavaScript dan bahasa lainnya dalam berbagai warna yang dapat mempermudah seseorang dalam membedakan, menandai teks yang ada di dalam dokumen.

Namun, syntax highlighter tidak hanya dapat mewarnai teks pada teks editor saja, tetapi juga dapat digunakan pada website atau blog untuk menampilkan teks seperti HTML, CSS atau JavaScript dalam berbagai warna yang menarik serta membuat teks semakin keren.

Jadi, bagaimana cara memasang syntax highlighter di postingan blogspot?

Cara Memasang Syntax Highlighter Keren di Blogspot

Sebenarnya cara memasang/membuat box Syntax highlighter di blogspot/blogger itu sangat mudah dan juga cepat.

Untuk cara pemasangannya silahkan sobat perhatikan terapkan langkah-langkah cara memasang syntax highlighter di blogspot berikut ini:

Login ke Blogger sobat yang ingin dipasangkan syntax highlighter
Dibagian menu dashboard, klik Tema > Edit HTML

Setelah itu, salin kode HTML berikut ini dan tempelkan di atas tag </head> blog sobat.

<!-- Syntax Highlighter by Bang Feri Blog-->
<link rel="stylesheet" href="https://rawcdn.githack.com/BangFeri/Hosting/7ab007b378f2a2daff9fb110ec3a81a5d88fe165/Syntax Highlighter/syntax-highlighter.css"/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js'></script> 
<script>hljs.initHighlightingOnLoad();</script>

Cara Memasang Syntax Highlighter keren di Postingan Blog

Selanjutnya, klik "Simpan Perubahan"

Berikut ini cara untuk memasang syntax highlighter di dalam postingan

Cara Pemasangan Syntax Highlighter di Dalam Postingan

Untuk memasang syntax highlighter di dalam postingan, silahkan sobat buka salah satu postingan yang diinginkan dan edit dalam metode HTML

Setelah itu tempelkan kode berikut ini di dilokasi yang diinginkan

<pre><code class="language-html">...kode disini...</code></pre>

Ganti ...kode disini... dengan kode HTML yang telah di parse terlebih dahulu. Berikut contohnya

<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Title of the document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
The content of the document......
&lt;/body&gt;

&lt;/html&gt;</code></pre>

Tips
Kode HTML yang telah diparse dan tempelkan diantara tag <code> adalah kode HTML yang akan ditampilkan ditampilkan di dalam postingan dalam berbagai warna. Jika kode HTML, CSS atau JavaScript belum diparse maka kode tidak akan tampil di dalam postingan.

Sobat juga bisa menggantikan class="language-html" dengan bahasa lainnya. Misalnya, class="language-css". Singkatnya, ganti kata akhirnya saja sesuai bahasa yang ingin ditampilkan

Hasilnya di Blog

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Nah, sekarang silahkan sobat cek postingan yang telah di edit tadi dan lihat apakah code HTML yang telah diparse tadi dapat ditampilkan dalam berbagai warna syntax highlighter.

Penutupan

Nan, jadi seperti itulah tutorial cara membuat atau memasang syntax highlighter di dalam postingan blogspot terbaru yang bisa saya bagikan kali ini.

Semoga tutorial di atas dapat bermanfaat bagi sobat sekalian dan banyak blogger lainnya.

Terima kasih, salam coding

Bang Feri Blog - Blogging and Coding

Cara Memasang Syntax Highlighter Keren di Postingan Blogspot Terbaru

Cara Memasang Syntax Highlighter Keren di Blogspot

Cara Pemasangan Syntax Highlighter di Dalam Postingan

Penutupan

3 comments for "Cara Memasang Syntax Highlighter Keren di Postingan Blogspot Terbaru"

Post a Comment