Memasang Syntax Highlighter Pada Blog

Memasang Syntax Highlighter Pada Blog

Memasang Syntax Highlighter Pada Blog - Blog Santai - Saya ucapkan banyak terima kasih atas kunjungannya. Kali ini saya mau berbagi informasi seputar Memasang Syntax Highlighter Pada Blog dan mengenai sumber informasi bisa dilihat di akhir postingan ini.

Syntax Highlighter For Blogger - Berawal dari pertanyaan sobat +Yoga Pratama yang menanyakan bagaimana membuat Syntax Highlighter pada blog. Nah, sesuai janji saya kepada sobat +Yoga Pratama disini saya akan berbagi Cara Memasang Syntax Highlighter Pada Blog. Syntax Highlighter adalah  untuk membuat kode-kode berwarna-warni. Syntax Highlighter ini hasil modifikasi sendiri dan tutorialnya berasal dari +Kang Ismet.

Langkah Pemasangan

Perlu diperhatikan untuk memasang  Syntax Highlighter ini diperlukan jQuery, bila belum terpasang silakan pasang jQuery dibawah ini atau pasang jQuery terbaru diatas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Kemudian pasang JavaScript ini diatas kode </head>.

<script src='http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js' type='text/javascript'/>

Kemudian tambahkan kode CSS ini untuk memperindah tampilannya.

/*Syntax Highlighter*/  code,i[rel="code"]{margin:5px 0;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px}  pre code,i[rel="pre"]{display:block;padding:0.5em;margin:5px 0;background:#F7F7F9;color:#000;overflow:auto;max-height:200px}  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}

Cara Penggunaan

Untuk memasukan kode pendek
<code>Simpan kode yang telah diparse disini</code>
Untuk memasukan kode panjang
<pre><code>Simpan kode yang telah diparse disini<code></pre>

Terkait

Artikel ini berhubungan dengan artikel saya sebelumnya, yaitu Menambahkan Kode, Gambar dan Blockquote Pada Komentar. Nah bagi sobat yg sudah menerapkan tutor sebelumnya silakan sobat singkirkan kode CSS ini dan ganti dengan CSS  diatas agar efek Syntax Highlighter ini juga muncul pada komentar.

/*Tag Pre*/  code,i[rel="code"]{margin:5px 0;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px}  pre code,i[rel="pre"]{display:block;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px;overflow:auto;max-height:200px}

Mudah bukan, semoga bermanfaat..

Sumber: Klik Disini Spesial thanks to: Informasi Terbaru | Informasi Online | Kumpulan Cara Mengatasi | Aku Suka Menulis | Cara Agar Cepat Hamil

Powered by Blog Santai

Kumpulan Informasi

Silahkan Like Halaman Fans Page Kami. Agar Kami Bisa Tetap Terhubung Dengan Anda Lewat Facebook Dan Dapatkan Informasi Unik dan Menarik Lainnya.

Artikel Terkait: