Cara Membuat Syntax Highlighter(Kotak Kode) Keren di Blogger Terbaru 2022

{tocify} $title={Daftar Isi}

Apa itu Syntax Highlighter?

Kode editor, yang menyoroti komponen individual dari kode sumber sesuai dengan sintaksnya dalam warna, dengan font yang diubah atau melalui perubahan grafis.  Karena penyorotan warna saat ini terintegrasi di semua editor umum dan lingkungan pengembangan, penyorotan sintaks juga disebut pewarnaan kode.  Menyoroti tidak memengaruhi fungsionalitas kode, tetapi membuat hidup lebih mudah bagi pengembang.

 Jenis elemen berikut disorot:

•  Kata kunci seperti “jika” atau “untuk”,

•  Operator seperti “=" atau ">”,

•  Komentar,

•  String dan angka eksplisit,

•  Pengidentifikasi, yaitu nama fungsi dan variabel (lihat juga penyorotan semantik).

 Syntax Highlighter adalah alat berbasis web untuk membuat Syntax Highlighter dalam lebih dari 50 bahasa (HTML, C, C++, Java, JavaScript hingga Fortran, dan TeX).  Ini sangat berguna bagi orang yang menulis tentang pemrograman dan berbagi kode sampel baik sebagai cuplikan penyorot sintaks atau keseluruhan program.

Syntax Highlighter

 Bagaimana Sintaks Highlighter Bekerja di blogger?

 Ide dibalik Syntax Highlighter sangatlah mudah.  Penyorot sintaks ini akan mengambil kode sumber posting blog Anda (baik dalam format HTML atau Penurunan harga) dan memasukkannya sepotong demi sepotong ke dalam kompiler.  Output dari kompiler akan digunakan seolah-olah itu adalah teks posting Anda.  Plugin mengidentifikasi kata kunci dalam kode sumber dan menggantinya dengan tag HTML, diwarnai atau ditata oleh CSS untuk membuat blok kode yang disorot dengan tampilan bagus.

 Bagaimana Cara Menambahkan Syntax Highlighter di blogger dengan tombol copy?

 Anda harus mengikuti petunjuk Langkah-demi-Langkah untuk menambahkan penyorot sintaks di blogger.

 Sebelum Anda mulai, harap hapus kode CSS default .pre dan .code.  Jika Anda tidak menghapusnya, maka Anda tidak dapat menjalankan kode ini.

 Langkah 1: Pertama-tama, Kunjungi dasbor Blogger.com

 Langkah 2: Sekarang, buka Bagian Tema.

 Langkah 3: Di Bagian Tema Sesuaikan, buka Edit HTML.

 Langkah 4: Cari kode ]]></b:skin>  atau </Style> dengan CTRL + F & Tempel ini Sebelum tag ]]></b:skin> atau </style>

 .hljs {
            display: block;
            overflow-x: auto;
            padding: 0.5em;
            background: #1E1E1E;
            color: #DCDCDC;
            font-weight: normal;
            font-size: 1.15em !important;
        }

        .hljs-keyword,
        .hljs-literal,
        .hljs-symbol,
        .hljs-name {
            color: #569CD6;
        }

        .hljs-link {
            color: #569CD6;
            text-decoration: underline;
        }

        .hljs-built_in,
        .hljs-type {
            color: #4EC9B0;
        }

        .hljs-number,
        .hljs-class {
            color: #B8D7A3;
        }

        .hljs-string,
        .hljs-meta-string {
            color: #D69D85;
        }

        .hljs-regexp,
        .hljs-template-tag {
            color: #9A5334;
        }

        .hljs-subst,
        .hljs-function,
        .hljs-title,
        .hljs-params,
        .hljs-formula {
            color: #DCDCDC;
        }

        .hljs-comment,
        .hljs-quote {
            color: #57A64A;
            font-style: italic;
        }

        .hljs-doctag {
            color: #608B4E;
        }

        .hljs-meta,
        .hljs-meta-keyword,
        .hljs-tag {
            color: #9B9B9B;
        }

        .hljs-variable,
        .hljs-template-variable {
            color: #BD63C5;
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-builtin-name {
            color: #9CDCFE;
        }

        .hljs-section {
            color: gold;
        }

        .hljs-emphasis {
            font-style: italic;
        }

        .hljs-strong {
            font-weight: bold;
        }

        .hljs-bullet,
        .hljs-selector-tag,
        .hljs-selector-id,
        .hljs-selector-class,
        .hljs-selector-attr,
        .hljs-selector-pseudo {
            color: #D7BA7D;
        }

        .hljs-addition {
            background-color: #144212;
            display: inline-block;
            width: 100%;
        }

        .hljs-deletion {
            background-color: #600;
            display: inline-block;
            width: 100%;
        } 

Langkah 5: Sekarang cari Kode </body> melalui CTRL + F.

 Langkah 6:Copy dan Paste Kode Javascript ini di atas tag </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js">
    <script>hljs.initHighlightingOnLoad();</script>
           <script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js">
<script>
  //<![CDATA[
setTimeout(function(){for(var e=document.querySelectorAll("pre>code"),o=0;o<e.length;o++)hljs.highlightBlock(e[o]);window.highlightJsBadge({contentSelector:".container",loadDelay:0,copyIconClass:"fa fa-copy",checkIconClass:"fa fa-check text-success",onBeforeTextCopied:function(e,o){return e}})},10);
//]]>
</script> 

Langkah7:Sekarang, Buat postingan baru, dan pilih mode HTML dan Letaknya kode pemanggil bawah ini, di tempat yang anda inginkan

 
<div class="container" style="margin-top: 20px;"><pre><code class="hljs" id="code"> <!--- Enter your Code--> </code></pre></div>

 Langkah8: Masukan kode yang ingin di tampilkan tepat di bawah <!-- Enter your Code -->

PENTING:

Pastikan kode yang ingin di tampilkan sudah di Parse (kecuali CSS) Jika Tidak di Parse Kode akan Di eksekusi sedangkan tujuan Kita Menampilkan kode secara utuh

Jika kode Tidak di parse 👆👆👆👆

Maka kode akan di eksekusi sesuai fungsinya dan tidak Tampil 👆👆👆👆

Jika Kode sudah di Parse 👆👆👆👆

Maka Kode Akan tampil di dalam syntax N

hightlighter 👆👆👆👆

Untuk Memparse : Buka Alat Parse 

 Selamat✨🎉🎊🥳🥳 Anda telah berhasil menyelesaikan cara menambahkan sintaks highlighter di blogger.

 Manfaat Menggunakan Syntax Highlighter di blogger

 Menjadi lebih mudah untuk membaca kode dan mengenali strukturnya.  Penyorotan warna tidak penting untuk mesin, tetapi untuk pengembang.  Akibatnya, peninjauan kode, misalnya, (secara selektif) lebih mudah.

 Implementasi kode lebih mudah, karena penyorotan dilakukan secara real time dan kesalahan pengetikan dapat dideteksi lebih cepat.  Kata kunci yang salah juga dapat diidentifikasi lebih cepat karena tidak berwarna.  

 Penyorot Sintaks membuat tampilan yang jelas dari kode Anda dan membuat perubahan pemantauan selama sesi debug lebih mudah daripada penyorot sintaks lainnya.

 Ini memberikan tampilan yang lebih profesional dan mudah dipahami di template blogger Anda.

 Dibutuhkan lebih sedikit waktu untuk membaca kode dengan mudah.

 Penutup

 Ini adalah metode termudah dan terbaik untuk menambahkan penyorotan sintaks ke jika kalian masih bingung silakan komentar di bawah.

Baca Juga