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>
<script type="text/javascript" src='http://asalnyambung.googlecode.com/files/syntak-asalnyambung.js'></script>

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

Berlangganan update artikel terbaru via email:

2 Responses to "Membuat Kode Syntak Prism"

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel