Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Cara Membuat Syntax Highlighter Berwarna Dengan Tombol Copy Code di Blog

Ruang Berbagi dan Informasi

 

Halo Sobat Warkasa1919.com gimana kabarnya? Semoga sehat dan baik - baik saja semuanya ya. Awal tahun 2023 ini aku ingin berbagi tutorial tentang  caramembuat syntax highlighter berwarna dengan tombol copy code di blog, mana tau ada diantara Sobat pembaca blog gado - gado ini yang sedang membutuhkan tutorial seperti ini untuk mempercantik tampilan blog-nya. Tutorial ini juga aku dapatkan dari salah satu blogger yang konsisten menerbitkan artikel-artikel khusus tentang widget.

Beberapa hari ini aku memang asyik menjelajahi blog wendy code dan beberapa tutorial yang diterbitkan memang sebagian besar berhasil kupraktekan, salah satunya adalah yang membahas tentang syntax highlighter ini. Syntax highlighter sendiri adalah fitur teks editor yang bisa digunakan untuk menyortir berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan lain sebagainya. 

Pada umumnya syntax highlighter di temukan pada blog yang ber-niche tutorial yang memang selalu menyisipkan kode - kode di dalam postingannya. Namun begitu, sebelum kita menerapkan beberapa kode yang akan aku tampilkan di postingan kali ini, aku akan coba memberikan gambaran tentang kelebihan dan kekurangannya jika kita memasang syantax highlighter pada blog kita.

Sobat warkasa1919.com berikut ini adalah kelebihan dan kekurangan memasang syantax highlighter pada blog.

Kelebihan Memasang Syantax Highlighter

  • Salah satu kelebihan yang kita dapatkan ketika di blog kita terpasang syantax highlighter adalah dapat memudahkan pengguna dalam menyortir kode yang ditulis.

  • Selanjutnya dengan memasang syantax highlighter maka postingan yang ada di blog terlihat lebih rapi dan profesional.

  • Selain itu salah satu kelebihan yang didapat adalah dapat mempermudah visitor untuk melihat dan menyalin kode yang telah dibagikan oleh penulisnya, khususnya pada blog - blog yang memasang kode script anti copas di blog nya.

 

Kekurangan Memasang Syantax Highlighter

Jika tadi sudah dijelaskan beberapa kelebihan yang di dapat ketika memasang syantax highlighter di blog, maka sekarang aku juga akan menyampaikan beberapa kekurangannya dari menggunakan syntax highlighter ini. kekurangan yang paling terasa adalah pada saat loading, Biasanya blog yang memasang syntax highlighter ini cendering sedikit lelet karena blog terbebani akibat menggunakan javascript internal dan external.

Itulah kelebihan dan kekurangan yang bisa Sobat jadikan sebagai bahan pertimbangan jika  memasangkan syantax highlighter pada blog. Jadi silahkan pertimbangkan sesuai kebutuhan, dan apabila blog blog milik Sobat memang berniche tutorial dan sering membagikan kode, maka syntax highlighter ini tentu sangat cocok untuk blog Sobat tadi. Namun jika blog milik Sobat adalah jenis blog yang jarang membagikan kode maka sebaiknya tidak usah memasangnya, sebab hanya akan memberatkan blog saja.

Bagi Sobat sekalian yang ingin syntax highlighter berwarna dengan tombol copy code di blog, silahkan di simak cara dan langkah-langkah berikut ini.

Cara Membuat Syntax Highlighter Berwarna Dengan Tombol Copy Code Di Blog

Untuk memasang syntax highlighter berwarna dengan tombol copy code di blog, silakan masuk ke menu blogger, lalu pilih tema dan edit html, selanjutnya silahkan salin CSS  di bawah ini dan letakkan di atas kode

Setelah berhasil memasang kode di atas, selanjut silakan Sobat salin javascript di bawah ini dan letakkan di atas kode  </body> dan jika Sobat tidak menemukannya, kemungkinan telah di parse sehingga akan tampak seperti &lt;!--</body>--&gt;&lt;/body&gt;

</body>

Silahkan salin kode dibawah ini :



Setelah berhasil memasang dua kode tadi sampai di sini jika sudah selesai jangan lupa untuk klik simpan, dan berikut ini adalah cara penggunaannya, selengkapnya kode bawah ini.

<pre class='html'><code>untuk kode jenis html</code></pre>
<pre class='css'><code>untuk kode jenis css</code></pre>

Sobat juga bisa menggunakan seperti di bawah ini tanpa harus menulis nama kode, karena akan otomatis terdeteksi nama kodenya.

<pre class='js'><code>untuk kode jenis javascript</code></pre>

Jika ingin menandai sebuah kode Sobat bisa menggunakan <mark>kode yang akan di tandai di sini</mark> untuk demonya akan tampak seperti di bawah ini.

<pre class='js'><code>untuk kode jenis javascript</code></pre>

 

Itulah cara membuat syntax highlighter berwarna dengan tombol copy code di blog, semoga bermanfaat ya. Oh iya, ada satu hal yangperlu di ingat, kode yang akan di sisipkan ke dalam postingan harus di parse terlebih dulu, dan untuk itu Sobat bisa menggunakan tools parse yang ada di sini. Salam.

Ubah Ikuti Blog

Traktir creator minum kopi dengan cara memberi sedikit donasi. Silahkan Pilih Metode Pembayaran

Baca Konten Premium dengan Metode Pembayaran, silahkan BERLANGGANAN untuk lanjut membaca artikel-artikel pilihan.

 © 2024 - Warkasa1919. All rights reserved

10 komentar untuk "Cara Membuat Syntax Highlighter Berwarna Dengan Tombol Copy Code di Blog "

  1. Wah kerren perlu konsentrasi tingkat tinggi ☺️ kerrren aku tinggal menikmati ulasannya 👍👍 sehat-sehat selalu 🙏

    BalasHapus
    Balasan
    1. Terima kasih atas kunjungannya mbak Din. Semoga sehat selalu dimanapun berada ya🙂🤝

      Hapus
  2. Balasan
    1. Terima kasih atas kunjungannya bu Nur.. Salam..🤝

      Hapus
  3. Sudah tambah kritingku bacanya Mas Warkasa 🤩😃🤣

    BalasHapus
  4. Jlimet juga ya bacanya, banyak gak paham dunia pengkodean
    All out keren sihh

    BalasHapus