markdown-it-vuepress-code-snippet-enhanced

Markdown-it Vuepress Code Snippet Enhanced

Why use this plugin?

• Specify your own language :boom:
• Transclude any part of a file :boom:
• Line highlighting extended from Vuepress :green_heart:

Install

npm i -D markdown-it-vuepress-code-snippet-enhanced

Setup

In Vuepress config.js add the following:

markdown: {
    config: md => {
        md.use(require('markdown-it-vuepress-code-snippet-enhanced'))
    }
}

You can now import code snippets into your markdown files with the following syntax:

@code
@code lang=ruby transclude={1-1}
@code highlight={1-6} transcludeTag=style
@code highlight={4,9,11-16} transcludeWith=:::

Options

Language

You can specify any language for syntax highlighting as follows:

@code lang=ruby
@code lang=csharp

Vuepress uses prismjs, so for proper syntax highlighting check prism.js docs.

Transclusion

You can transclude a single or multiple parts of a file using transclude, transcludeWith, or transcludeTag.

transcludeWith

For transcluding one or more parts of a file using comment lines and specify a unique pattern.

@code lang=ruby transcludeWith=|_|_|
@code transcludeWith=:::
@code transcludeWith=++++

Example

require 'lib'  
require 'other'  

# |_|_|
def hello
  puts 'hello'
  puts 'vue'
end
# |_|_|

transcludeTag

Useful when working Vue single file components.

@code transcludeTag=template
@code transcludeTag=script
@code transcludeTag=style

transclude

Use a range indicating the start and end lines. This option is inclusive.

@code transclude={5-13}

Sample

Input Markdown

@code highlight={1-6} transcludeTag=style

Source File

<template>
  <div class="component"></div>
</template>

<script>
export default {
  mounted () {
    alert('yay!')
  }
}
</script>

<style lang="scss" scoped>
.component {
  display: flex;
}
</style>

Rendered Output

<style lang="scss" scoped>
.component {
  display: flex;
}
</style>