Skip to content

fabioaanthony/markdown-it-vuepress-code-snippet-enhanced

Folders and files

NameName
Last commit message
Last commit date

Latest commit

237f8d1 Β· Feb 28, 2021

History

6 Commits
Feb 26, 2019
Feb 26, 2019
Sep 11, 2019
Feb 26, 2019
Feb 26, 2019
Feb 26, 2019
Feb 26, 2019
Feb 26, 2019
Feb 26, 2019
Feb 26, 2019

Repository files navigation

Markdown-it Vuepress Code Snippet Enhanced

Why use this plugin?

  • Specify your own language πŸ’₯
  • Transclude any part of a file πŸ’₯
  • Line highlighting extended from Vuepress πŸ’š

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

In Vuepress 1.x config.js add the following:

markdown: {
    extendMarkdown: 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](@/docs/code.js)
@[code lang=ruby transclude={1-1}](@/docs/code.rb)
@[code highlight={1-6} transcludeTag=style](@/docs/code.vue)
@[code highlight={4,9,11-16} transcludeWith=:::](@/docs/code.vue)

Options

Language

You can specify any language for syntax highlighting as follows:

@[code lang=ruby](@/docs/code.rb)
@[code lang=csharp](@/docs/code.cs)

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, specify a unique pattern.

@[code lang=ruby transcludeWith=|_|_|](@/docs/code.rb)
@[code transcludeWith=:::](@/docs/code.js)
@[code transcludeWith=++++](@/docs/code.h)
Example 1
require 'lib'  
require 'other'  

# |_|_|
def hello
  puts 'hello'
  puts 'vue'
end
# |_|_|
Example 2 (Illustrating multiple transclusions in the same file)
require 'lib'  
require 'other'  

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

   ... more code ...

# |_|_|
def goodebye
  puts 'bye...'
end
# |_|_|

transcludeTag

Useful when working Vue single file components.

@[code transcludeTag=template](@/docs/code.vue)
@[code transcludeTag=script](@/docs/code.vue)
@[code transcludeTag=style](@/docs/code.vue)

transclude

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

@[code transclude={5-13}](@/docs/code.js)

Sample

Input Markdown

@[code highlight={1-6} transcludeTag=style](@/docs/code.vue)

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>