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.