Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Jumat, 04 November 2016

Membuat dan Mengganti Thema Syntax Highlighter

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>

01<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/>
02<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
03<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/> 
17<style type='text/css'>
18.syntaxhighlighter .line {
19font-size: 76% !important;
20}
21</style>
22<script type='text/javascript'>
23SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
24SyntaxHighlighter.all();
25SyntaxHighlighter.config.bloggerMode=true;
26SyntaxHighlighter.defaults['font-size'] = '50%';
27</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>

1<script language='javascript'>
2SyntaxHighlighter.config.bloggerMode = true;
3SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
4SyntaxHighlighter.all();
5</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.

1<pre class="brush: xml;highlight: [2,4];">
2Taruh kode/artikel anda disini
3</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>
01<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/>
02<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/> 
16<style type='text/css'>
17.syntaxhighlighter .line {
18font-size: 76% !important;
19}
20</style>
21<script type='text/javascript'>
22SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
23SyntaxHighlighter.all();
24SyntaxHighlighter.config.bloggerMode=true;
25SyntaxHighlighter.defaults['font-size'] = '50%';
26</script>

2.Selanjutnya Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </body>
1<script language='javascript'>
2SyntaxHighlighter.config.bloggerMode = true;
3SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
4SyntaxHighlighter.all();
5</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.
1<pre class="brush: xml;highlight: [2,4];">
2Taruh kode/artikel anda disini
3</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.

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.
1<pre class="brush: xml; toolbar: false;">
2Taruh kode/artikel anda disini
3</pre>
Hasilnya nanti akan seperti syntax highlighter dibawah ini
1Syntax Highlighter ini tidak menampilkan View source,Copy to clipboard and print


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi