Logo for Johan Baaij Software Development

Johan Baaij

is developing software for the web with Ruby on Rails, Vue.js and other open-source technologies.

#100DaysOfCode day 6

Sun Apr 12 2020

Progress

  • Directive for syntax highlighting markdown content
import Vue from 'vue'
import hljs from 'highlight.js/lib/highlight'
import javascript from 'highlight.js/lib/languages/javascript'
import xml from 'highlight.js/lib/languages/xml'
import hljsDefineVue from 'highlightjs-vue'

hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('xml', xml)

// Takes a while to execute
const defineVue = () => new Promise((resolve) => resolve(hljsDefineVue(hljs)))

Vue.directive('highlightjs', {
  async inserted(el) {
    await defineVue()
    el.querySelectorAll('pre code').forEach((codeBlock) => {
      hljs.highlightBlock(codeBlock)
    })
  }
})