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 instr...
https://tutorialcarapintar.blogspot.com/2019/02/membuat-prism-syntax-highlighter-simple.html
Cara Membuat Prism Syntax Highlighter
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}
<script type='text/javascript'>//<![CDATA[ $(document).ready(function(){ $("pre code").addClass('language-markup'); $("pre code").addClass('language-css'); $("pre code").addClass('language-javascript'); }); //]]></script>
<script src='https://rawgit.com/mastamvan/backup/master/prism.min.js' type='text/javascript'></script>
Cara Memasukan Script Ke dalam Syntax Highlighter Di Postingan
<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
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