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}Catatan
- Jangan lupa untuk menghapus kode .post-body pre dan .post-body pre code agar tidak terjadi bentrok
- Seperti biasa, gunakan format penulisan berikut:
- Silahkan atur tampilan sesuai dengan keinginan Anda.
<pre><code>Masukkan skrip di sini...</code></pre>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.
Cukup sekian artikel tentang Cara Memasang Syntax Highlighter di Postingan Template LinkMagz ini, Terima kasih.