Cara Membuat Syntax Highlighter di Blogger

Cara Membuat SyntaxHighlighter Di Blog. Sobat blogger. SyntaxHighlighter seperti yang sudah kita ketahui bahwa hal ini berfungsi untuk menandai sebuah format kode dan menampilkannya dalam sebuah kotak yang terorganisir. Sebagian besar pengguna akun blogspot sering berbagi tutorial dengan menggunakan HTML, CSS atau JavaScript pada posting mereka menggunakan blockquote tetapi dengan shortcode baru ini Anda bisa menampilkan script yang lebih baik dan rapi dihalaman blog anda.

Syntax Highlighter ini juga sangat sederhana dan ringan untuk sebuah code script yang bisa anda terapkan dalam tutorial. Selain itu ini akan terlihat lebih profesional dan lebih bergaya, untuk penerapannya anda hanya perlu menggunakan tag pre code pada mode HTML maka secara otomatis akan memberi tanda pada code tag pre code.

Baca Juga : Cara Membuat Pop Up Info About Us (Klik Pop Up)

Jika anda berminat untuk membuat syntaxhighlter bisa diterapkan diblog anda, silahkan ikuti tutorialnya disini saya akan memeberi tutorial syntax dengan dua background syntak dark dan light dan anda bisa pilih salah satu tema syntaxhighlight tersebut.

Cara Membuat Syntax Highlighter di Blogger (Kotak Script)

1. Buka akun blogger anda.

2. Silahkan pilih salah satu kode syintax untuk background dark / light.

Dark Theme

Code

/* Base16 Atelier Cave Dark - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

/* Atelier-Cave Comment */
.hljs-comment,
.hljs-quote {
  color: #7e7887;
}

/* Atelier-Cave Red */
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-regexp,
.hljs-link,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #be4678;
}

/* Atelier-Cave Orange */
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
  color: #aa573c;
}

/* Atelier-Cave Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet {
  color: #2a9292;
}

/* Atelier-Cave Blue */
.hljs-title,
.hljs-section {
  color: #576ddb;
}

/* Atelier-Cave Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #955ae7;
}

.hljs-deletion,
.hljs-addition {
  color: #19171c;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #be4678;
}

.hljs-addition {
  background-color: #2a9292;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #19171c;
  color: #8b8792;
  padding: 0.5em;
}

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

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

Light Theme

Code

/* Base16 Atelier Cave Light - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

/* Atelier-Cave Comment */
.hljs-comment,
.hljs-quote {
  color: #655f6d;
}

/* Atelier-Cave Red */
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #be4678;
}

/* Atelier-Cave Orange */
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
  color: #aa573c;
}

/* Atelier-Cave Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet {
  color: #2a9292;
}

/* Atelier-Cave Blue */
.hljs-title,
.hljs-section {
  color: #576ddb;
}

/* Atelier-Cave Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #955ae7;
}

.hljs-deletion,
.hljs-addition {
  color: #19171c;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #be4678;
}

.hljs-addition {
  background-color: #2a9292;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #efecf4;
  color: #585260;
  padding: 0.5em;
}

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

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

Jika sudah memilih salah satu code theme diatas, lalu letakan code tersebut  tepat diatas kode  </style> atau ]]></b:skin>

2. Selanjutnya letakan kode dibawah ini tepat diatas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

3. Simpan / save template anda.

Cara penggunaan ; letakan pada mode HTML saat membuat posting menggunakan format dibawah ini dan masukan kode yang akan dipasang dalam mode compose pada tanda "Kode disini".

<pre><code>
Kode disini
</pre></code>

Oke saya rasa sudah cukup untuk tutorial cara menambahkan / memasang Syntax Highlighter di Blogger, jika ada yang ingin ditanyakan silahkan berkomentar dikolom komentar. lebih dan kurangnya saya mohon maaf.