Easily import code snippets for Vuepress
npm install markdown-it-vuepress-code-snippet-enhanced - Specify your own language :boom:
- Transclude any part of a file :boom:
- Line highlighting extended from Vuepress :green_heart:
``sh`
npm i -D markdown-it-vuepress-code-snippet-enhanced
---
In Vuepress config.js add the following:
`js`
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:
`md`
@code
@code lang=ruby transclude={1-1}
@code highlight={1-6} transcludeTag=style
@code highlight={4,9,11-16} transcludeWith=:::
md
@code lang=ruby
@code lang=csharp
`
_Vuepress uses prismjs, so for proper syntax highlighting check prism.js docs._
$3
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.
`md
@code lang=ruby transcludeWith=|_|_|
@code transcludeWith=:::
@code transcludeWith=++++
`
##### Example
`rb
require 'lib'
require 'other' |_|_|
def hello
puts 'hello'
puts 'vue'
end
|_|_|
`#### transcludeTag
Useful when working
Vue single file components.
`md
@code transcludeTag=template
@code transcludeTag=script
@code transcludeTag=style
`#### transclude
Use a range indicating the
start and end lines. This option is inclusive.
`md
@code transclude={5-13}
`
Sample
$3
`
@code highlight={1-6} transcludeTag=style
`$3
`html
`
$3
`css
``