markdown-it-async

Enhance markdown-it to support async highlight function.

This package is a wrapper on top of markdown-it instead of a fork. Updates from markdown-it will be reflected without as transient dependencies.

Usage

import MarkdownItAsync from 'markdown-it-async'

const md = MarkdownItAsync({
  async highlight(code, lang) {
    const { codeToHtml } = await import('shiki')
    return await codeToHtml(code, { lang, theme: 'vitesse-dark' })
  }
})

// Note you need to use `renderAsync` instead of `render`
const html = await md.renderAsync(markdown)

Opt-in Warning

If you integrate this package into your project, and want to make sure you have every usage of md.render migrated to md.renderAsync, you can enable the warnOnSyncRender option.

const md = MarkdownItAsync({
  warnOnSyncRender: true
})

md.render('Hello') // This will throw a conole warning

How it works?

This package is a thin wrapper around markdown-it to support async highlight function. It uses the approach suggested in markdown-it's docs, by putting placeholders in sync mode and then replace them with async results.

The goal is to make it easy to use and absorb the "hack" into the library itself.

Sponsors

License

MIT License © 2024-PRESENT Anthony Fu