Membuat Kode Syntak Prism

Kode syntak "PRISM" mungkin banyak diantara sobat blogger yang ingin membuat kode syntak seperti pada gambar di atas, kali ini saya akan suguhkan buat anda para blogger cara pembuatan kode syntak tersebut.

1. Login ke akun Blogger Sobat
2. Klik Template >> Edit HTML
3. Jangan Lupa centang Expand Template Widget
4. Setelah itu Cari kode ]]></b:skin>
5. Letakan kode CSS berikut tepat di atas kode ]]></b:skin>

pre { padding:.5em 1em; margin:.5em 0; white-space:pre; word-wrap:normal; overflow:auto; background-color:#1B2426; } code { font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace; line-height:16px; color:#B43D3D; background-color:#eee; border:1px solid #ddd; padding:1px 2px; } pre code { display:block; background:none; border:none; color:#B9BDB6; direction:ltr; text-align:left; word-spacing:normal; padding:0 0; } code .token.punctuation { color:#83405A; } pre code .token.punctuation { color:#B9BDB6; } code .token.comment, code .token.prolog, code .token.doctype, code .token.cdata { color:#435A4D; } code .namespace { opacity:.8; } code .token.property, code .token.tag, code .token.boolean, code .token.number { color:#5BA1CF; } code .token.selector, code .token.attr-name, code .token.string { color:#986A7C; } pre code .token.selector, pre code .token.attr-name, pre code .token.string { color:#E0E8FF; } code .token.entity, code .token.url, pre .language-css .token.string, pre .style .token.string { color:#E0E8FF; } code .token.operator { color:#878A85; } code .token.atrule, code .token.attr-value { color:#48D30F; } pre code .token.atrule, pre code .token.attr-value { color:#48E638; } code .token.keyword { color:#47A1CF; font-style:italic; } code .token.comment { font-style:italic; } code .token.regex { color:#B43D3D; } code .token.important { font-weight:bold; } code .token.entity { cursor:help; }

6. Kemudian cari kode </body> dan letakan kode berikut tepat diatas kode </body>

Cara Pemakaian
Setiap tipe bahasa memiliki kelasnya masing-masing:

HTML, XML, PHP > language-markup
CSS > language-css
JavaScript > language-javascript
Java > language-java

Kode yang ingin diberi efek harus berada di dalam tag pre > code seperti ini:

<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>

<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre><code class="language-java"> ... kode Java di sini ... </code></pre>

Demikian artikel membuat kode syntak prism, semoga bermanfaat, salam silaturahmi