Cara Membuat Syntax Highlighter di Blog

Cara Membuat Syntax Highlighter di Blog - Syntax Highlighter adalah fitur editor teks yang menampilkan teks, terutama teks yang berupa kode dalam berbagai macam warna dan huruf yang berbeda sesuai dengan jenis kode itu sendiri. Fitur syntax highlighter sangat cocok digunakan untuk kode pemrograman atau bahasa markup karena akan lebih mudah dibaca terutama oleh manusia.

Apa Fungsi Syntax Highlighter ?

Banyak fungsi yang terdapat dalam syntax highlighter ini salah satunya yaitu untuk memberi warna yang berbeda kepada setiap kode dalam bahasa pemrograman ataupun markup, dengan warna yang berbeda di setiap kategori kode terebut maka manusia akan lebih mudah membacanya itulah fungsi syntax highlighter yang paling utama, fungsi yang lainnya untuk mempercantik tampilan kode atau blockquote dalam blog juga bisa.

Bagaimana Cara Membuat Syntax Highlighter di Blog ?

Pada kesempatan kali ini blog Ficri Pebriyana akan menjelaskan bagaimana cara membuat syntax highlighter pada blog, untuk memasang syntax highlighter di blog apakah blog Anda membagikan seputar tutorial blog yang setiap artikelnya membagikan kode pemrograman seperti kode CSS, HTML, JavaScript dan lain sebagainya ? Jika Ya, maka alangkah baiknya menggunakan syntax highlighter agar lebih mudah membaca setiap kode yang dibagikan.

Menambahkan syntax highlighter di blog memang akan membuat blog menjadi lebih keren lagi khususnya pada tampilan kode atau tampilan blockquote, namun ketika sudah menggunakan atau memasang kode syntax highlighter Anda tidak perlu lagi menambahkan kode <blockquote>...ISI KODE...</blockquote> tetapi akan menjadi <pre><code>...ISI KODE...</code></pre> jadi fungsi blockquote tidak perlu digunakan lagi saat menulis artikel. Langsung saja bagi Anda yang ingin menambahkan kode syntax highlighter pada blog silahkan baca tutorial mengenai cara membuat syntax highlighter di blog dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin> atau </style>

/* 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/AVvXsEiMdLyzYUYBFXv4lp0N4gINe1xVUbC_HiAJNahI2SJpbXDwBcrFCg_4E7Mq-Vv86rdQd1Hp4mnAntvKOx4bsNVAgWPYGwplXEyMF4UcGQoKdmpYtQ9ljajYs5hoxe-_pFnQjS2_XH_Xz3c/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. Cari kode </head>
6. Copy kode javascript dibawah ini, lalu Paste diatas kode </head>

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

7. Klik Simpan Template

Catatan :
- Anda bisa mengganti kode css diatas dengan css yang ada disini Github.
- Anda bisa mengganti warna setiap kategori kode disini Kode Warna HTML.

Bagaimana Cara Menggunakan Syntax Highlighter di Blog ?

Seperti yang sudah saya katakan diatas bahwa setiap kode <blockquote> diganti dengan kode <pre><code> sehingga kode <blockquote> di setiap artikel yang telah Anda tulis harus diganti dengan kode <pre><code> agar syntax highlighter ini aktif di blog Anda. Untuk cara menggunakannya lebih jelasnya dibawah ini :

Menggunakan Syntax Highlighter Yang Salah

<pre><code>...Masukan Kode Disini...</pre></code>

Letak kesalahan pada </pre></code> yang seharusnya </code></pre>

Menggunakan Syntax Highlighter Yang Benar

<pre><code>...Masukan Kode Disini...</code></pre>

Sekian artikel mengenai Cara Membuat Syntax Highlighter di Blog. Kurang lebihnya mohon maaf. Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini