Gaya Penulisan Tag Kode dan Blok Kode

Sebagai tindak menambah kebergunakan sebuah posting blog, penerapan semantik markup merupakan salah satu langkah logis agar struktur dokumen menjadi lebih baik. Bukan hanya penyandang disabilitas — saya kira — siapapun pun yang menggunakan pembaca layar pasti lebih mudah membedakan antara paragraf, daftar urut (styling unordered & ordered lists), kutipan & preformatted text, kode, heading dan sebagainya.

Apabila kita menulis beberapa posting mengenai trik, turitoal, dan/atau pengkodean dalam suatu blog, maka kemunkinan besar akan terkait dengan tag code serta pre. Secara sederhana, Tag code biasanya berguna untuk menandai bahwa teks itu merupakan kode & tag pre untuk menandai bahwa teks berupa format bebas yang ditampilkan persis seperti pada ketikan asli dalam sebuah dokumen HTML. Pada posting ini, kita akan membuat gaya pengkodean untuk code dan kumpulan (block) code yang kemudian dimasukkan dalam tag pre.

Berikut merupakan CSS dari penggunaan tag kode pada paragraf di atas.

pre, code, kbd, samp, tt {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
}
p code, ol code, ul code {
  background: #eee;
  margin: -.1em;
  padding: .1em;
}

Sedangkan penulisan dokumen HTML untuk blok kode akan ditunjukkan seperti di bawah ini.

<pre><code>pre, code, kbd, samp, tt {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
}</code></pre>

Nah, sekarang kita akan memberikan gaya penulisan blok kode (code block) yang sedikit berbeda, tetapi mungkin para blogger pernah melihatnya pada situs web atau blog lain.

pre {
  background: #606060;
  background-image: -webkit-linear-gradient(#606060 50%,#555 50%);
  background-image:    -moz-linear-gradient(#606060 50%,#555 50%);
  background-image:     -ms-linear-gradient(#606060 50%,#555 50%);
  background-image:      -o-linear-gradient(#606060 50%,#555 50%);
  background-image:         linear-gradient(#606060 50%,#555 50%);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 4em 4em; /* 2× line-height */
  color: #fff;
  line-height: 2em;
  margin-bottom: 2em;
  overflow: auto;
  padding: 2em; /* = line-height (top & bottom) */
  white-space: pre;
}

pre[data-lang="html"]:before,
pre[data-lang="css"]:before {
  display: block;
  color: #fc3;
  /* vertical rythim (size 1.067em & line-height 1.5em) */
  font: 1.0667em/1.5em sans-serif;
  font-weight: bold;
  margin-bottom: 1.5em; /* = line-height elemen */
  text-transform: uppercase;
}

pre[data-lang="html"]:before {
  content: "html";
}

pre[data-lang="css"]:before {
  content: "css";
}
<pre class="html" data-lang="html"><code>…masukkan blok kode HTML dalam markup ini…</code></pre>

<pre class="css" data-lang="css"><code>…masukkan blok kode CSS  dalam markup ini…</code></pre>

Apabila kita ingin agar blok kode tidak melebihi bidang elemen pre — menghilangkan fungsi scrolling — ganti white-space: pre; dengan white-space: pre-wrap;. Selain itu, kita dapat pula menambah, mengurangi, dan memodifikasi gaya penulisan blok kode di atas sesuai dengan keinginan masing-masing. Kesulitan mungkin terjadi pada konfigurasi pseudo-element :before, terutama pada ukuran font (teks) yang berbeda. Intinya kita perlu menyesuaikan ritme vertikal (vertical rythim) agar blok kode (pre) tetap pada jalurnya.

9 komentar untuk “Gaya Penulisan Tag Kode dan Blok Kode”

  1. Bookmarked mas Aris!!hehe..
    maksudnya seperti membuat text area dengan CSS ya? agaK sedikit lemot nih, maklum baru kelas 3 smp,hehe..


    BalasHapus
    Balasan
    1. Markah di atas berguna untuk melakukan posting bagi sekumpulan kode. Mungkin kita biasa melakukan posting kode tanpa markup, encode kemudian langsung dimasukkan pada editor posting.
      Nah, posting ini dilakukan dengan metode “HTML” dengan memberikan markup tertentu — yakni pre — sehingga blok (kumpulan) kode yang kita masukkan dalam posting ditampilkan seperti pada contoh di atas.

      Hapus
  2. wahh agak "crecet-crecet" dikit nihh tentang blok kode. :D hhaa

    BalasHapus
  3. Boleh juga ne infonya, makasih ya sobb ??

    BalasHapus
  4. baru bisa baca. belum sanggup komentar

    BalasHapus
  5. ma kasih infonya mas..coba saya ijin simpan dulu halamannya.

    BalasHapus
  6. saya coba gan, kebetulan menemukan blog ini, thanks infonya

    BalasHapus
  7. saya coba dulu dah mas... moga2 bisa...

    BalasHapus