Membuat Prism Syntax Highlighter Simple Di Blog

Cara Membuat Prism Syntax Highlighter

Simple Prism Syntax Highlighter untuk blogger Kali ini saya akan berbagi sebuah pembungkus kode atau script di blog yang biasa di sebut dengan tag pre dan code atau bahasa latinnya Prism Syntax Highlighter :3




Prism Syntax Highlighter yang akan saya bagikan ini cukup lumayan simple, khusus buat orang yang suka tampilan yang simple seperti saya :3




Sebelumnya asya juga sudah pernah share Prism Syntax Highlighter yang lumayan tidak simple, karena di tutorial yang itu ditambahkan title untuk membedakan antara tag HTML, CSS, Javascript, jQuery.




Barang kali kalian pengen melihatnya silahkan kunjungi link ini.... Memasang Syntax Highlighter Pre Code Di Blogger




Buat kalian yang ingin mencoba Syntax Highlighter Pre Code ini, silahkan ikuti tutorial singkat di blog mas tamvan ini :v ...

• 
  Login dulu ke Blogger.com
  


• 
  Masuk ke Tab Templates, Edit HTML
  


• Selanjutnya Cari Kode ]]></b:skin> Atau </style>
  


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



pre {overflow: auto;max-height: 450px;margin: 10px 0 !important;padding: 20px;}code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);font-family:Roboto,sans-serif!important;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}



• 
  Lanjut... Sekarang kalian cari kode </head>
  


• 
  Kalo sudah ketemu, masukan Javascript dibawah ini tepat d atasnya...!
  



<script type='text/javascript'>//<![CDATA[
        $(document).ready(function(){
          $("pre code").addClass('language-markup');
          $("pre code").addClass('language-css');
          $("pre code").addClass('language-javascript');
        });
        //]]></script>



• 
  Masih lanjut gan, kita kasih style warna pada kode-kode tertentu dengan javascript berikut ini.
  


• 
  Cari kode </body>
  


• 
  Lalu masukan Javascript berikut diatasnya.
  



<script src='https://rawgit.com/mastamvan/backup/master/prism.min.js' type='text/javascript'></script>




Sebenarnya agan mau pasang di atas </head> juga bisa..!



• 
  Save template....
  



Cara Memasukan Script Ke dalam Syntax Highlighter Di Postingan



• 
  Silahkan agan buat postingan baru...
  


• 
  Lalu pilih Bilah / Mode HTML pada postingan. Contoh Lihat Gambar....
  



• 
  Lalu agan masukan script di situ dengan pembungkus pre code.. contoh.....
  

  
  <pre><code>
  Scriptnya Disini
  </code></pre>
  

  
  




Perlu Di Ingat!!
Kalo memasukan script ke postingan di mode HTML agan harus mem parse atau di 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
  

Terimakasih sudah berkunjung dan membaca artikel di blog saya tentang Cara Membuat Prism Syntax Highlighter Simple Di Blog ini, semoga bermanfaat.




Jangan lupa tinggalkan jejak anda di kolom komentar biar nanti saya mudah bekunjung ke blog kalian :) Okeh Sampai Jumpa Kawan :v