Membuat dan Mengganti Thema Syntax Highlighter

Membuat dan Mengganti Thema Syntax Highlighter Blog

Syntax highlighter atau perintah untuk membuat penyorotan stabilo dengan berbagai macam jenis thema pada area tertentu dalam halaman blog yang biasanya digunakan untuk menyorot sebuah kode seperti HTML,CSS,artikel dll.Selain membuat blog cantik dan memperlihatkan kapasitas profesionalisme seorang blogger,Syntax Highlighter juga dapat memudahkan seseorang untuk mengambil/menggunakan (copas) kode atau post artikel yang ada pada page blog anda karena Syntax Highlighter ini dilengkapi dengan fungsi View Source,Copy to Clipboard dan Print.
Syntax Highlighter
8(Delapan) macam thema Syntax Highlighter yang bisa diterapkan dalam blog anda antara lain:
1.Theme Default, kodenya ( shThemeDefault )
2.Theme RDark, kodenya ( shThemeRDark )
3.Theme Midnight, kodenya ( shThemeMidnight )
4.Theme MDUltra, kodenya ( shThemeMDUltra )
5.Theme FadeToGrey, kodenya ( shThemeFadeToGrey )
6.Theme Emacs, kodenya ( shThemeEmacs )
7.Theme Eclipse, kodenya ( shThemeEclipse )
8.Theme Django, kodenya ( shThemeDjango )

Tutorial untuk menginstall/memasang Syntax Highlighter disini akan saya jabarkan dari mulai membuat Syntax Highlighter sederhana sampai dengan Syntax Highlighter berbeda thema disetiap halaman.

1.Membuat Syntax Highlighter Versi Simple/Sederhana


Syntax Highlighter Versi Simple adalah Syntax Highlighter yang hanya mempunyai satu thema dalam sebuah blog meskipun themanya bisa diganti akan tetapi hasil themanya akan selalu sama disetiap halaman blog.Misalnya anda menerapkan Syntax Highlighter dengan thema Django hasilnya nanti disetiap halaman akan sama yaitu Syntax Highlighter thema Django.Langkah-langkah Membuat Syntax Highlighter Versi Simple/Sederhana dibawah ini:

1.Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </head>

<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>
<style type='text/css'>
.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['font-size'] = '50%';
</script>

Ket:
-Untuk mengganti thema anda hanya perlu mencari kode shThemeDefault pada baris nomor 02 di atas dan menggantinya dengan salah satu dari 8(delapan) macam kode thema Syntax Highlighter di atas.
-Untuk merubah ukuran font anda hanya perlu merubah angka 76% yang terletak pada baris ke 19 kode Syntax Highlighter di atas.

2.Selanjutnya Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </body>

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

3.Kemudian Save/Simpan Template.

4.Langkah selanjutnya masuk pada halaman posting dan pastikan pada mode HTML,kemudian masukkan kode dibawah ini kedalam postingan anda.

<pre class="brush: xml;highlight: [2,4];">
Taruh kode/artikel anda disini
</pre>

5.Langkah terakhir simpan dan Publikasikan untuk melihat tampilan Syntax Highlighter pada postingan anda.

2.Membuat Syntax Highlighter Versi Mutasi/Perubahan


Syntax Highlighter Versi Mutasi adalah Syntax Highlighter yang mempunyai kemampuan untuk menerapkan thema yang berbeda disetiap halaman blog apabila anda menghendakinya.Langkah-langkah Membuat Syntax Highlighter Versi Mutasi/Perubahan dibawah ini:

1.Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </head>
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>
<style type='text/css'>
.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['font-size'] = '50%';
</script>

2.Selanjutnya Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </body>
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

3.Kemudian Save/Simpan Template.

4.Langkah selanjutnya masuk pada halaman posting dan pastikan pada mode HTML,kemudian masukkan kode dibawah ini kedalam postingan anda.
<pre class="brush: xml;highlight: [2,4];">
Taruh kode/artikel anda disini
</pre>
Ket:
-Bila anda ingin menaruh kode agar di tampilkan dalam postingan juga sebagai kode seperti yang saya lakukan terhadap anda untuk berbagi kode dan bukan sebagai widget anda harus memparse kode terlebih dahulu,klik disini untuk Parse HTML online.

5.Selanjutnya masukkan kode thema syntax highlighter dibawah ini kedalam postingan anda,dan anda bisa menaruhnya dibagian paling bawah atau tepat di atas kode pada langkah ke-empat.
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Ket:
-Untuk mengganti thema anda hanya perlu mengganti kode shThemeDefault dengan salah satu dari Delapan kode thema syntax highlighter.

Sebagai tambahan bila anda tidak mau menampilkan View source,Copy to clipboard and print,anda bisa menggunakan kode syntax highlighter dibawah ini.
<pre class="brush: xml; toolbar: false;">
Taruh kode/artikel anda disini
</pre>
Hasilnya nanti akan seperti syntax highlighter dibawah ini
Syntax Highlighter ini tidak menampilkan View source,Copy to clipboard and print


Related Post:

64 comments:

siva safitri said...

uyeeeeee,,,,,
mampir coment ea gant,,,

Kangroniblog said...

kangroni ucapkan terimakasih atas kunjungannya......and jgn bosen ya berselancar di blog amburadul ini.....

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Kangroniblog said...

sorry for the time I have not been able to solve the problem

Asep Sukmajaya Sang Pengembara said...

kang punten saya mau nanya kok tampilan font size highlighter di blog saya kecil yah...? apa mungkin ukuran percent font di bagian pengeditan HTML template ( kode javascript dan CSS nomor 1 pembahasan 2 ) diatas tag </head> .

Nah kalau memang harus diubah , berapa kira2 ukuran normal percent font itu kang...? mohon balasannya yah soalnya penting banget euy , masalahnya template blog saya memerlukan syntax yang seperti ini , soalnya template hitam gelap sih , jadi untuk bisa menyesuaikan diri memang harus menggunakan theme syntax yang bisa diubah , rata2 kan tutorial theme synytax yang dikasih blogger lain kebanyakan untuk template terang...!.

http://masihbelajarnih.blogspot.com/

Kangroniblog said...

ADA DUA CARA MENGEDIT FONT SYNTAX
1.Bila sobat ingin menyamakan font syntax dengan font posting sobat cukup menghapus kode seperti dibawah ini.

.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['font-size'] = '50%';
</script>

yg terletak pada tag </head> di atas.(baris 17 sampai akhir)

2.Cara kedua sobat tidak usah hapus menghapus ,hanya saja sobat harus merubah ukuran font-size 76% menjadi lebih besar,misalnya sobat merubah mjd 80% .jgn khawatir sobat ubah aja bila masih terlalu kecil.

Admin said...


DOWNLOAD IDM LATEST VERSION 6.16 WITH 1 YEAR SERIAL KEY 50% INCREASE IN DOWNLOADING SPEED DOWNLOAD FREE FROM HERE-->>> www.icoregames.blogspot.com

DOWLOAD WIN 7 AND WIN 8 ACTIVATED SETUPS FULL VERSIONS DOWNLOAD FREE FROM HERE-->>> www.gamesaccess.blogspot.com

Anonymous said...

Ηі thегe еveryοne, іt's my first go to see at this site, and piece of writing is in fact fruitful designed for me, keep up posting these types of articles or reviews.

Also visit my web page :: roberecarpetcare.com

Iqra mullah said...

mas,, saya udah follow blog kangroni,,, follow back blog saya mas http://nadasyahreza.blogspot.com Sebelumnya tips nya bagus,,, bermanfaat,,,, tetap jaya blog kangroni

Kangroniblog said...

thanks

CONTACT ME said...

DOWNLOAD ASK MOM 3D SEX GAME FOR ADULTS 18+ CLICK HERE TO DOWNLOAD

DOWNLOAD TEKKEN 5 PC GAME HIGHLY COMPRESSED INSTALLATION SETUP CLICK HERE TO DOWNLOAD

DOWNLOAD SEDUCE ME SEX ADULT PC GAME 18+ CLICK HERE TO DOWNLOAD

InfoSik.Org said...

Terima kasih langsung di coba gan

cara mengencangkan payudara said...

blognya menarik sekali, penuh info yang mendidik.. thanks, gan

pengencang payudara said...

terimakasih banyak nih gan, infonya menarik banget buat dibaca siang2 gini..

pengencang payudara said...

kunjungan pagi, sebelum berangkat ngantor.. nice post, gan. menarik minat untuk dibaca, bagus banget.

Gunawan Eka Saputra said...

Ini yg aku cari Mas, mkasih nich...

Saud Karrysta said...

Salam kenal Kang Roni menarik artikelnya tentang syntax
Ijin coba dan saya belajar yah Kang. terima kasih salam santun Kang

cara mencegah ejakulasi dini said...

nice website, situsnya sangat menarik, banyak artikel bermanfaat dan berita terkini yang menggugah minat. bagus!!

mengatasi ejakulasi dini said...

terimakasih semuanya, berkat website yang saya kunjungi ini, kita semua bisa saling bersua dan bersaudara. terimakasih bnyak.

oris breast cream said...

terimakasih banyak nih, artikelnya sangat bermanfaat sekali bagi kami yang membutuhkan, keep sharing gan..!

foredi said...

Infonya sangat menarik dan bermanfaat untuk di simak,,,sukses selalu untuk info and websitenya be the best to the next info..

pria perkasa said...

ikut nyimak infonya gan. senang berkunjung ke website anda, terimakasih atas informasinya.

oris breast cream said...

thanks nih gan, artikelnya sangat membantu sekali. bagus untuk bacaan sehari-hari.

agaust frider said...
This comment has been removed by the author.
agaust frider said...

thanks gan infornya sangat membantu...
cuman saya agak kebingungan ketika memasang syntax python pada komentar...
karena dia harus memperhatikan tab'nya...
kunjungi balik y gan...
http://python113.blogspot.com/

payudara kencang said...

izin simak ya admin buat artikelnya, postingan yg bermanfaat sekali. terimakasih atas informasinya sangat bermanfaat.

cara mengecilkan perut said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih.

pengencang payudara said...

bagus sekali informasi yg agan berikan sangat menarik dan bermanfaat thanks gan, ijin share berbagi info :)

bercinta tahan lama said...

terima kasih atas informasinya. Sukses ya Terimakasih banyak telah berbagi informasnya,sukses selalu untuk info beserta websitenya,,

cara mencegah ejakulasi dini said...

teirma kasih banyak karena sudah berbagi berita yang sangat menarik. terima kasih banyak atas beritanya.

cara diet sehat said...

infonya sangat bermanfaat sekali gan, makasih. beritanya bagus dan sangat menarik sekali untuk di baca.

Dokter Boyke said...

terima kasih atas informasinya. Sukses ya Terimakasih banyak telah berbagi informasnya,sukses selalu untuk info beserta websitenya,,

cara mengencangkan payudara secara alami said...

teirma kasih banyak karena sudah berbagi berita yang sangat menarik. terima kasih banyak atas beritanya.

jual power bank said...

ijin untuk dicoba master....terimakasih ilmunya luar biasa yang dibagikan

Seputar Bola Terkini said...

cara menggantinya mudah sekali juragan
terima kasih sudah berbagi informasi :)

Keputihan pada wanita said...

infonya sangat bermanfaat sekali gan, makasih. beritanya bagus dan sangat menarik sekali untuk di baca. Ijin share ya gan, thanks..

gasa said...

terima kasih atas informasinya. Sukses ya..!! Dan Terimakasih banyak telah berbagi informasnya, Semoga Makin Keren selalu untuk info beserta websitenya,,

Manfaat Kulit Manggis said...

teirma kasih banyak karena sudah berbagi berita yang sangat menarik. zaman sekarang sudah jarang menemukan blog yang isinya penuh manfaat seperti ini, keren!!

cara mengatasi keputihan said...

selamat datang bulan Januari!! semoga bulan ini membawa berkah dan membukakan pintu kesuksesan serta kebahagiaan untuk kami semua. Amiin, amiiin..

obat kuat tradisional said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih.

penyebab ejakulasi dini said...

terima kasih atas informasinya. Sukses ya..!! Dan Terimakasih banyak telah berbagi informasnya, Semoga Makin Keren selalu untuk info beserta websitenya,,

pelangsing badan herbal said...

teirma kasih banyak karena sudah berbagi berita yang sangat menarik. zaman sekarang sudah jarang menemukan blog yang isinya penuh manfaat seperti ini, keren!!

harga foredi said...

bagus sekali informasi yg agan berikan ini. Jelsa sekali sangat menarik dan bermanfaat. thanks gan!! Thanks banget!! ijin share berbagi info :)

harga oris breast cream said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali lagi thanks.

khasiat bawang putih untuk pria said...

terima kasih atas informasinya. Sukses ya..!! Dan Terimakasih banyak telah berbagi informasnya, Semoga Makin Keren selalu untuk info beserta websitenya,,

Obat Oles Tahan Lama said...

terimakasih banyak ya? sudah berbagi cerita & berita yang sangat menarik. akhir-akhir ini sudah jarang mendapati blog berisi artikel manfaat seperti ini, keren!!

cream pengencang payudara said...

Postingan ini sangat bermanfaat, memberikan informasi mengenai hal yang belum diketahui. Semoga postingan ini bisa memberikan motivasi untuk selalu ingin tahu.

Kangroniblog said...

amin,,,,thanks sob

pengencang payudara paling ampuh said...

terimakasih banyak ya? sudah berbagi cerita & berita yang sangat menarik. akhir-akhir ini sudah jarang mendapati blog berisi artikel manfaat seperti ini, keren!!

Pemulihan Pasca Kuret said...

terima kasih atas informasinya. Semua beritanya terlihat menarik untuk di simak, mohon kunjungi juga website kami, kami tunggu. Terimakasih.

diet detox 7 hari said...

Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih. sekali lagi thanks.

perawatan pasca kuret said...

Semua postinga artikelnya sangat menarik untuk di simak, mohon kunjungi juga website kami, kami tunggu. terima kasih. :D

cara melancarkan bab said...

besok sudah datang Idul Adha yang kita tunggu ya gan?? Semoga anda yang beragama islam menjalankan Puasa Arafah hari ini, keep posting, thanks. Salam.

tempat tidur anak said...

salam sukses http://www.tempattidur123.com

furniture duco said...

salam sukses http://www.furnitureputih.com

mengatasi nyeri saat haid said...

Nice share nih juragan.. keep posting, semoga postingannya selalu memberikan banyak manfaat untuk banyak orang. amiiinnn.. ^_^

mengencangkan payudara secara alami said...

Terimakasih atas semua artikel bermanfaat yang sudah anda publikasikan melalui blog yang menarik ini, saya tunggu postingan selanjutnya, have a nice day, kawan :)

harga fiforlif said...

nice post, gan... Keep posting!!

Law Evading Rock Melost said...

Hei, kamu sudah dengar musik ini belum??? saya menemukannya di youtube dan ternyata keren banget... coba deh dengerin....

soraru amatsuki alien alien said...

nice post, kawan.. jangan lupa kunjungan baliknya ya?? saya tunggu, terimakasih. Hhihihihihihi

Asking too much aho no sakata amatsuki said...

morning, minna.. sekarang lagu amatsuki x aho no sakata yang berjudul asking too much sudah bisa ditonton dalam bahasa indonesia! Ayo berkunjung...!!

Asking too much aho no sakata amatsuki said...

morning, minna.. sekarang lagu amatsuki x aho no sakata yang berjudul asking too much sudah bisa ditonton dalam bahasa indonesia! Ayo berkunjung...!!

Agen Poker Online said...

Terima kasih atas informasinya min..

Post a Comment