Cara Memasang Syntax Highlighter di Postingan Template LinkMagz

Cara Memasang Syntax Highlighter di Postingan Template LinkMagz

Ferisp.com - Pada umumnya, kebanyakan blogger menggunakan syntax highlighter untuk menampilkan kode atau script ke dalam format teks atau tulisan. Selain dapat menyesuaikan script 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 script yang tidak cocok digunakan di template ini.

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

Cara Memasang Syntax Highlighter di Postingan Template LinkMagz

Nah, untuk mengatasi masalah tersebut, saya akan membagikan script 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 ikon tanda panah
  • Pilih EDIT HTML
  • Tempel di atas kode </style>:
  • /* Syntax Highlighter by Ferisp */
    .post-body pre {
      background-color: #0c1c2e; /* warna background */
      border-left: 5px solid #279fd3; /* variasi border kiri */
      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; /* warna huruf */
      font-size: 12px; /* ukuran huruf */
      max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:&#39;source code pro&#39;,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. Selain template LinkMagz, hapus semua kode .post-body pre dan .post-body pre code yang ada di struktur HTML template
  2. Seperti biasa, gunakan format berikut ini untuk memasukkan script ke dalam tulisan:
  3. <pre><code>Masukkan script di sini...</code></pre>
  4. Silahkan atur tampilan sesuai dengan keinginan Anda.

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.

Jika ada pertanyaan lebih lanjut terkait pembahasan kali ini, jangan lupa untuk menghubungi saya di kolom komentar atau form kontak.