Membuat Auto Highlight Pada Tag Pre

Mungkin Anda sudah tidak asing lagi dengan istilah tag 'pre'. Tag PRE biasanya digunakan untuk menampilkan kode pada postingan. Kalau anda melihat kode-kode di blog mnchealthdonesia, yang warna-warni itu menggunakan tag pre.

Yang dimaksud auto highlight di sini adalah, sobat tidak usah menseleksi semua kode ketika akan mengcopy kode yang diperlukan, cukup mengkilk dua kali (double klik) pada area tag pre, maka secara otomatis semoa kode akan ter-select.

---

JavaScript

• Simpan kode ini sebelum </body>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

• Simpan template.

Tweet