Back to Shiki

@shikijs/markdown-it

docs/packages/markdown-it.md

4.0.221.9 KB
Original Source

@shikijs/markdown-it

<Badges name="@shikijs/markdown-it" />

markdown-it plugin for Shiki.

Install

::: code-group

sh
npm i -D @shikijs/markdown-it
sh
yarn add -D @shikijs/markdown-it
sh
pnpm add -D @shikijs/markdown-it
sh
bun add -D @shikijs/markdown-it
sh
deno add npm:@shikijs/markdown-it

:::

Usage

ts
// @twoslash-cache: {"v":1,"hash":"959709c97c288ea5ed5a231f28e5eebf48f1676e9c76559e68208cb76e2b6711","data":"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvAMr52Aa3aMIWcZLiJeAWWal5UCAHcwASTSyF7APKqJYHpoAKpCAFt2cGAB5Gr3fqMwdjRNHT0DYzM+AF4APl4iCHYoWIAdINcsCFI0GTlFShA4NF0GRAB2KlYYMABzNHwkAFYqEtJamDKQCwKq9jBcRAAGKhF8XWYxMiRygF8KdGxBgmJp1roulg4uPn6aUn5JmG1/CNM0dK3OHl4RdVywgMiQk/DAswBhe9JBMWz09iZbIPU7vBhUAwiBCIEA6fq8LC6TykAD0pBqsHRpFurC4cAAdOl0gBiUmk3gAVTgzA6RLAAANGQArZhELgiUjsVTpFEo3iQWD4plwCi8VIgES4uBwdgicW8QzMDCIdJs7GPM5mXjRXjogCOgnY6MYAHI/G9jABaYIm7gUdK8R28VxQbX8mCGV5Pc6MbgAblVul18EErFyOpd+PRYExpuJztBVuCutDMAAXmmAIS2gNgHl8gUwIUi3gNY7U1wwUUAI0EuUMwXwvDgglquhVYDVztdOv1huNZsTYGtaFtvtzXfRLbDbsj0djJvj5u9I5T1Qz2f9dN5vGrLkMyIVjYgdd4AEEtAARUXMKCwV1oCBikANmNGeWSZscrm5VgQW/5rwAByEA0KKZborwujHJAvBQFw+CEp2QYum6r4RPiy5nME46BtiU6huG3ZRhiZBxgmFrDsmPzrlmObpIy9J0tI/S1NUvAcAMwYxmQrGig2DQnrkiKkDSolYE2hjiR2DHMqy7KctyyHYqhvYwAaRowKaWGBCOY5bspwbTkRc6kaQJhgJxWkmgA+jZOlJmgdlrumdEGYxdJkuSACitDMJk1R0oxLJsnA35KTudyuK4kjLs60AwHh3Zun2mnaUOencKaUUxWAy70XmYA7rAhyEfFsBJapwYaQODlUaOWUGYBNTMNW7EwCQpAYA0rGVT21X9tZdWZYwwAOrw+BoK4rCaGgPxVuNnGKPwyqlvN9pSKW2AQLU4n4GQs3zekszuYynleTIGBgCUtATewtT4BwD3iHUQXMnASWPcKKXqYNppyA9T2TcWtq8Duk1oFgGi8gDj33ZNwr4tktQonSXZValtUZTaWVjZtsNAy8QiiGoUiMMUpCiridR8HjTq8Ow/C8Iw1O1LwABk7MTawiMdGgAAyzB1IINJaaz3C0+N9NzRgvB0/TTromggikFIX0EgT8NoCzQu1KKFPgfN3D4myrCCDAuYK7wsy3MwaBjMzdm07MUvW3S9NKyrUgmiafpg3ygieLwGxkGAbBwTApUzvAIjMFgvWbS7YAnbmHmFVY2ICU2QisKwCriTg2KrKQnKwMzjO8BgJ7ujArp4vdUiSnipZPvSXhYOisT0twMkMnJoXhRchnqz9NXWZrz0g3w4NoJD0MohPCMEsjqOFTuZ5iCLeclcwZWm+bH2GRjv1pYOlEjfLi9E8IYh2MzBscbrkubY6Fc63UHNc+r+J84Lwui+/WoEs5au0dDLEBL8Fae1VrwE07dIJN2lNEcU6txSxC8HcWAsQTS8AANSgKtvTb+V9AH6zmobc2xt97HHwZAwh9M4EokwTAdBKIO4sN9gQm2sd7ZNkYE7OWSd6ZJ1dtA728DjiILgMgggPMPogHQcw7BeDiJ1nYKwAkMc44wAABJTVYOTOafBcGwK8EwhKrD2HYMtm7ZOp16SFGKKUJAAAWAAHFUGo9RGiIAAIwjGoLoPmeANRgkKFZJAvjRjjFElMcgFR5iLBwHgQgnVCg0HoHgO49hcgulCEOMwji2hlDcS0EA1Q6gNCQAAJlaEEzoeAXThP6IMAAzNEiYcSkAADZEnUCWCk4u6SNhMDYNcPgoTni+nyZRLUjBcHVN4MXP8t4eAAiBDkL0mpwQgEhNCWEzB4QiWRGiMyZAcR4iQiSC6VJRZvXpCFBSP5AKFmLKKcUUjZTykVMqJKkzzijz+mfFcOMNr0yqgMT0/yzC4UMgRGcEYoAkR4qQciw1qKpg3AVF5CU3mln2s2fyVZdynizs2Vs7Y+qAtPuihqsLJwhgRcRecZFFwURBbkGirlNy5kAnuIwh4s5CXPFeG8d5a4t2fOhd8IAllSDCopX8/4oCARAmBfFZBjjQX5E+eCcBEJUp1NKwwmEhw4QMgy4ys4kUstRWy2lLksX2OYqxdiVluKYj4keQSp4RJiTjpJaS9zHkKueUffqmMhrYzpRaoM8KTI2rMhZKypo7K0uclyp1qczqFS8vGXy/ksCBUKsFeSoaIp8hyrFfw5VErhupVjc+ONspuFyvlJqRU+Q7zKjFCq9a1Jj3Sk2mNvLO3BzDm1Y4HUyDdTkK9ftA0aXRrHJffRh1zZgo4v0Zaq05obvGpgLIu0A0HTWubY6zrc0XWkFdG6d1AZawTrJB5h8uwjwHUCq+U9/YTVnlDRAMN4aE0RivNGKEI0n0bRyld40r6aGJrfT8hjKaPxphA+mb9Waf25rzTof9agiw6IA4B8tpZdXQ4QsROGNZAa1qQ5s5Cz0wCoWwc2NjhG214Y7GyztXYiMgVRn2fsdyBynfQUO4du3RzCnHBOjok4p2fXSDO3rs6hjzlJOOhclmdVLscRgFcq6CBrnXaUDcLnSklW3Kx3de6loHoqz6ciG3j1o5PYUoMZ5zwAwvNzS8kbtFXoBDeytJOR13jOahr7wMuaHdB3GsG/PXxJnfZDVMn4UdfkzQB2Hv6/11oRsWT9n5W3AaRqBnQvamPYRZ6RKC5FoIwRYnBtD6GEOIUl+jD893MZNqxmhBC2uMKUWYqxnC6HW04w7fhPHBF8fdorSrMC4E1akTI1BCimtYJa6o8QGj8RaJwHo6ayHjGmPMVg0bndxvyYvdmhxVAnE5CQAATgCRU7xkSAltGCTCaFOyImIHaRKGJkx9iRN8X0w9yxUlrGoCMmE2Tijdhmd6Qpj3ilfZcZ4ypPjamBPaA0mETS+gDGaB02J4PhhQ4GTCWH5B1iZJhL4TohAoATIKWgfEonGBFtbP0JwZtaj9BYgFZjqPtnMwWTpsgKyoA8EKHsvAAAqMYhyJ3VGV3Sfmyrmw4BEIzdgEq+fC6kGS4XJApB+tcHABm10nwiBVtGYSSJzn9CcaIIs6QzAmlt0yQOuRmDkrbNiR8ttc68HpCb/ovgoCimtzwekqnbhO9YlcsAebeAFrF8Gstg8krBDIHbbIsXgVnBHJafg2RrSWRaQVdGEHB1l90s27gg2Fbc88AZ/YxeUMmirxAGy6Ii1HBNKKE0GTRyigQ6TZmj55A1BLMkWgJW2vSwgAv+wyBl8AF18TZJoNdN08/F/b6gLQPfB+ahc+H7iEQWkUQD5RHrWB1ZdAFTX/J+xRTnF+KGJUcpLxKpIHOpQnLoUTZpMnRAMpNXSnaYIHGnZJOnIZRnTYMZHYPISwZQWwdQCXMEHoawHA+wHuXgZwNwDwbwXwM1F4f7GIeIRIZINIDILITZAgn/Z7PxXxAAj7YAspH7InbofIdgSAwYGA0HLpPxVpRAmHFA+HJnEAXnFwQuTAPgL4WAGwUmOALQQiLkaoAAFX2krDgC8AACFhAoBqgoADCYBKxYh8QywjCnBShOBWAvAAAlGAO4UgKALwCmL1awysDw4XCmO2OwM8MAWWAAHxkDmlYn5kL1ElYApCCEkFMPMMsICOJT8LqFiFyMVwgChDwDPATCwCWSZjuD/GxDDiMMlQcPgCQgMI8CglzgFUrmrjDzgH10ZlllcB0KLWODqNtyr1DwJQ6AGFEhoFdGYXT0YjQEPivjIH3wSj0IgGOwMWYVFHllZk0BNA803UGM0HK0Jh2KIEL2lBgEtEJjH1dngj0BOLOM8EtFuPkGuMTgvSU0KgAHV1E84xii8aA7NGRJppp0hfDER5VMBqgZEKjshEBiRfEES/RLRLR9VLAnj/A4T+AsSAwFFmEzFOihYmDGJ0kaRoRkBkAigYBcAqAIZ/1eRhcGhBBqwljXAURUTFBhQ2ShDiRCZninit5LRBiQAd8d8Mdf9fFqluCgCfFulQDftqBDD4ARCekKcwd4DqlpDBk0lUCmAO4VAyAVCt1npNBxRTiaBzjLitZxR2CyhfEXEolADcdycCd5TCZlSKhVSJCXFNTkDtS5DNg9TlCMA+BniTSQAzT4BHjnjrSxSODfFukXscdPtEBscXSBDnj3SPEQdOkqdvTRSJQEo8BAQWDcgCCBAXBXBYEAABdk9gTk2lE0dZEsrZMEcstwWBBsukJHXJfqf7X0OkSMHnZgRUZMAg0aA9RUjQTLI0yae480x4q4zdR0UM2BCMi0541427OxbgQoSsEoJAUAEOewOwPAOYkAWYWYIAA=="}
import Shiki from '@shikijs/markdown-it'
import MarkdownIt from 'markdown-it'

const md = MarkdownIt()

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

Transformers

You can pass transformers to the plugin options to customize the highlighted code.

ts
// @twoslash-cache: {"v":1,"hash":"7251d42df549db899085560c6ca05a99dc9f338642b7849507ef0ead24fa6dba","data":"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"}
import Shiki from '@shikijs/markdown-it'
import { transformerNotationDiff } from '@shikijs/transformers'
import MarkdownIt from 'markdown-it'

const md = MarkdownIt()

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

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:

ts
// @twoslash-cache: {"v":1,"hash":"4cce3b72c2224ceff07c637806719480ab0b5bcdb0fafc8ad599ec8c8ad5d255","data":"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"}
// @noErrors: true
import { fromHighlighter } from '@shikijs/markdown-it/core'
import MarkdownIt from 'markdown-it'
import { createHighlighterCore } from 'shiki/core'
import { createOnigurumaEngine } from 'shiki/engine/oniguruma'

const highlighter = await createHighlighterCore({
  themes: [
    import('@shikijs/themes/vitesse-light')
  ],
  langs: [
    import('@shikijs/langs/javascript'),
  ],
  engine: createOnigurumaEngine(() => import('shiki/wasm'))
})

const md = MarkdownIt()

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

With Shorthands

Shiki's shorthands provides on-demand loading of themes and languages, but also makes the highlighting process asynchronous. Unfortunately, markdown-it itself does NOT support async highlighting out of the box.

To workaround this, you can use markdown-it-async by Anthony Fu. Where Shiki also provides an integration with it, you can import fromAsyncCodeToHtml from @shikijs/markdown-it/async.

ts
// @twoslash-cache: {"v":1,"hash":"4d4fcf8100ee107a1813af12192e944bfcf04449a77daa41fca68ea887412763","data":"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"}
import { fromAsyncCodeToHtml } from '@shikijs/markdown-it/async'
import MarkdownItAsync from 'markdown-it-async'
import { codeToHtml } from 'shiki' // Or your custom shorthand bundle

// Initialize MarkdownIt instance with markdown-it-async
const md = MarkdownItAsync()

md.use(
  fromAsyncCodeToHtml(
    // Pass the codeToHtml function
    codeToHtml,
    {
      themes: {
        light: 'vitesse-light',
        dark: 'vitesse-dark',
      }
    }
  )
)

// Use `md.renderAsync` instead of `md.render`
const html = await md.renderAsync('# Title\n```ts\nconsole.log("Hello, World!")\n```')

Transformer Caveats

markdown-it defaults to enforcing <pre><code> as the outermost wrappers of code block html. If you use a custom Shiki transformer, this behavior may be undesirable. For example, if the transformer produces

html
<div class="fenced-code-block">
  <pre>
    <code></code>
  </pre>
</div>

the result after markdown-it processing will be

html
<pre>
  <code>
    <div class="fenced-code-block">
      <pre>
        <code></code>
      </pre>
    </div>
  </code>
</pre>

Work around this by adding olets/markdown-it-wrapperless-fence-rule to your markdown-it configuration, or by writing your own markdown-it fence rule (see markdown-it#269).