sipemlas.com - Memasang syntak highlighter di postingan blog akan membuat postingan kita terlihat lebih rapih dan enak dilihat , dengan menampilkan barisan kode yang rapih pengnjung dapat dengan mudah melihat jenis kode yang ada.
Syntak Highlighter ini wajib kalian pakai jika blog atau postingannya membahas tentang codingan seperti HTML, Javascript, CSS, PHP ,JQuery dll. perkodean itulah yang biasanya sering di bagikan ke blog dengan tutorial tutorial pemasangan script ke template blog atau web.
Sebelum ke tata cara memasang dan menggunakan syntax highlighter di postingan blog , kalian harus menambahkan script ke template terlebih dahulu , berikut tutorialnya .
Cara Memasang Syntax Highlighter di Blog
1. Silahkan login ke Blog > Dashbord > Template > Edit HTML
2. Letakan kode dibawah ini di atas 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: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}
3. Kemudian letakan kode di bawah ini tepat di atas kode </head>
<script src='https://googledrive.com/host/0B8a75E285BMHMDVkVGY1dUhzUUE' type='text/javascript'/>
4. Jika sudah langsung Simpan Template
source : bungfrangki.com
Nah untuk pemasangan Syntax Highlighter di blog sudah selesai dan akan terpasang secara otomatis di postingan , sekarang lanjut bagaimana untuk pemasangan / menggunakan syntax highlighter di postingan blog .
Cara Menggunakan Syntax Highlighter di Postingan Blog
Untuk menggunakan syntax highlighter di postingan , kalian harus memasukan kode dengan mode HTML , jika sudah memasukan kode nya kalian bisa kembali ko mode Compos.
Masukan kode ini dengan mode HTML , ubah tulisan warna orange dengan kode yang kalian inginkan
<pre><code> ( ini bagian pembuka )
Masukan kode Javascript, CSS, PHP ,JQuery di sini
</code></pre> ( ini bagian penutup )
Oke , saya rasa cukup tutorial cara memasang syntax highlighter di postingan blog ini , jika mengalami kesusahan atau pertanyaan silahkan berkomentar , terimakasih .