Wednesday, 22 February 2017

Cara Membuat Syntax Highlighter Berwarna Warni di Blog

Assalamualaikum...
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.
Jika artikel ini bermanfaat bagi sobat tolong support dengan donasi klik iklan yang ada di blog ini.
Terimakasih...
Wassalamualaikum...

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

>> PERHATIKAN !!! <<

- Gunakan kata-kata yang bijak saat berkomentar ya sob.
- Berkomentar dengan Foto <i rel="image">URL_GAMBAR</i>
- Berkomentar dengan Code HTML silakan Parse dulu.