Cara Membuat Syntax Highlighter Di Blog


Cara Membuat Syntax Highlighter Di Blog

Cara Membuat Syntax Highlighter Di Blog - Syntax Highlighter merupakan fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan Syntax Highlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari Syntax Highlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Syntax Highlighter yang akan ane share ini merupakan hasil codingan dari Alex Gorbatchev yang kodenya dikenal dengan nama Stabilo Syntacs. Syntax Highlighter juga dapat digunakan sebagai pengganti Blockquote.

Oke langsung saja, ane akan membagikan Cara Membuat Syntax Highlighter Di Blog, pastikan kamu mengikuti langkah-langkah ini dengan benar.

Cara Membuat Syntax Highlighter Di Blog

1. Masuk ke Dashboard Blog kamu yang ingin dipasang Syntax Highlighter.
2. Pilih opsi Template > Edit HTML
3. Tempelkan kode Syntax Highlighter dibawah ini tepat diatas </style> atau </b:skin>


/*Syntax Highlighter Membuat HidupMu Lebih Berwarna*/
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:200px}
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}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

4. Cari kode </body>, lalu tempelkan kode Syntax Highlighter dibawah ini tepat diatas </body>


<script type="text/javascript">
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/bungfrangki/highlight/master/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

5. Silahkan Save Template.

Cara Menggunakan Syntax Highlighter Di Blog

Untuk cara menggunakan Syntax Highlighter cukup mudah, kamu bisa memanggil Syntax Highlighter dengan cara memasukkan format kode berikut ke kolom HTML yang ada di postingan.


<pre><code> 

Silahkan masukkan code HTML, JS, JQuery, CSS disini

</pre></code>

Nah itu tadi Cara Membuat Syntax Highlighter Di Blog, tentunya sangat mudah untuk menerapkannya di blog.

Demikian artikel tentang Cara Membuat Syntax Highlighter Di Blog, semoga bermanfaat, jangan lupa untuk Like Fanspage Facebook, Share dan Komen.

10 komentar

avatar

Masih bingung sama koneksiin PHPnya ke HL gan! ada tutor kah! :3

avatar

Gapaham bahasa pemograman dan sejenisnya :D

avatar

mantap mas ini yang saya cari2 akhirnya jadi bisa...

avatar

Ternyata banyak bahasa pemograman banyak juga ya. Saya coba dulu kode Syntax Highlighter nya. Kali aja berhasil.

avatar

ternyata caranya kek gitu toh.. izin coba gan semoga work

avatar

keren nih bang infonya ,makasih yakkk... :)

avatar

code pemanggilan gitu ya gan, wah enak nih buat copas-copas code hehe

avatar

tutorialnya mudah diikuti dan dipahami, bagus artikelnya

Silahkan Berkomentar dengan :

1. Bahasa Indonesia yang baik dan benar
2. Tutur bahasa yang sopan dan santun
3. Tidak mencantumkan alamat url apalagi link aktif
4. Sesuai isi artikel ( bukan sekedarnya )

Maaf, komentar akan saya hapus jika tidak sesuai dengan peraturan diatas.
EmoticonEmoticon