Bedah Website #13: Cara embed kode di blog - MZAINI30

Senin, 04 Mei 2020

Bedah Website #13: Cara embed kode di blog

Aku lupa apakah aku sudah pernah membahas ini atau belum. Tapi nggak papa sih, aku akan coba bahas lagi kalau sudah pernah dan ini akan lebih lengkap daripada yang sebelumnya (kalau sudah pernah kubahas) karena di sini aku juga akan bermain dengan Coffeescript.

Untuk mengikuti tutorial ini, tentunya kamu sudah harus terbiasa dengan utak-atik HTML di Blogspot ya, karena ntar aku ada bahas tentang itu. Nggak papa, mudah kok. Nggak sulit.

Pertama, buka dulu Edit HTML di Blogspot:




Nah, di edit HTML itu, kamu cari kode </head> lalu di atasnya, salin kode ini:

<link href='https://mzaini30.js.org/prism/prism.css' rel='stylesheet' type='text/css'/>

Kemudian, cari kode </body> lalu di atasnya, salin kode ini:

<script src='https://mzaini30.js.org/prism/prism.js'/>

Lalu, kita masuk pada menuliskan kode di dalam postingan.

Menuliskan kode di dalam postingan


Untuk menuliskan kode di dalam postingan, tentunya ya kita ketik di editornya Blogspot di bagian HTML (sampingnya Compose). Tapi, kita nggak bisa langsung mengetik < atau > karena nanti akan tercampur dengan kode HTML di blog kita. Maka, kita harus mengconvert < menjadi &lt; dan > menjadi &gt;. Lalu, kita juga harus membungkusnya dengan <pre><code></code></pre>.

Bagaimana cara cepatnya?

Untungnya, aku udah buat skripnya supaya bisa lebih cepat. Ini adalah langkah-langkahnya:

Buka website Coffeescript Online.

Di bagian data, masukkan kode yang mau kamu masukkan nanti di postingan blog. Di sini, aku masukkan:

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Lalu, di bagian Coffeescript (kolom nomor 2), masukkan:

bahasa = "html"

data = data.replace /</g, "&lt;"
.replace />/g, "&gt;"
console.log "<pre><code class='language-#{bahasa}'>#{data}</code></pre>"

Untuk variabel bahasa, disesuaikan ya. Di contoh ini, aku menggunakan "html". Nanti, kalau kamu mau masukkan kode "Javascript", maka tulis "javascript" di variabel bahasa.

Nah, lalu di sebelah kanan pojok (kolom nomor 4), muncul kode yang bisa kamu salin ke postingan Blogspot:


Gimana? Apakah masih ada yang kurang di postingan ini? Silahkan komen di bawah ya...

Share with your friends

2 komentar

  1. Wahhh lumayan nih, tapi untuk kodenya saya ada menggunakan class dan id tertentu yang sudah saya hias menggunakan CSS. Karena kalo cuma < pre >< code > aja tampilannya gak keluar.. Tapi membantu banget nih..

    Tapi ak penasaran untuk kode yang pas di klik langsung bisa copas semua kodenya itu kka, atau buat tombol copy yang bisa langsung copy kodenya tanpa harus select dulu itu pasti bagus banget..

    BalasHapus
    Balasan
    1. Untuk CSSnya, pakai Prism CSS dan Prism JS. Sudah kusebutin di tutorial.

      Hapus

Maskot Pelarang Adblock

Hallo Kak, Perkenalkan saya Zen. Untuk bisa mengakses situs kami, terlebih dahulu matikan atau non-aktifkan ekstensi AdBlock nya yaaa...

Ok , Saya Mengerti