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
Kang Aditya 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.com2. Klik
Template =>
Edit HTML3. Cari kode
]]></b:skin> atau
</style>4.
Copy kode css dibawah ini, lalu
Paste diatas kode
]]></b:skin> atau
</style>
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(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/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...