Si pemalas belajar ngeblog , tutorial komputer , tutorial android , update informasi terbaru dan berbagi tips trik.

Kamis, 25 Agustus 2016

Cara Memasang Syntax Highlighter di Postingan Blog

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.

Cara Memasang Syntax Highlighter di Postingan Blog
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.

Cara Memasang Syntax Highlighter di Postingan Blog

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 .
Previous
Next Post »

Silahkan berkomentar ^_^

 
Atas