Skip to main content
Kene Ono

follow us

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 Blog :


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 pemasangannya 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 Warni di Blog semoga bermanfaat.

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

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar