Skip to main content

Contoh Syntax Highlighter Pada blog Anasupar.Com

Bismillah, ini adalah contoh Syntax Highlighter yang dipasang pada blog AMP Anasupar.Com. 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 sobat 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 yang berada 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 diatas/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 diblogcrowds
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>
4. Setelah selesai menulis artikel, save dan publish

semoga bermanfaat ...

___________
*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.
*Referensi tutorial ini ana dapatkan dari blognya mbak igniel dan yang lainya.
Agar mudah mengakses Anasupar.Com di smartphone, klik ikon 3 titikdi browser Chrome kemudian pilih "Tambahkan ke layar utama". Selanjutnya bisa mengakses Anasupar.Com dari layar utama smartphone dengan klik ikon Anasupar.Com.
Buka Komentar