Cara Membuat Kotak Script / Syntax Highlighter Di Blog Blogspot

Cara Membuat Kotak Script / Syntax Highlighter Di Blog Blogspot - Hallo sahabat Kampung Design kali in saya ingin memposting artikel tentang cara membuat kotak script / syntax highlighter di blog Blogspot.

Apa itu Kotak Script / Syntax Highlighter Di Blog Blogspot

adalah kotak atau tempat sekaligus fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemograman, atau markup, mulai dari HTML, CSS, PHP, JAVASCRIPT, JQUERY, dan sebagainya.

Kotak script ini menampilkan teks, terutama kode sumber dalam warna dan font yang berbeda sesuai dengan kategori pemograman tersebut.

Untuk Demo sahabat Kampung Design silahkan lihat saja kotak script yang saya gunakan sekarang ini.

1. Login ke Blog sahabat terlebih dahulu.

2. Setelah di Dasbord Blog sahabat silahkan pilih Template , Edit HTML .

3. Copy script dibawah ini lalu letakan diatas kode ]]></b:skin> atau </style>

/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}

4. Lalu tambahkan script dibawah tepat diatas kode </head>

 <!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter --> 

5. Lalu Save Template

Cara Menerapkan Syntax highlighter :
1. Buka postingan sahabat atau Entri Baru
2. Kemudian masuk ke bagian HTML bukan Compose
3. Lalu masukan tag dibawah ini:

<pre><code>Masukan kode atau scrip sahabat disini</code></pre>

4. Silahkan sahabat ganti "Masukan kode atau script sahabat disini" menjadi kode atau script sahat.

Sekian dulu artikel kali ini tentang Cara Membuat Kotak Script / Syntax Highlighter Di Blog Blogspot semoga bermanfaat Dan selamat mecoba semoga sahabat berhasil.