Apa itu Syntax Highlighter? Bagaimana Cara Membuatnya?

Widget

nahloh

3/30/2016

1

Widget

Ilustrasi Syntax Highlighter

BertiSeo - Syntax Highlighter adalah fitur teks kode yang menampilkan macam-macam warna pada masing-masing kode .Fitur ini sangat cocok untuk blog atau website yang membahas pemograman atau programming agar para pembaca nyaman untuk membacanya.

Fungsi Syntax Highlighter

Fungsi utama dalam Syntax Highlighter ini adalah untuk memberikan masing-masing warna pada setiap kode ,dengan warna yang ada di dalam syntax Highlighter ini dapat memudahkan pembaca untuk membacanya.

Cara Membuat Syntax Highlighter Di Blog

Penjelasan dan fungsi mengenai Syntax Highlighter sudah jelas tinggal saatnya cara membuat Syntax Highlighter di blog anda.yuk simak langkah-langkahnya.

1. Masuk ke blogger.com
2. Pada slidebar sebelah kiri kli Template > Edit HTML
3. Cari kode ]]></b:skin> agar proses pencarian cepat tekan CTRL+F selanjutnya masukan kode ]]></b:skin>
4. Copy code di bawah ini ,lalu letakkan di atas ]]></b:skin>
   
   

   /* Syntax Highlighter */
   
   pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;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;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto}
   pre.line-number{background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMrdM6kSlp5P8YhDODHvBwTUDexadaMdg0Y2lIRKSCeiw0Ob4ZMhFJ9pa2Z0GSpDpqfFzoFS8kR0dKuezm-Q-LPNOhZ5wpHiwZDDXcdjw4VcoTaMOlhYPlih3VydjxgxZ-ag2Y2r4u59U/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none}
   pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute}
   pre[data-codetype="CSS"]{border-left-color:#5fbbba}
   pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
   pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
   pre[data-codetype="JQuery"]{border-left-color:#99c262}
   pre.line-number[data-codetype]:before{content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white}
   pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
   pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
   pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
   pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
   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}
   #comments code{color:#bbbb6d}
   pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
   pre .line-number{float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px}
   pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
   pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
   pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
   pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
   pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
   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:#D94CEA}
   pre .deletion{color:#dc322f}
   pre .tex .formula{background:#073642}

5. Selanjutnya cari kode </head>
6. Copy kode di bawah ini dan pastekan di atas kode </head>

   <script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
   <script>
   hljs.initHighlightingOnLoad();
   </script>

   
   
7. Dan terakhir save template

Membuat Syntax  Highlighter di blog sudah selesai ,bagai mana cara menggunakannya ?

Cara Menggunakan Syntax Highlighter Pada Postingan Blog.

Masukan kode di bawah ini pada HTML(HTML pada saat menulis artikel).

<pre><code>Masukan Kode DISINI</code></pre>

Dan lihat hasilnya .

Sekian Semoga bermanfaat.