Beranda / BLOGGER

Crayon Syntax Highlighter For Blogger

Posting Komentar

memasang Crayon Syntax Highlighter di blogger


Crayon Syntax Highlighter untuk Blogger



Cara memasang Crayon Syntax Highlighter di blogger, biasanya Crayon Syntax Highlighter ini dipakai di WordPress tapi pada tutorial kali ini saya akan memberikan tutorial untuk memasang Plugins Crayon Syntax Highlighter di blogger


Crayon Syntax Highlighter mendukung beberapa bahasa pemerograman seperti..











HTMLCSSPHPSQLXMLVBPythonJavascript

Dan Yang Lainnya

Nah di sini saya tidak share seemua scripnya, tapi hanya sebagian yang biasa dipakai untuk share tutorial, berbagi script di blog tentang css, html, javascript, supaya tidak terlalu berat.



Result

Sebelumnya saya juga sudah share beberapa pembungkus kode untuk dipasang ke blog, kalian bisa liat di link berikut ini


Tutorial Blogger Lainnya :



  • Memasang Syntax Highlighter Pre Code Di Blogger


  • Cara Membuat Syntax Highlighting Pembungkus Kode


  • Membuat Kotak Catatan / Blockquote Keren Di Blog








Untuk yang ingin memasang Crayon Syntax Highlighter ini, silahkan ikuti langah demi langkah cara pemasangannya....





  • Login dulu ke Blogger.com

  • Masuk ke Tab Templates, Edit HTML

  • Selanjutnya Cari Kode </head> Atau </body>

  • Kalo sudah ketemu, masukan Script dibawah ini tepat d atas salah satu kode yang di cari tadi...!


    • <!--Crayon Syntax Highlighter For Blogger-->
    <link href='https://rawgit.com/mastamvan/backup/crayonhighlighter/crayon-min.css' rel='stylesheet' type='text/css'/>
    <script src='https://rawgit.com/mastamvan/backup/crayonhighlighter/shCore.js' type='text/javascript'></script>
    <script src='https://rawgit.com/mastamvan/backup/crayonhighlighter/shBrushPython.js' type='text/javascript'></script>
    <script src='https://rawgit.com/mastamvan/backup/crayonhighlighter/shortcodes.js' type='text/javascript'></script>
    <script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true; 
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf'; 
    SyntaxHighlighter.all(); 
    </script>
    <!--Crayon Syntax Highlighter For Blogger-->


    Crayon Syntax Highlighter ini memerlukan Ajax Jquery Library di template kalian, jika belum ada... masukan script berikut di atas </head>



    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>


  • Kalau sudah etrpasang save template

    • Cara Pemasangan Crayon Syntax Highlighter ke Postingan


  • Masuk ke postingan yang ingin d pasang kode / buat post baru sebagai contoh

  • Selanjutnya pilih Tab / Mode HTML bukan Compose pada postingan. Contoh Lihat Gambar....

    • Membuat Prism Syntax Highlighter Simple Di Blog
  • Lalu kalian copy kode dibawah ini ke adlam postingan mode HTML


    • [code hl="1, 4, 7"]
    Taro Script Agan Disini
    [/code]


    Jika Tidak Bekerja, silahkan rubah jadi seperti ini...

    <div class='post' >
    [code hl="1, 4, 7"]
    Taro Script Agan Disini
    [/code]
    </div>


  • Ganti tulisan Taro Script Agan Disini dengan kode yang ingin dipasang ke post


    • Kalo memasukan script ke postingan di mode HTML agar tidak terbaca sebagai HTML agan harus parse atau konversi terlebih dahulu kode tersebut..


    Karena kalo tidak di parse / konversi nanti scriptnya akan bekerja dan tidak akan tampil..


    Untuk Mem parse kode HTML / Javascript bisa menggunakan tools yang sudah saya sediakan...
    Cara Parse Atau Konversi Kode HTML




  • Setelah itu agan tinggal lanjutkan menulis kata-kata lainnya.


  • Kalo sudah, tinggal save dan lihat hasilnya. #Thank


okeh, cukup sekian dan terimakasih, semoga artikel tentang Cara Memasang Crayon Syntax Highlighter di Blogger ini bermanfaat bagi kita semua ya :)




Jangan lupa tinggalkan jejak anda di kolom komentar ya :), barang kali ada yang mau ditanyakan okeh :)





Anda mungkin menyukai postingan ini

Tidak ada komentar untuk "Crayon Syntax Highlighter For Blogger"

Posting Komentar