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

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

---



Setup

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=:::
`

Options

$3


You can specify any language for syntax highlighting as follows:
`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

``