highlight.js di mdsvex

Ceritanya, aku akhirnya beralih menggunakan mdsvex. Yang membuat menarik adalah, aku hanya perlu membuat file __layout.svelte dan sebuah file .md maka halaman web sudah jadi dengan indah. Mungkin aku bahas di catatan lain.

Aku ini sudah sreg sekali dengan highlight.js, tak ada lawan lah. Sayangnya mdsvex menggunakan prismjs. Sialnya, situs resminya ada 2, isinya berbeda, https://mdsvex.com/docs#highlight dan https://mdsvex.pngwn.io/docs#highlight

Dan tidak bekerja seperti yang diharapkan. Setelah menemukan masalahnya, aku menuliskannya disini.

Menggunakan mdsvex di SvelteKit#

Jadi, kamu perlu memasang dan mengonfigurasi mdsvex di svelte-mu seperti yang kira-kira ada di dokumentasinya di sini https://mdsvex.com/docs#install-it

Di SvelteKit, aku menuliskannya seperti berikut

import { mdsvex } from 'mdsvex'
import mdsvexConfig from './mdsvex.config.js'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: ['.svelte', ...mdsvexConfig.extensions],
  preprocess: [
    mdsvex(mdsvexConfig),
    // kalau pake preprocessor lain, tambahkan saja
  ],
  kit: {
    // konfigurasi sveltekit-mu
    // ...
  },
}

export default config

Konfigurasi highlighter untuk mdsvex#

Seperti yang sudah ditulis pada svelte.config.js, kita menyimpan konfigurasi mdsvex di file tersendiri.

import hljs from 'highlight.js'
import hljsvelte from 'highlightjs-svelte'

const escape_svelty = str =>
  str
    .replace(/[{}`]/g, c => ({ '{': '{', '}': '}', '`': '`' }[c]))
    .replace(/\\([trn])/g, '\$1')

export default {
  extensions: ['.md'],
  remarkPlugins: [
    // jika kamu menggunakan remark plugin
  ],
  rehypePlugins: [
    // jika kamu menggunakan rehype plugin
  ],

  highlight: {
    highlighter: (code, lang) => {
      hljsvelte(hljs)
      hljs.registerAliases('sveltehtml', { languageName: 'svelte' })
      lang = lang && hljs.getLanguage(lang) ? lang : 'plaintext'
      return `<pre><code class="hljs-${lang}">${escape_svelty(
        hljs.highlight(code, { language: lang }).value
      )}</code></pre>`
    },
  },
}

Yang perlu diperhatikan disini adalah, kamu perlu melakukan sanitize untuk membuatnya bekerja. Terutama karena svelte akan mengeksekusi apapun di dalam kurung kurawal sebagai kode javascript, dan karakter spesial lain seperti backtick dan backslash.

Jadi aku membuat fungsi sederhana untuk masalah ini, dan itu berhasil menyelesaikannya. Sip…

Beri tanggapan