Seleksi Otomatis pada Tag Pre dengan CSS

Membuat Seleksi Otomatis pada Tag Pre dengan CSS - Bagi sobat pengunjung Blog KI tentunya sudah sangat familiar dengan istilah tag pre. Tag pre adalah barisan kode yang biasanya ditulis tanpa format teks.

Kalau pada tutorial yang lalu (baca: Cara Membuat Seleksi Otomatis pada Blockquote dan Pre) dengan menggunakan JavaScript, kali ini saya akan membagikan cara membuat seleksi otomatis (auto highlight) hanya dengan menggunakan CSS.

Hal ini bermula ketika saya merubah template blog ini menjadi AMP HTML (postingan masih belum banyak yang valid... masih tahap editing 😃). Yang dalam aturannya tidak boleh menambahkan script lain, selain dari CDN AmpProject.

Simpan CSS ini pada template sobat, terserah dengan nama class apa. Sebagai contoh saya buat dengan class highlight.

.highlight {  
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Untuk menulis kode pre pada html, tambahkan class='highlight'. Contoh:

<pre class='highlight'><code>$(document).ready(function() {
    $('.hilang').click(function() {
        $('#target').hide('fast');
    });
    $('.muncul').click(function() {
        $('#target').show('slow');
    });
});
</code></pre>

Semoga bermanfaat...

Happy Blogging...