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: { md }
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 using comment lines and specify a unique pattern.
@[code lang=ruby transcludeWith=|_|_|](@/docs/code.rb)@[code transcludeWith=:::](@/docs/code.js)@[code transcludeWith=++++](@/docs/code.h)
Example
require 'lib' require 'other' # |_|_|def hello puts 'hello' puts 'vue'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
Rendered Output
<</