Membuat Highlighter pada Kode/Syntax di Blogspot

Pernah tidak melihat tampilan kode HTML, CSS, hingga JS ditampilkan dalam box seperti yang sering ditampilkan dalam Chat GPT. Menarik bukan? hal tersebut dapat kamu lakukan di blog (berbasis blogspot) kamu loh. Ingin mencobanya?

Berikut adalah contoh kode HTML dan CSS untuk membuat highlighter untuk kode HTML/JS di blog kamu:

Menambahkan Highlighter pada Gadget HTML/JavaScript

1. Masuk ke akun Blogger kamu dan pilih blog yang ingin kamu tambahkan highlighter untuk kode.

2. Pergi ke "Tata Letak" (Layout) dan klik "Tambah Gadget".

3. Pilih "HTML/JavaScript" dan beri judul seperti "Code Highlighter" atau sesuai keinginan kamu.

4. Salin dan tempel kode berikut ke dalam kotak isi:

<pre><code class="html-js">KODE_KAMU_DI_SINI</code></pre>

Pastikan untuk mengganti "KODE_KAMU_DI_SINI" dengan kode HTML/JS/lainyya yang ingin kamu highlight.

Note : Untuk kode HTML/XML pastikan mengganti anda kurung sudut yang sebenarnya dengan kode entitas HTML "<" untuk "<" dan ">" for ">"

Menambahkan Highlighter dalam Post

1. Masuk ke akun Blogger kamu

2. Buat portingan baru atau buka postingan lama (edit)

3. Buka Tampilan HTML

4. Salin dan tempel kode berikut ke dalam kotak isi:

<pre><code class="html-js">KODE_KAMU_DI_SINI</code></pre>

Pastikan untuk mengganti "KODE_KAMU_DI_SINI" dengan kode HTML/JS/lainyya yang ingin kamu highlight.

Note : Untuk kode HTML/XML pastikan mengganti anda kurung sudut yang sebenarnya dengan kode entitas HTML "<" untuk "<" dan ">" for ">"

Menambah Style Highlighter dalam Template/Tema

1. Pergi ke "Tema" (Theme) di Blogger kamu.

2. Klik "Edit HTML" untuk mengedit template HTML.

3. Cari bagian <head> pada kode template.

4. Setelah menemukan tag <head>, salin dan tempelkan kode CSS berikut di bawahnya:

<style>  pre {
ground-color: #f7f7f7;
    pad
    bac
kding: 10px;
    border-radius: 4px;
 1.4;
    overflow-x    font-size: 14px;
    line-height
:: auto;
family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  }

  .
    font
-html-js {
    color: #333333;
  }

  .html-js .tag {
    color: #e2777a;
  }

olor: #6a8759;
  }

  .  .html-js .attr-name {
    color: #9b859d;
  }

  .html-js .attr-value {
    
chtml-js .string {
    color: #c69026;
  }

  .html-js .comment {
    color: #999999;
    font-style: italic;
  }
</style>

Langkah 3: Melihat Hasil

Simpan perubahan pada template HTML dan buka blog kamu untuk melihat kode HTML/JS yang telah dihighlight dengan gaya yang telah ditentukan.

Pastikan untuk menempatkan kode yang ingin kamu highlight di dalam tag <pre><code class="html-js">...</code></pre>. Kamu juga dapat menyesuaikan gaya highlighter dengan mengubah kode CSS sesuai keinginan kamu.

Harap dicatat bahwa ini adalah contoh sederhana untuk membuat highlighter untuk kode HTML/JS di Blogger. Jika kamu memerlukan fitur atau tampilan yang lebih canggih, kamu mungkin perlu menggunakan pustaka atau ekstensi yang didedikasikan untuk tujuan tersebut.

Tambahan:

Berikut adalah contoh kode CSS untuk membuat gaya highlighter yang menyerupai yang ada di Chat GPT:

<style>  pre {
ground-color: #f4f4f4;
    pad
    bac
kding: 10px;
    border-radius: 4px;
 1.4;
    overflow-x    font-size: 14px;
    line-height
:: auto;
family: 'Courier New', Courier, monospace;
  }

  .
    font
-highlight {
    background-color: #f8f8f8;
}

  .keyword {
    col    border-radius: 2px;
    padding: 2px;
 
 or: #c792ea;
    font-weight: bold;
  }

  .string {
f;
  }

  .comment     color: #ecc48d;
  }

  .number {
    color: #89dd
f{
    color: #999999;
    font-style: italic;
  }

  .function {
    color: #89ddff;
  }

  .operator {
    color: #89ddff;
  }

</style>

Kamu dapat menerapkan gaya highlighter ini pada elemen <pre> di dalam kode template kamu seperti pada contoh sebelumnya. Pastikan kode kamu berada di dalam elemen <code class="html-js">...</code>.