Trik Komputer: Highlighters for Blogspot By: Dan Webb

Sebelumnya Beben si bloglang ganteng kalem tea udah membagikan koleksi² penulisan dan script yang mungkin bisa berguna bagi sobat dengan artikel berjudul balakutak :D Sekarang bagaimana membuat kode pada postingan blog sobat bergaya highlighter. Mungkin sudah tidak asing lagi kalau dikalangan blog berbasis WP maupun web. Jika sobat perhatikan penulisan kode-kode mereka baik yg CSS, HTML, Script dipostingannya pasti huruf dan gayanya full stylish kan b-) Setelah melakukan BW kesana kemari mencari kode syntax highlighter ini, menemukan juga yg mungkin simpel dan kecil sizenya :P Code Highlighter 0.2 ini karya Dan Webb (www.danwebb.net) Setelah ditest di dummie blog alias demo blog, berjalan dengan baik dan mulus ;)) Berikut screenshotnya :D

Ooops karena ini terintegrasi dengan jQuery, maka sobat sudah harus memiliki script ini di template sobat yah...<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>Letakan keseluruhan script ini dibawah tag <head> atau diatas tag </head>

<script type="text/javascript" src="CodeHighlighter.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="css.js"></script>
<script type="text/javascript" src="html.js"></script>

Dapatkan seluruh script diatas dihalaman http://svn.danwebb.net/external/CodeHighlighter/trunk/ Setelah itu masukin kode CSS diatas/sebelum kode ]]></b:skin>

Kode CSS

.javascript .comment {
color : green;
}
.javascript .string {
color : teal;
}
.javascript .keywords {
color : navy;
}
.javascript .global {
color : blue;
}
.javascript .brackets {
color : navy;
}
.css .comment {
color : gray;
}
.css .properties {
color : navy;
}
.css .selectors {
color : maroon;
font-weight : bold;
}
.css .units {
color :red;
}
.css .urls {
color :green;
}
.html .tag {
color : purple;
}
.html .comment {
color : gray;
font-style: italic;
}
.html .string {
color : navy;
}
.html .doctype {
color : teal;
}
pre {
border: 1px solid black;
margin : 2em;
padding : 1em;
line-height: 1.5;
background:#debe94;
overflow: auto;
}
code {
font-size: 1.2em;
}

Perhatikan CSS yg dibedakan warnanya itu, biasanya itu sudah ada kalau yg sudah mengedit template :-? (harap dicek dolo) Kalau sudah ada tidak usah pakai lagi maksudnya mah ;)) Tinggal kode CSS yg lainnya ajah yg diedit-edit :P biar gaya dan full stylish :-" Untuk kode HTML terpakai ketika kita akan memosting kode HTML, CSS, atau Javascript tentunya sudah diphrase terlebih dahulu ;) Gunakan tag sbb

Untuk Javascript mode.

<pre><code class="javascript">

YOUR CONTENT IS HERE

</code></pre>

Untuk HTML mode.

<pre><code class="html">

YOUR CONTENT IS HERE

</code></pre>

Untuk CSS mode.

<pre><code class="css">

YOUR CONTENT IS HERE

</code></pre>

Jika tertarik dengan teknik Publish Source code in Blogger masih menggunakan highlighter trick juga, bisa lihat alternatif lain .
Happy highlighters \m/

Trik Komputer

Minggu, 21 November 2010

Highlighters for Blogspot By: Dan Webb

Kode CSS

Tidak ada komentar:

Posting Komentar