uRY3bUjY8Hn2UMfOrCMdQ81DK0Q3SSabt9YctDOK
2163131407361236324

Memasang Syntax Highlighter EnlighterJS di Blogger dengan Penomoran

to read
EnlighterJS V3 for Blogger

Hai sobat blogger, kali ini akan memberikan Tutorial tentang Cara Memasang Syntax Highlighter EnlighterJS V3 di Blogger rasa WordPress. Menurut saya, Syntax ini fiturnya sudah lengkap mencakup Penomoran Baris, Tools atau Peralatan seperti tombol Toggle Raw Code, Salin / Copy dan Open in New Window. Sebenarnya EnlighterJS ini tools tambahan atau biasa disebut dengan Plugins untuk Syntax di WordPress, tapi karena sudah dicari cara agar dapat digunakan di Blogger, maka langsung di share di Blog ini :D.

Penjelasan singkat tentang EnlighterJS :
EnlighterJS, Open Source Syntax Highlighter yang disusun menggunakan javascript murni

Menggunakannya bisa sesederhana menambahkan satu skrip dan style ke situs web Anda, memilih elemen yang ingin Anda sorot, dan EnlighterJS menangani sisanya.

Fitur yang diberikan :

  • Dirancang untuk bekerja di semua browser modern (bukan server-side)
  • Pustaka yang dienkapsulasi dan berdiri sendiri - tanpa ketergantungan (tanpa MooTools, tanpa jQuery!)
  • 40 bahasa / format yang didukung
  • 12 tema berkualitas tinggi
  • Penyorotan sintaksis sebaris
  • Codegroups untuk menampilkan beberapa blok kode dalam panel-tab
  • Tunjukkan baris kode khusus
  • Ukuran sangat kecil: 45KB JS (semua bahasa) + 10KB CSS (satu tema; semua tema 60KB)
  • Sorot semua blok kode di halaman Anda dengan satu perintah

Bahasa / Format Kode yang Didukung :

*(....) = data-enlighter-language 

Tampilan / Tema :

  • Enlighter (enlighter, standard) - Enlighter`s tema Bawaan
  • Classic (classic) - Terinspirasi dari SyntaxHighlighter 
  • Bootstrap (bootstrap4) - Tema terinspirasi dari Bootstrap 4, kontras tinggi
  • Beyond (beyond) - Tema BeyondTechnology
  • Godzilla (godzilla) - Inspirasi Tema A MDN
  • Eclipse (eclipse) - Terinspirasi oleh Eclipse
  • MooTwo (mootwo) - Terinspirasi dari MooTools Website
  • Droide (droide) - Modern, minimalis
  • Minimal (minimal) - Cerah, Kontras tinggi
  • Atomic (atomic) - Gelap, Kaya Warna
  • Dracula (dracula) - Gelap, menggunakan skema warna Draculatheme resmi
  • Rowhammer (rowhammer) - Terang, Transparan, baris terbagi
*(....) = theme


Instalasi / Pemasangan :

1. Salin kode CSS berikut ini :

<link rel="stylesheet" href="https://cdn.statically.io/gh/hackhermannz/hackhermannz/742d3fec/EnlighterJS-3.4.0/dist/enlighterjs.min.css"/>

Paste code CSS tersebut tepat diatas kode </head>

2. Salin kode JavaScript src berikut ini :

<script src='//cdn.statically.io/gh/hackhermannz/hackhermannz/212e10e8/EnlighterJS-3.4.0/dist/EnlighterJS_V3_HackHermannz.min.js'/> <script> //<![CDATA[ EnlighterJS.init('pre', 'code', { theme: 'enlighter', indent : 2 }); //]]> </script>

Paste code JavaScript tersebut tepat diatas kode </body>
*Silahkan ganti theme yang diwarnai kuning tersebut dengan theme yang kamu inginkan dengan daftar yang sudah disebutkan diatas!

3. Cara Penulisan untuk Postingan Blogger

  • Pertama-tama, Parse code kamu terlebih dahulu
  • Lalu pergi ke Edit HTML Postingan Blogger.



  • Setelah itu, tempel kode berikut :

<pre data-enlighter-language="generic">KODE KAMU YANG SUDAH DI-PARSE DISINI...</pre>

*Untuk yang diwarnai kuning tersebut kalian bisa menggantinya sesuai dengan bahasa yang kalian inginkan seperti "javascript", "html", "xml", atau yang lainnya sesuai dengan daftar Bahasa yang didukung diatas.


Terkait :



Nah, demikian artikel mengenai Syntax Highlighter EnlighterJS dengan Penomoran dan Tools lengkap ini saya bagikan, semoga bermanfaat. Terima Kasih !



https://github.com/EnlighterJS/EnlighterJS
Related Posts
Hack Hermannz
Don't ever try to judge me, dude ! You don't know what the fuck I've been through.

Related Posts

BloggerDisqus

BloggerDisqus
Berkomentarlah dengan Bijak !!!
<3<3 @@@@ ^_^^_^ ^^^^ :):) :(:( hihihihi :-):-) :D:D =D=D :-d:-d ;(;( ;-(;-( @-)@-) :P:P :o:o -_--_- (o)(o) (p)(p) :-s:-s (m)(m) 8-)8-) :-t:-t :-b:-b b-(b-( :-#:-# (y)(y) x-)x-) (k)(k) (h)(h) cheercheer (li)(li) :v:v :3:3 (c)(c) (s)(s) (pl)(pl) (f)(f)
  • Untuk menyisipkan Kode, gunakan tag <­i rel="pre"> atau <­i rel="code">KODE ANDA DI SINI...<­/i>
  • Untuk menyisipkan Gambar, langsung masukkan URL GAMBAR ANDA DI SINI...
  • Untuk menyisipkan Judul, gunakan tag <­b rel="h3">JUDUL ANDA DI SINI...<­/i>
  • Untuk menyisipkan Catatan, gunakan tag <­b rel="quote">CATATAN ANDA DI SINI...<­/i>
  • Untuk menciptakan Cetak Tebal gunakan tag <­b>TEKS ANDA DI SINI...<­/b>
  • Untuk menciptakan Cetak Miring gunakan tag <­i>TEKS ANDA DI SINI...<­/i>
  • Untuk melampirkan Video gunakan tag [iframe]URL EMBED ANDA DISINI ...[/iframe]


    • Konversi & menjadi &amp;
    • Konversi < menjadi &­lt;
    • Konversi > menjadi &­gt;
    • Konversi " menjadi &­quot;
    • Konversi ' menjadi &­#039;

    3 komentar

    1. Fernand

      template yg dipake blog ini dong di share gan hihi

      Balas
    2. Unix Coders

      Buy template blogspot fast load + nice seo read more

      Please contact me if you buy

      Balas