Cara Membuat Syntax Highlighter Otomatis Terbaru di Blogger

Cara Membuat Syntax Highlighter Otomatis Terbaru di Blogger

Cara Membuat Syntax Highlighter Otomatis Terbaru di Blogger

bang-rey, – Tutorial kali ini kita akan membahas tentang Membuat Membuat Syntax Highlighter Otomatis Terbaru di Blogger Syntax Highlighter adalah salah satu script yang dapat membuat kode menjadi warna-warni. Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang di dalamnya terdapat script HTML, JavaScript, jQuery dan lain sebainya.

Selain memperindah tampilan barisan kode pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang disajikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya ialah, pengunjung akan merasa nyaman membaca sajian konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya.

Dengan begitu, penggunaan Syntax Highlighter lebih cocok kepada blogger yang mengelola blogdengan niche yang terbatas dan sangat tidak cocok digunakan oleh blog yang hanya sekali-sekali menyajikan tutorial alias blog gado-gado, untuk itu bijaklah memilih dan memasang script di blog kita. Sebab, jika berlebihan maka akan berpengaruh terhadap loading blog.

Syntax Highlighter yang saya sajikan ini adalah hasil racikan dari Alex Gorbatchev yang kodenya ini juga dikenal dengan nama script Stabilo Syntacs. Syntax Highlighter adalah tools pengganti blockquote, mengingat tampilan blockquote yang tidak mendukung warna-warni untuk kode script, maka solusinya adalah menggunakan Syntax Highlighter ini. Jika anda tertarik untuk menggunakan Syntax Highlighter ini, silahkan ikuti caranya berikut.

Cara Memasang Syntax Highlighter di Blogger

Langkah 1
Login ke blog lalu masuk ke Theme > Edit HTML. Temukan kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan letakkan kode berikut di atas kode tadi.

Pada kode yang saya marking warna kuning di atas adalah CSS / style dari highlight.js yang bisa dipilih atau diganti DISINI. Yang pada tutorial ini saya menggunakan css googlecode.

Silahkan sesuaikan style highlight.js yang Anda suka dengan mengganti googlecode pada kode tersebut dengan style yang diinginkan. Misalnya suka dengan style Github Gist, maka tinggal ganti googlecode tersebut dengan github-gist.

Atau, bisa juga mengambil style highlight.js ini DISINI (link GitHub).

Langkah 2
Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu letakkan kode berikut ini diatasnya:

Langkah 3
Sebtulnya sampai pada langkah 2 di atas, pemasangan syntax highlight.js sudah selesai. Hanya saja tampilannya masih akan sedikit berantakan ketika JavaScript dan highlight.js belum sempurna di load. Maka untuk mengatasi hal itu, silahkan tambahkan beberapa baris CSS berikut ini di atas kode </style>

Langkah 4
Simpan template

Cara Menggunakan Syntax Highlight.js Otomatis di Blogger/Blogspot

Untuk menggunakan Syntax Highlighter harus melalui menu compose dengan pemanggilan kode sebagai berikut.

sekian dulu tutorial Membuat Membuat Syntax Highlighter Otomatis Terbaru di Blogger , Semoga bermanfaat. Jika ada komentar silahkan tuliskan, jika ada keinginan silahkan bagikan. Terima kasih!, Sumber

   Post on 3 months ago (November 10, 2019)      Last Updated on 3 months ago (November 10, 2019)
    Post by abereyhan       416 views
   

Related Posts

Post a Comment

Subscribe Our Newsletter
web statistics