markdown-it.md

@shikijs/markdown-it

markdown-it plugin for Shiki.

Install

npm i -D @shikijs/markdown-it

Usage

import MarkdownIt from 'markdown-it'
import Shiki from '@shikijs/markdown-it'

const md = MarkdownIt()

md.use(await Shiki({
  themes: {
    light: 'vitesse-light',
    dark: 'vitesse-dark',
  }
}))

Fine-grained Bundle

By default, the full bundle of shiki will be imported. If you are using a fine-grained bundle, you can import from @shikijs/markdown-it/core and pass your own highlighter:

// @noErrors: true
import MarkdownIt from 'markdown-it'
import { fromHighlighter } from '@shikijs/markdown-it/core'
import { getHighlighterCore } from 'shiki/core'

const highlighter = await getHighlighterCore({
  themes: [
    import('shiki/themes/vitesse-light.mjs')
  ],
  langs: [
    import('shiki/langs/javascript.mjs'),
  ],
  loadWasm: import('shiki/wasm')
})

const md = MarkdownIt()

md.use(fromHighlighter(highlighter, { /* options */ }))

Features

Line Highlight

::: warning This is deprecated. It's disabled by default in v0.10.0 and will be removed in the next minor. Consider use transformerNotationHighlight instead. :::

In addition to the features of shiki, this plugin also supports line highlighting. You can specify line numbers to highlight after the language name in the format {<line-numbers>} - a comma separated list of <line-number>s, wrapped in curly braces. Each line number can be a single number (e.g. {2} highlights line 2 and {1,4} highlights lines 1 and 4) or a range (e.g. {5-7} highlights lines 1 through 7, and {1-3,5-6} highlights lines 1 through 3 and 5 through 6). For example:

```js {1,3-4}
console.log('1') // highlighted
console.log('2')
console.log('3') // highlighted
console.log('4') // highlighted
```

::: info If line highlighting is not working, it may be due to compatibility issues with the markdown-it-attrs plugin. The syntax of markdown-it-attrs uses the same curly brace ({}) syntax that this plugin uses, which causes line highlighting to not work. If you wish to continue using markdown-it-attrs alongside this plugin, consider changing the delimiter/syntax of markdown-it-attrs to use a different character, such as %. :::