Cara Membuat Syntax Highlighter Berwarna Warni di Blog

KENEONO - Dikesempatan kali ini saya akan share Cara Membuat Syntax Highlighter Berwarna Warni di Blog. Yaitu cara unik untuk menaruh suatu kode HTML, JavaScript, CSS dll, kedalam postingan artikel blog kita. Dengan membuat Membuat Syntax Highlighter Berwarna Warni jadi blog kita akan menjadi lebih kece lagi seperti blog keneono ini.

Berikut Cara Membuat Syntax Highlighter Berwarna Warni di Blogger :

1. Pertama silakan masuk ke dashboard blogger pilih menu Template > Edit HTML.

2. Silakan tambahkan kode CSS dibawah ini dan taruh diatas kode ]]></b:skin> atau </style>.

/*
  Syntax Highlighter by KENEONO
*/

.hljs {
  display: block;
  overflow-x: auto;
  color: #eaeaea;
  background: #000;
  padding: 0.5;
}

.hljs-subst {
  color: #eaeaea;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-builtin-name,
.hljs-type {
  color: #eaeaea;
}

.hljs-params {
  color: #da0000;
}

.hljs-literal,
.hljs-number,
.hljs-name {
  color: #ff0000;
  font-weight: bolder;
}

.hljs-comment {
  color: #969896;
}

.hljs-selector-id,
.hljs-quote {
  color: #00ffff;
}

.hljs-template-variable,
.hljs-variable,
.hljs-title {
  color: #00ffff;
  font-weight: bold;
}

.hljs-selector-class,
.hljs-keyword,
.hljs-symbol {
  color: #fff000;
}

.hljs-string,
.hljs-bullet {
  color: #00ff00;
}

.hljs-tag,
.hljs-section {
  color: #000fff;
}

.hljs-selector-tag {
  color: #000fff;
  font-weight: bold;
}

.hljs-attribute,
.hljs-built_in,
.hljs-regexp,
.hljs-link {
  color: #ff00ff;
}

.hljs-meta {
  color: #fff;
  font-weight: bolder;
}

3. Setelah itu tambahkan lagi script dibawah ini dan taruh di atas kode </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function downloadJSAtOnloadundefined){var e=document.createElementundefined"script");e.src="https://cdn.rawgit.com/dedi96/keneono/a8bd8025/highlighter.js",document.body.appendChildundefinede)}window.addEventListener?window.addEventListenerundefined"load",downloadJSAtOnload,!1):window.attachEvent?window.attachEventundefined"onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

4. Kalau sudah Simpan template.

Untuk cara penerapan syntax highlighter di artikel blog :

- Silakan gunakan mode HTML bukan Compose dan masukkan kode berikut. ( Untuk memasukkan kode HTML silakan parse terlebih dahulu kodenya ).

<pre><code>
masukkan kode disini
</code></pre>

Sekian artikel kali ini tentang Cara Membuat Syntax Highlighter Berwarna di Blogger semoga bermanfaat.

Jangan lupa kunjungi terus blog KENEONO untuk mendapatkan artikel menarik lagi lainnya. Terimakasih...