Membuat Syntax Highlighter Seperti Blog Tuan Siput


Syntaxt Highlighter merupakan fitur yang biasanya digunakan untuk meletakkan kode seperti HTML, CSS, Java Script dan lain-lain.

Desain syntax highlighter yang menarik akan membuat pengunjung dengan mudah mengetahui dan melihat kode yang diletakkan.

Ada berbagai jenis syntax highlighter yang ada saat ini, begitu juga dengan tampilannya.

Namun kali ini saya akan membagikan syntaxt highlighter seperti yang saya gunakan dalam blog tuansiput.com saat ini.

Membuat Syntax Highlighter Seperti Blog Tuan Siput


Cara Memasang

1. Masuk ke "Blogger.com" > pilih menu "Tema" > klik "Edit HTML".

2. Kemudian copy kode di bawah ini dan letakkan di atas atau sebelum kode ]]></b:skin> atau </style>

/* Syntax */
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)&gt;code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)&gt;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}

3. Setelah itu copy kode di bawah ini dan letakkan di atas atau sebelum kode </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>

4. Klik "Simpan"

Cara Menggunakan

5. Masuk ke menu "Postingan" > klik "Entri baru" > Letakkan kode di bawah ini pada tab HTML (bukan compose).

<pre><code class="language-css"> isi kode disini </code></pre>

Untuk hasilnya seperti syntax highlighter yang digunakan dalam postingan ini.

Keren kan kodenya! Silahkan diterapkan ke blog kamu ya.

Kunjungi kembali tuansiput.com untuk informasi menarik tentang blog.

Sumber: taniarascia.com/adding-syntax-highlighting-to-code-snippets/

0 Response to "Membuat Syntax Highlighter Seperti Blog Tuan Siput"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel