Membuat sintax higlight - hem inilah kehabatan dari javascript + jquery hehehe web desainer dan developer rata2 menggunakan ini karena sintax highlight ini unik + keren bagi anda yang ingin menggunakannya silahkan langsung ikuti langkah2 nya :
- Log in di blog anda
- Klik rancangan
- klik Edit HTML
- Cari kode
]]></b:skin>
- Simpan kode di bawah ini di atas kode
]]></b:skin>
/** * SyntaxHighlighter * http://alexgorbatchev.com/ * * SyntaxHighlighter is donationware. If you are using it, please donate. * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate * * @version * 2.1.364 (October 15 2009) * * @copyright * Copyright (C) 2004-2009 Alex Gorbatchev. * * @license * This file is part of SyntaxHighlighter. * * SyntaxHighlighter is free software: you can redistribute it and/or modify * it under the terms of the GNU Lesser General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * SyntaxHighlighter is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with SyntaxHighlighter. If not, see <http://www.gnu.org/copyleft/lesser.html>. */ /************************************ * Default Syntax Highlighter theme. * * Interface elements. ************************************/ .syntaxhighlighter { background-color: #fff !important; } /* Highlighed line number */ .syntaxhighlighter .line.highlighted .number { color: black !important; } /* Highlighed line */ .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 { background-color: red !important; } /* Gutter line numbers */ .syntaxhighlighter .line .number { color: #f7f5f5 !important; background-color: #c0bfbf !important; } /* Add border to the lines */ .syntaxhighlighter .line .content { color: #000 !important; } .syntaxhighlighter.printing .line .content { border: 0 !important; } /* First line */ .syntaxhighlighter .line.alt1 { background-color: #f5f5f5 !important; border-top: white solid 5px !important; } /* Second line */ .syntaxhighlighter .line.alt2 { background-color: #f5f5f5 !important; border-top: white solid 5px !important; } .syntaxhighlighter .toolbar { background-color: #c0bfbf !important; } .syntaxhighlighter .toolbar a { color: #a0a0a0 !important; } .syntaxhighlighter .toolbar a:hover { color: red !important; } /************************************ * Actual syntax highlighter colors. ************************************/ .syntaxhighlighter .plain, .syntaxhighlighter .plain a { color: #000 !important; } .syntaxhighlighter .comments, .syntaxhighlighter .comments a { color: #008200 !important; } .syntaxhighlighter .string, .syntaxhighlighter .string a { color: #0404ab !important; } .syntaxhighlighter .keyword { color: #cf0202 !important; font-weight: bold !important; } .syntaxhighlighter .preprocessor { color: black !important; } .syntaxhighlighter .variable { color: #a70 !important; } .syntaxhighlighter .value { color: #d4af02 !important; } .syntaxhighlighter .functions { color: #ff1493 !important; } .syntaxhighlighter .constants { color: #2a8506 !important; } .syntaxhighlighter .script { background-color: yellow !important; } .syntaxhighlighter .color1, .syntaxhighlighter .color1 a { color: #d301d1!important; } .syntaxhighlighter .color2, .syntaxhighlighter .color2 a { color: #ff1493 !important; } .syntaxhighlighter .color3, .syntaxhighlighter .color3 a { color: red !important; }
Setelah itu silahkan cari kode
</head>
dan simpan kode di bawah ini di atas kode </head>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDelphi.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
Setelah itu Cari lagi kode
</body>
dan simpan kode di bawah ini di atas kode </body><script type='text/javascript'> SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf'; SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
Cara menggunakan Sintax Highlight
1. Jika ingin menyimpan kode css seperti ini kode nya
<pre class="brush: css;"> SIMPAN CSS YANG AKAN DIPASANG DISINI </pre>
2. jika ingin menyimpan kode javascript seperti ini kodenya
<pre class="brush: js;"> SIMPAN Script Js YANG AKAN DIPASANG DISINI </pre>
Postingan juga harus mode EDIT HTML jika ingin menggunakan sintax Hightlight ini.