Implement code highlighting using webpack loader
Opened this issue · 0 comments
egoist commented
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)
})