Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant