Memasang Syntax Highlighter Pada Bloger

Syntax Highlighter merupkan fitur dalam text editor, khususnya editor source kode, html, php atau bhasa pemrograman yg lain. . .
loe bingung??gue juga nih. . .:p

Dengan kata lain source kode yg kita pasang pada bloger akan berbeda dengan tulisan yg lain n bisa juga mematikan fungsi tersbut klo itu kode html. . .bagi para blogger yg mnjurus kaki seribu ke IT, akan sngat berguna saat loe ngeblog n berbagi ilmu. .nurut pengalaman gue, klo kita ingin nampilin kode html pada blog kita, kode tersebut mlah berpengaruh dengan tema bisa juga muncul dengan sosok lain (hantu kale). ..

contoh simpelnya kyak gini. .(itu digambarnya kn ada :D)

#include< iostream >
using namespace std;
int main()
{
   cout << "GINI CONTOHNYA";
}

Bagaimana keren kn???klo loe pngin kyak gitu ikutin selanjutnya. .
Now Tutorial Memasang Syntax Pada Blogger / Blogspot kita mulai. .

hanya recommended aja untuk langkah2nya. ..
oke. . .yang pertama loe persiapin yang paling penting adalah backup tema blog loe. ..klo ada kesalahan gue kgak ikutan tanggung jawab loh. . ..
Dalam pemasangannya ntar ada 2 hal utama yg wajib loe perhatiin. .
yg pertama setting dalam html loe. .
n yg kedua cara penulisannya agar syntax loe bisa ada highlighternya. . .(krna msih blum mungkin kita nulis lngsung ada highlighternya gitu. .). .

Kita mulai dari hal yg pertama (setting pada html / tema loe) :
Dalam hal ini ada 3 bagian yg ntar jadi tujuan kita dlam ngisi. .(bnyak banget bagiannya)
Bagian 1 :
Cari kode berikut : </head> gunakan aja [CTRL]+[F] biar cpet. . .
klo udah ktemu copy kode dibawah ini lalu pastekan diatas kode tersebut. .

Bagian 2 :
Klo udah yg bagian stu kita alih kesini nih. ..
Cari lagi kode berikut : </b:skin> gunakan aja [CTRL]+[F] biar cpet. . .
lalu pastekan kode dibawah ini diatasnya. .

.dp-highlighter
{
 font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
 font-size: 12px;
 background-color: #E7E5DC;
 width: 99%;
 overflow: auto;
 margin: 18px 0 18px 0 !important;
 padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span 
{
 margin: 0;
 padding: 0;
 border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}

.dp-highlighter .bar
{
 padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
 padding-left: 0px;
}

.dp-highlighter ol
{
 list-style: decimal; /* for ie */
 background-color: #fff;
 margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
 padding: 0px;
 color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
 list-style: none !important;
 margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
 list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
 list-style-position: outside !important;
 border-left: 3px solid #6CE26C;
 background-color: #F8F8F8;
 color: #5C5C5C;
 padding: 0 3px 0 10px !important;
 margin: 0 !important;
 line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
 border: 0;
}

.dp-highlighter .columns
{
 background-color: #F8F8F8;
 color: gray;
 overflow: hidden;
 width: 100%;
}

.dp-highlighter .columns div
{
 padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
 background-color: #FFF;
 color: inherit;
}

.dp-highlighter ol li span
{
 color: black;
 background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
 margin: 0px;
}

.dp-highlighter.collapsed ol li
{
 display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
 border: none;
}

.dp-highlighter.printing .tools
{
 display: none !important;
}

.dp-highlighter.printing li
{
 display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
 padding: 3px 8px 3px 10px;
 font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: silver;
 background-color: #f8f8f8;
 padding-bottom: 10px;
 border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
 border-left: 0;
}

.dp-highlighter.collapsed .tools
{
 border-bottom: 0;
}

.dp-highlighter .tools a
{
 font-size: 9px;
 color: #a0a0a0;
 background-color: inherit;
 text-decoration: none;
 margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
 color: red;
 background-color: inherit;
 text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Bagian 3 :
The last dah. . .sok inggris nih :D
yg terakhir cari lagi kode ini : </body> gunakan aja [CTRL]+[F] lagi biar cpet. . .
klo ketemu pastekan aja kode dibawah in diatasnya. .

gitu dah settingnya. . .
slanjutnya hal ke-2 yaitu cra penulisannya. . .
Penulisannya sama kyak html biasa kita taruh tulisan yg akan ditaruh di syntax highlighter kedalam tag tersebut. .
contohnya :

TULIS DISINI YANG MAU LOE TARUH

Untuk class 'html' bisa diganti dengan yg lain, seingatku yg pernah gue coba ada c,cs,cpp,java . . .untuk yg lainnya bisa dicari ya. .padahal lupa :D hehehehe tpi just recommended yg gue pke ini semuanya menggunakan class 'html'. .:)

Gimana mudah bukan,hanya tinggal copas aja ntar juga jdi. . .
klo masih gk kena coba terus, teliti stu persatu lagi. . .klo akhirnya temo loe ancur. .tenang kn udah loe backup. .hahahahaha

dlam coretan ini hanya contoh untuk highlighter kyak yg loe liyat itu. .sedangkan syntax highlighter itu sendiri masih bnyak model2nya. ..so klo pngin nyari silahkan aja langsung ke mbah google yah. . .
akhir coretan.....thxu. . .

Posted in: Lain