Ads Home1

Blogger Tips - Cara Memasang Syntax Highlighting Responsive di Blogger

http://www.xcodeplus.net/2017/09/cara-memasang-syntaxhighlighting-responsive.htm



Cara Memasang Syntax Highlighting Responsive di Blogger Terbaru

Bagi seorang blogger, atau penyedia layanan tutorial pemrograman seperti PHP, CSharp, CPP, HTML, Java, JavaScript atau Mysql dan atau apapun itu yang berhubungan dengan kode program, tidak akan lepas yang namanya Syntax Highlighting. Pada penyedia layanan publikasi blog/web seperti wordpress dan sebagainya untuk penggunanya bisa langsung menginstal plugin-plugin yang telah tersedia sehingga pengguna layanan pihak wordpress tidak susah payah membuat script atau kode sendiri syntax highlighting di blognya.

Berbeda sekali dengan blogger, pada layanan publikasi blog ini kita tidak disediakan plugin atau widget official syntax highlighting dari blogger. Beruntunglah kita karna ada seseorang yang memberikan solusi tersebut dengan gratis tanpa biaya sepersen pun yaitu seseorang yang bernama Alex Gorbatchev.

Dan istimewanya dari syntax highligter buatan alex gorbatchev ini tidak ada iklan dan bersifat open-source, ya Anda bebas menggunakannya, memodifikasinya, bahkan untuk urusan komersial-pun, asalkan Anda tidak mengubah hak cipta pembuat script tersebut. (untuk rujukan klik disini)

Sebelum kita ke topik utama, kita cari tau dulu sebenarnya apa itu Syntax Highlighting ?
Syntax highlighting adalah fitur editor teks yang digunakan untuk bahasa pemrograman, skrip, atau markup, seperti HTML. Fitur ini menampilkan teks, terutama source code, dalam berbagai warna dan font sesuai dengan kategori. Fitur ini memudahkan penulisan dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup karena kedua struktur dan kesalahan sintaksis secara visual berbeda. Highlighting tidak mempengaruhi makna teks itu sendiri; itu hanya ditujukan untuk pembaca manusia.

Syntax highligting adalah bentuk notasi sekunder, karena highlights bukan bagian dari makna teks, namun berfungsi untuk memperkuatnya. Beberapa editor juga mengintegrasikan syntax higlighting dengan fitur lainnya, seperti pemeriksaan ejaan atau pelipat kode, sebagai alat bantu untuk mengedit yang berada di luar bahasa.

Nah.. dan sekarang bagaimana cara memasang syntax highlighting tersebut di blog kita ?
Pembahasan di bawah ini akan menunjukan cara melakukan hal tersebut di blog kita sebagai berikut.

1. Pertama-tama masuk terlebih dahulu ke akun blogger kalian, masukan username dan password Anda.

http://www.xcodeplus.net/2017/09/cara-memasang-syntaxhighlighting-responsive.htm
Gambar 1.1 Tampilan home page blogger.
Catatan :
Untuk Anda yang belum mempunyai akun blogger, silakan registrasi terlebih dahulu klik pada bagian sign up untuk membuat akun blogger baru.


2. Masuk ke menu dashboard, Klik pada pilihan Tema dan klik Edit HTML.

Blogger Tips - Cara Memasang Syntax Highlighting Responsive di Blogger
Gambar 1.2 Tampilan dashboard blogger

3. Setelah Anda masuk pada bagian menu script kode template blog Anda, carilah kode </style>. Agar pencarian tidak memakan waktu lama, lakukan secara otomatis dengan menekan tombol CTRL + F di keyboard, lalu ketikan </style> pada form pencarian seperti yang terlihat pada gambar di bawah ini.

Blogger Tips - Cara Memasang Syntax Highlighting Responsive di Blogger
Gambar 1.3 Proses pencarian tag style

Catatan : 
Jika proses pemasangan gagal, Anda bisa meletakan kode program di atas tag </body>


4.  Setelah Anda menemukan kode </style> copy dan paste script berikut di bawah ini, dan pastikan Anda meletakan script syntax highlighter tersebut di bawah kode </style>.

Script Syntax Highlighter Alex Gorbatchev
<!-- SyntaxHighlighter - Alex Gorbatchev starts -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>



Pastikan Anda telah melakukannya dengan benar, menempatkan kode di atas di bawah kode "</style>", seperti yang terlihat pada gambar di bawah ini.

Blogger Tips - Cara Memasang Syntax Highlighting Responsive di Blogger
Gambar 1.4 Tampilan Script kode SyntaxHighlighter by Alex Gorbatchev

Perhatian :
Jangan gunakan terlalu banyak script SyntaxHighligter - Alex Gorbatchev, hal itu akan menimbulkan load website Anda menjadi lambat, gunakan seperlunya yang memang benar-benar Anda butuhkan.

Setelah selesai klik Simpan dan refresh browser Anda dengan cara tombol F5 pada keyboard.



5. Setelah melakukan hal di atas, sekarang kita dapat langsung membuat kode program kita terbungkus dengan syntax higlighting di blog Anda, disini sebagai contoh saya akan membuat post baru di blog saya, dan pada tutorial kali ini saya hanya menggunakan syntax highlighting untuk bahasa pemrograman C# (csharp) saja. Pada menu post klik mode HTML seperti yang terlihat pada gambar di bawah ini.

Blogger Tips - Cara Memasang Syntax Highlighting Responsive di Blogger
Gambar 1.5 Tampilan pembuatan postingan baru

Masukan perintah untuk membungkus kode program kita dengan syntax highlighter dengan perintah seperti berikut di bawah ini.
<pre class="brush:csharp">

Hello World!

</pre>


Selengkapnya lihat pernyatan pada gambar di bawah ini.

Blogger Tips - Cara Memasang Syntax Highlighting Responsive di Blogger
Gambar 1.6 Aturan dalam penggunaan SyntaxHighlighter di blogger


Sebagai catatan, jika Anda membuat kode program yang panjang kita harus mengkonversi kode program kita dengan encoding html di Super Encoding & Decoding HTML GeneratorFungsinya agar kode program kita terbaca dengan baik, karna tanda-tanda seperti symbol dan karakter unik lainnya akan di anggap kode program html oleh blogger sehingga kita harus mengkonversi terlebih dahulu ke html. 

Setelah Anda sudah yakin dengan kode program yang Anda buat, silakan publikasikan postingan Anda, dan demo post syntax highlighting yang saya buat akan menghasilkan tampilan seperti berikut di bawah ini.


http://www.xcodeplus.net/2017/09/cara-memasang-syntaxhighlighting-responsive.html
Gambar 1.7 Tampilan hasil dari SyntaxHighlighter
         

Untuk contoh lainnya Anda bisa lihat disini.


Catatan : Jangan gunakan terlalu banyak script kode program syntax highlighter yang sebenarnya Anda tidak butuhkan, gunakan yang memang benar-benar Anda butuhkan. Karna penggunaan terlalu banyak script, akan memberikan dampak buruk pada proses load (menjadi berat) terhadap blog Anda.

Di bawah ini daftar kategori syntax highlighter berbagai bahasa pemrograman yang support dengan syntax higlighter alex gorbatchev.


Daftar Bahasa Pemrograman yang Mendukung SyntaxHighligter

1. C# (Csharp)
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>

2. C/C++ (C/Cpp)
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>

3. PHP
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>

4. Perl
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>

5. Java
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>

6. Java Script
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

7. SQL
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>

8. Visual Basic
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>

9. Python (Ular piton ? eh..)
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>

10. Ruby
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>


Tema SyntaxHighlighter

1. Default theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

2. Django
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>

3. Eclipse
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>

4. Emacs
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

5. Fade to Grey
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>

6. Midnight
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>

7. RDark 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>

Jika pada daftar di atas terasa kurang Anda dapat mengunjugi situs resmi dari alex gorbatchev, sekaligus Anda juga bisa mengganti berbagai macam tema yang telah disediakan disini.


XCODEPLUS - THE BEST RESOURCE TO LEARN TO CODE :  [C# TUTORIALS]
C# (dibaca: C Sharp) merupakan bahasa pemrograman generasi baru yang mewah, kaya akan fitur, dan dapat digunakan untuk membuat beraneka raga program/aplikasi di berbagai bidang. C# mendukung beberapa paradigma pemrograman: imperatif, deklaratif, fungsional, serta pemrograman berorientasi objek. C# termasuk dalam keluarga C, dan fitur-fiturnya banyak diadopsi dari Java dan C++. C# menggunakan pustaka (library) yang terdapat dalam .NET Framework, kelengkapan di dalam pustaka .NET Framework menjadikan proses pengembangan program/aplikasi menggunakan C# relatif lebih mudah dan cepat jika dibandingkan dengan C++ dan Java.

No comments:

Kami menerima masukan dari anda jika memang ada pembahasan yang keliru dan kami sangat senang jika anda dapat berkontribusi untuk menyempurnakan postingan kami. Anda dapat mengirimkan email ke : hari18.muhammad@gmail.com

Jika postingan ini bermanfaat jangan lupa share postingan ini. Kami sangat merekomendasikan untuk anda yang membutuhkan informasi tentang computer stuff silakan subscribe blog kami dapatkan informasi terupdate dari kami secara gratiss. Terimakasih!

Powered by Blogger.