Migrate from Google Code Prettify to Highlight.js in Drupal 7

  • Posted on: 8 February 2013
  • By: oon

Sebulan sudah merasakan membuat artikel-artikel penuh #kode dengan dipercantik (syntax highlighting) menggunakan Google Code Prettify.

Hari ini mencoba migrasi ke Highlight.js [1] sambil mempelajari sejumlah hal yang menjadi masalah penyajian kode.

Proses migrasi berlangsung relatif lancar, karena keduanya menggunakan mekanisme di sisi client (JavaScript), dengan tag yang sama yakni <code></code>. Proses integrasi Highlight.js ke Drupal 7 dengan bantuan module highlightjs [2]. Proses yang dilakukan:

  1. Instalasi module [2] (di situs ini menggunakan ftp)
  2. Download Highlight.js dari situs [1] dengan melakukan pemilihan syntax yang akan digunakan, kemudian upload ke sites/all/libraries/highlightjs
  3. Aktifkan module highlight js dan highlight js filter module
  4. Masuk ke bagian konfigurasi untuk mengubah text formats filter agar filter setting Full HTML (atau yg lain) bisa menggunakan highlightjs

Ada beberapa masalah yang terpecahkan tapi ada pula yang masih perlu eksplorasi lebih lanjut, antara lain:

  • penggunaan <code lang="..."> masih belum berhasil, karena akan dianggap teks biasa, justru tanpa attribut lang (dideteksi secara otomatis) bisa berjalan dengan baik
  • lakukan pengubahan urutan pada konfigurasi filter (filter processing order), pastikan proses syntax highlight dilakukan lebih dahulu dibanding proses convert URL menjadi links. Dalam hal situs ini, posisi filter highlightjs dibawah convert urls into links.
  • jika hanya menggunakan tag <code></code> masih berantakan hasil keluarannya, coba tambahkan tag <pre> sehingga tampak kodenya seperti ini <pre><code>...</code></pre>

[1] http://softwaremaniacs.org/soft/highlight/en/
[2] http://drupal.org/project/highlightjs

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.