Membuat Prism Syntax Highlighter Simple Di Blog

Cara Membuat Prism Syntax Highlighter

Simple Prism Syntax Highlighter untuk blogger Kali ini aku akan membuatkan sebuah pembungkus instruksi 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 aku bagikan ini cukup tidak mengecewakan simple, khusus buat orang yang suka tampilan yang simple menyerupai aku :3

Sebelumnya asya juga sudah pernah share Prism Syntax Highlighter yang tidak mengecewakan tidak simple, alasannya yaitu 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 sempurna d atas salah satu instruksi 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 instruksi </head>
• Kalo sudah ketemu, masukan Javascript dibawah ini sempurna 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 instruksi </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 instruksi tersebut..
Karena kalo tidak di parse / konversi nanti scriptnya akan bekerja dan tidak akan tampil..

Untuk Mem parse instruksi HTML / Javascript dapat memakai tools yang sudah aku 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 aku wacana Cara Membuat Prism Syntax Highlighter Simple Di Blog ini, semoga bermanfaat.

Jangan lupa tinggalkan jejak anda di kolom komentar agar nanti aku gampang bekunjung ke blog kalian :) Okeh Sampai Jumpa Kawan :v