Prism com a syntax highlighter de markdownit a Nuxt

En primer lloc afegim Prism al projecte:

yard add prismjs
# o bé
npm install prismjs --save

Després definim la funció de highlight a la configuració de markdownit del fitxer nuxt.config.js del projecte:

markdownit: {
  injected: true,
  html: true,
  linkify: true,
  breaks: true,
  highlight: (code, lang) => {
    const Prism = require('prismjs')
    require('prismjs/components/prism-bash')
    return (
      `<pre class="language-${lang}"><code class="language-${lang}">` +
      Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup) +
      '</code></pre>'
    )
  }
},

A banda del Prism també importem els llenguatges addicionals a resaltar, en aquest cas bash.

Si obviem els tags <pre> i <code>, s'afegeixen automàticament, però segons com al navegar endavant i endarrere es perden les classes del <pre> necessàries pel Prism.

El darrer pas és afegir el css del theme que més ens agradi al nuxt.config.js:

css: [
  // Prism css
  'prismjs/themes/prism-okaidia.css',
  // SCSS main project file
  '@/assets/css/main.scss'
],