Cara memasang Syntax Highlighter pada Blogger


Pada kesempatan kali ini saya akan membuat postingan cara memasang Syntax Highlighter pada Blogger secara permanent pada Blog kalian. Disini saya akan menggunakan Syntax Highlighter dari Prism js.

Berikut Langkah - langkah nya :
1. Download dulu prism.css dan prism.js
Tersedia 2 Tema ada Hitam dan Putih

prism js ini sudah Support Bahasa Pemograman :
  • HTML
  • PHP
  • CSS
  • Java
  • Javascript
  • VB.net
  • Visual Basic
  • C, C# dan C++
  • Perl
  • PL/SQL
Sebenarnya masih banyak lagi, hanya saja saya memilih bahasa pemograman yang umum saja.
2. Setelah di download kalian buka Dropbox kalian, lalu Login ke dalam Dropbox.
3. Upload File yang kalian Download tadi, berupa File prism.js dan prism.css nya ya.
4. Setelah di Upload, Lakukan Share serta Create Link pada File prism.js dan prism.css




5. Setelah kalian buat linknya Copy kedua Link file tersebut pada Notepad.
6. Lalu pergi ke blogger kalian https://www.blogger.com
7. Selanjutnya pergi kebagian Tema/Theme, lalu Pilih Edit HTML


8. Lalu cari tag <head>, untuk mencari Klik Ctrl+F, lalu tambahkan Kode berikut di bawah tag <head> :
<link href='link prism.css' rel='stylesheet'/>

Tambahkan link prism.css yang di buat tadi, Contoh :
<link href='https://www.dropbox.com/s/cfoa1uguh7m/prism.css?dl=0' rel='stylesheet'/>
Rubah www menjadi dl
<link href='https://dl.dropbox.com/s/cfoa1uguh7m/prism.css?dl=0' rel='stylesheet'/>

9. Setelah itu cari tag </body>, tambahkan code berikut di atas tagnya :

<script src='link prism.js' type='text/javascript'/>

Tambahkan link prism.js yang di buat tadi, Contoh :
<script src='https://dl.dropbox.com/s/o1vk3g1it/prism.js?dl=0' type='text/javascript'/>
Rubah www menjadi dl
<script src='https://dl.dropbox.com/s/o1vk3g1it/prism.js?dl=0' type='text/javascript'/>

10. Dan prism js telah sukses di pasang di Blogger kalian.

Untuk Cara menggunakannya, tambahkan Kode ini ketika kalian membuat Postingan Baru, Masuk ke dalam mode HTML, dan tambahkan Kode berikut :

<pre><code class="language-html">
Hello World
</code></pre>


Dan hasilnya akan seperti ini:

Hello World

Apabila ada pertanyaan atau problem bisa di tanyakan di kolom komen.
Semoga Bermanfaat.

0 Response to "Cara memasang Syntax Highlighter pada Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel