Rabu, 26 Januari 2011

Membuat sintax higlight


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 :

  1. Log in di blog anda
  2. Klik rancangan
  3. klik Edit HTML
  4. Cari kode ]]></b:skin>
  5. 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.