Cara Memasang Syntax Highlighter di Postingan Template LinkMagz

Cara Memasang Syntax Highlighter di Postingan Template LinkMagz - Pada umumnya, kebanyakan blogger menggunakan syntax highlighter untuk menampilkan kode atau skrip ke dalam format teks atau tulisan. Selain dapat menyesuaikan skrip dengan format penulisan yang sebenarnya, syntax highlighter juga dapat membuat tulisan menjadi lebih rapi dan menarik.

Namun belakangan ini, saya sering mendapatkan pertanyaan tentang syntax highlighter yang tidak bisa digunakan di template LinkMagz. Sesuai dengan postingan terdahulu, saya sering mengatakan bahwa, ada beberapa skrip yang tidak cocok digunakan di template ini.

Pada umumnya, tampilan skrip atau kode pada postingan template LinkMagz terlihat sangat sederhana. Kira-kira, tampilannya akan seperti berikut ini:

Nah, untuk mengatasi masalah tersebut, saya akan membagikan skrip khusus syntax highlighter yang bisa digunakan di template LinkMagz. Untuk pemasangannya sendiri, ikuti langkah-langkah di bawah ini:

Cara Memasang Syntax Highlighter di Postingan Template LinkMagz

• Masuk ke BLOGGER
• Pilih menu TEMA
• Pilih EDIT HTML
• Hapus semua kode .post-body pre dan .post-body code
• Tempel di atas ]]></b:skin>:

.post-body pre {background-color:#0c1c2e;border-left:5px solid #279fd3;padding:0; margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
.post-body pre code {color:#bfbf90;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:none;border:none;padding:10px 15px;font-family:'source code pro', menlo,consolas, monaco, monospace;white-space:pre-wrap;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}

• Pilih SIMPAN
• Selesai.

Catatan

1. Jangan lupa untuk menghapus kode .post-body pre dan .post-body pre code agar tidak terjadi bentrok
2. Seperti biasa, gunakan format penulisan berikut:

<pre><code>Masukkan skrip di sini...</code></pre>

3. Silahkan atur tampilan sesuai dengan keinginan Anda.

Demo

Penutup

Nah, bagaimana teman-teman, berhasil tidak? Jika berhasil, Anda bisa membagikan tutorial ini ke pengguna LinkMagz lainnya agar mereka juga tahu cara memasang syntax highlighter di template LinkMagz.

Baca Juga:

• Cara Memasang Fitur Double Click pada Blockquote Blog
• Cara Memasang Syntax Highlighter Keren dan Berwarna di Blog

Cukup sekian artikel tentang Cara Memasang Syntax Highlighter di Postingan Template LinkMagz ini, Terima kasih.