saberland/saber

Implement code highlighting using webpack loader

Opened this issue · 0 comments

1. Transform template

We can transform code blocks in markdown to template like this:

<saber-highlight
  lang="$language"
  highlightLines="[1,2]"
  encodedCode="$encodedCode">
</saber-highlight>

Then use PostHTML to transform it to:

<saber-highlight
  :content="require('!saber-highlight-loader!noop-module?code=$encodedCode&lang=$language&highlightLines=[1,2]')">
</saber-highlight>

You can also use <saber-highlight> directly to highlight external file:

<saber-highlight src="./sample.js"></saber-highlight>

Which will be transformed to:

<saber-highlight
  :content="require('!saber-highlight-loader!./sample.js')"
></saber-highlight>

2. Implement code highlighting in saber-highlight-loader.

..

3. Add a new component

Vue.component('SaberHighlight', {
  functional: true,
  props: ['content']
  render: h => h('div', { class: 'saber-highlight' }, content)
})