Contoh Syntax Highlighter Pada blog supar.web.id

supar.web.id. - Bismillah, ini adalah contoh Syntax Highlighter yang dipasang pada blog AMP supar.web.id. Artikel ini ditulis sebagai pengingat untuk ana pribadi apabila dikemudian hari lupa bagaimana cara membuat postingan yang didalamnya ada sript yang harus disisipkan.

Fungsi Syntax Highlighter pada blog

Jadi, fungsinya Syntax Highlighter pada blog ana hampir sama seperti kotak script ataupun blockquote, namun Syntax Highlighter ini lebih khusus untuk meletakkan script ataupun kode yang panjang, agar terlihat lebih enak dibaca.

Memasang Syntax Highlighter

Apabila ada sahabat yang ingin memasang Syntax Highlighter pada blognya, silahkan bisa ikuti caranya dibawah ini:

1. Login ke blogger.com >> tema >> edit HTML

2. Silahkan salin/copy kode css dibawah ini

/* Syntax Highlighter */
.post-body pre{background-color:#e5f2f9;border-left: 5px solid #a5d0eb;margin:10px auto; white-space:pre-wrap; word-wrap:break-word; overflow:auto; position:relative; width:100%;tab-size:2;word-break:normal;user-select:text;hyphens:none;border-radius:3px;}
.post-body pre code{color:#fff;font-size:13px;background:none;max-height:250px; line-height:1.5em; display:block; padding:10px 12px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text;}
@media screen and (max-width:640px){.post-body pre{max-width:calc(100% + 15px);margin:10px 0;}}

3. Silahkan paste kode itu sebelum </style>

4. Save

Cara penerapan Syntax Highlighter pada postingan blog

1. Buatlah sebuah postingan

2. Pindah ke tampilan HTML

3. Sebelum memasukan tag HTML, CSS atau Javascript pada Syntax Highlighter harus diparse dahulu, misalnya di blogcrowds

4. Masukan semua kode CSS, HTML atau Javascript yang sudah diparse pada tampilan HTML postingan, seperti ini

<pre><code>
<!--Masukkan kode CSS,HTML dll disini-->
</pre></code>

5. Setelah selesai menulis artikel, save dan publish

Semoga bermanfaat ...

---

Catatan.

# Cara memasang Syntax Highlighter ini pure CSS insyaa-Allah valid AMP dan tidak memberatkan blog sobat.

# Warna, margin dll silahkan sesuaikan sendiri dengan tampilan blog sobat.

---