Skip to content
This repository was archived by the owner on Mar 7, 2025. It is now read-only.
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

Description

@egoist

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)
})

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions