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


Silahkan berlangganan untuk membaca Konten Premium, Kami mengemas berita dengan gaya bercerita

Konten Premium adalah salah satu jenis artikel pilihan yang tersedia di warkasa1919.com. Semua artikel yang dikunci dapat di akses cukup dengan menggunakan nomor ID langganan.

Artikel biasa adalah konten yang bisa diakses oleh semua pengunjung warkasa1919.com. Konten Premium adalah konten yang dapat diakses dengan sistem berlangganan pada situs dalam jaringan (online). Konten Premium disajikan dengan artikel yang lebih mendalam.

Cukup   daftar di sini lalu dapatkan kode unik setelah melakukan pembayaran.

  • Dengan berlangganan Konten Premium, Anda mendapatkan semua berita dan informasi yang tidak disajikan pada konten biasa.
  • Dengan berlangganan Konten Premium, berarti Anda turut membantu keberlangsungan blog ini.  juga mendukung keberlangsungan informasi yang akan menjadi sumber kepercayaan diri ketika membuat keputusan.
  • Untuk benefit-benefit sebesar itu, harga berlangganan Konten Premium tergolong murah dan sangat bermanfaat.

 Untuk transaksi berlangganan Konten Premium dapat memilih Metode Pembayaran

Cukup masukan kode unik, Konten Premium bisa diakses melalui berbagai perangkat digital, seperti telepon pintar (smartphone), komputer genggam tablet, laptop, atau komputer meja (desktop).

Ketentuan Umum

  1. Dengan memakai produk artikel berbayar ini berarti Anda setuju untuk terikat dan patuh pada syarat dan ketentuan yang berlaku.
  2. Syarat dan ketentuan ini dapat berubah sewaktu-waktu dan Kami tidak berkewajiban untuk memberitahukannya kepada Anda.
  3. Syarat dan ketentuan ini dibuat untuk kepentingan bersama, untuk menjaga hak dan kewajiban masing-masing pihak, dan tidak dimaksudkan untuk merugikan salah satu pihak.

Dukungan

  1. Pelayanan support hanya melalui WhatsApp 
  2. Support hanya berlaku dengan syarat dan ketentuan 
  3. Tidak ada jaminan support gratis akan selalui diberikan. Namun begitu, Anda tidak perlu khawatir. Selama Kami masih online, setiap chatt yang masuk akan selalu diusahakan untuk dibalas.

Pemesanan dan Pembatalan

  1. Semua yang sudah dipesan/beli tidak bisa dikembalikan untuk alasan apapun.

Pembayaran

  1. Mata uang yang dipakai untuk pembayaran adalah Rupiah (IDR).
  2. Pembayaran bisa melalui ATM, internet banking, mobile banking, setoran tunai, maupun transfer antarbank ke rekening bank yang telah kami informasikan kepada Anda.
  3. Pembayaran dianggap lunas jika uang telah kami terima sesuai dengan jumlah yang harus dibayarkan. Segera lakukan konfirmasi kepada kami melalui fitur Konfirmasi Pembayaran yang tersedia di Warkasa1919.com atau melalui telepon/WA/email.
  4. Bank : BNI No Rek : 0223432494 A/N : Warkasa. 
  5. Kirim bukti transfer pembayaran  dan informasi pemesanan ke WhatsApp

Artikel Konten Premium dapat di share link-nya, tetapi bagi yang belum berlangganan hanya bisa membaca sebagian kontennya.

Pilih Layanan Kami

Nikmati akses tanpa batas dan mari bergabung bersama Warkasa1919.com

  • Artikel Premium
  • Jasa
  • Buku

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

Rumah Fiksi 1919 9 Januari 2023 pukul 19.30 Hapus Komentar
Wah kerren perlu konsentrasi tingkat tinggi ☺️ kerrren aku tinggal menikmati ulasannya 👍👍 sehat-sehat selalu 🙏
Warkasa1919 9 Januari 2023 pukul 19.44 Hapus Komentar
Terima kasih atas kunjungannya mbak Din. Semoga sehat selalu dimanapun berada ya🙂🤝
celotehnur54 10 Januari 2023 pukul 07.50 Hapus Komentar
Numpang nyimak, Mas Wsrkasa.
Warkasa1919 10 Januari 2023 pukul 09.56 Hapus Komentar
Terima kasih atas kunjungannya bu Nur.. Salam..🤝
Meduster 14 Januari 2023 pukul 18.39 Hapus Komentar
Sudah tambah kritingku bacanya Mas Warkasa 🤩😃🤣
Warkasa1919 15 Januari 2023 pukul 08.50 Hapus Komentar
Iya😅
Nitamarelda.com 15 Januari 2023 pukul 09.34 Hapus Komentar
Jlimet juga ya bacanya, banyak gak paham dunia pengkodean
All out keren sihh
Warkasa1919 15 Januari 2023 pukul 10.26 Hapus Komentar
Iya, lumayan rumit sih😅
Tanza Erlambang - Sawan Fibriosis 15 Januari 2023 pukul 14.04 Hapus Komentar
bermanfaat.....
thank you for sharing....
Warkasa1919 15 Januari 2023 pukul 19.35 Hapus Komentar
Terima kasih atas kunjungannya Mas . Salam..