Cara Membuat Syntax Highlighter (Kotak Script) Keren di Blogger

Cara Membuat Syntax Highlighter
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 cara membuat syntax highlighter seperti yang saya gunakan dalam blog tikusmales.com saat ini.

Cara Membuat Syntax Highlighter Seperti Blog Tikus Males


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.

Kerenkan panduan membuat syntax highlighter nya! Silahkan diterapkan di blog milik Anda ya. Kunjungi kembali tikusmales.com untuk informasi menarik tentang blogger. Jika masih ada pertanyaan, silahkan tanyakan melalui kolom komentar artikel di bawah ini.

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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel