Skip to content
This repository was archived by the owner on Mar 7, 2025. It is now read-only.

Implement code highlighting using webpack loader #518

Open
egoist opened this issue Oct 9, 2019 · 0 comments
Open

Implement code highlighting using webpack loader #518

egoist opened this issue Oct 9, 2019 · 0 comments

Comments

@egoist
Copy link
Collaborator

egoist commented Oct 9, 2019

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)
})
@egoist egoist added type: feature wip Work In Progress labels Oct 9, 2019
@egoist egoist changed the title Implement code highlighting using template plugin Implement code highlighting using webpack loader Oct 9, 2019
@egoist egoist removed the wip Work In Progress label Oct 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant