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 :DOoops karena ini terintegrasi dengan jQuery, maka sobat sudah harus memiliki script ini di template sobat yah...
Happy highlighters \m/
<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>
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 sbbcolor : 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;
}
- Untuk Javascript mode.
- Untuk HTML mode.
- Untuk CSS mode.
<pre><code class="javascript">
YOUR CONTENT IS HERE
</code></pre><pre><code class="html">
YOUR CONTENT IS HERE
</code></pre><pre><code class="css">
YOUR CONTENT IS HERE
</code></pre>Happy highlighters \m/
Loading... |
3 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...