feat(markdown-it): support fine-grain usage

Author: antfu

package.json

@@ -25,8 +25,8 @@
     "@vitest/coverage-v8": "^1.0.4",
     "ansi-sequence-parser": "^1.1.1",
     "bumpp": "^9.2.1",
-    "eslint-plugin-format": "^0.1.0",
     "eslint": "npm:eslint-ts-patch@8.55.0-1",
+    "eslint-plugin-format": "^0.1.0",
     "eslint-ts-patch": "8.55.0-1",
     "esno": "^4.0.0",
     "fast-glob": "^3.3.2",

packages/markdown-it-shikiji/README.md

@@ -24,6 +24,31 @@ md.use(await Shikiji({
 }))
 ```
 
+## Fine-grained Bundle
+
+By default, the full bundle of `shikiji` will be imported. If you are Shikiji's [fine-grained bundle](https://github.com/antfu/shikiji#fine-grained-bundle), you can import from `markdown-it-shikiji/core` and pass your own highlighter:
+
+```ts
+import MarkdownIt from 'markdown-it'
+import { fromHighlighter } from 'markdown-it-shikiji/core'
+import { getHighlighterCore } from 'shikiji/core'
+import { getWasmInlined } from 'shikiji/wasm'
+
+const highlighter = await getHighlighterCore({
+  themes: [
+    import('shikiji/themes/vitesse-light.mjs')
+  ],
+  langs: [
+    import('shikiji/langs/javascript.mjs'),
+  ],
+  loadWasm: getWasmInlined
+})
+
+const md = MarkdownIt()
+
+md.use(fromHighlighter(highlighter, { /* options */ }))
+```
+
 ## Features
 
 ### Line Highlight
@@ -41,6 +66,12 @@ console.log('line4') // highlighted
 ```
 ````
 
+````
+
+```
+
 ## License
 
 MIT
+```
+````

packages/markdown-it-shikiji/build.config.ts

@@ -3,6 +3,7 @@ import { defineBuildConfig } from 'unbuild'
 export default defineBuildConfig({
   entries: [
     'src/index.ts',
+    'src/core.ts',
   ],
   declaration: true,
   rollup: {

packages/markdown-it-shikiji/package.json

@@ -21,6 +21,10 @@
     ".": {
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
+    },
+    "./core": {
+      "types": "./dist/core.d.mts",
+      "default": "./dist/core.mjs"
     }
   },
   "main": "./dist/index.mjs",

packages/markdown-it-shikiji/src/core.ts

@@ -0,0 +1,100 @@
+import type MarkdownIt from 'markdown-it'
+import { addClassToHast } from 'shikiji/core'
+import type { BuiltinTheme, CodeOptionsMeta, CodeOptionsThemes, CodeToHastOptions, HighlighterGeneric, ShikijiTransformer, TransformerOptions } from 'shikiji'
+import { parseHighlightLines } from '../../shared/line-highlight'
+
+export interface MarkdownItShikijiExtraOptions {
+  /**
+   * Add `highlighted` class to lines defined in after codeblock
+   *
+   * @default true
+   */
+  highlightLines?: boolean | string
+
+  /**
+   * Custom meta string parser
+   * Return an object to merge with `meta`
+   */
+  parseMetaString?: (
+    metaString: string,
+    code: string,
+    lang: string,
+  ) => Record<string, any> | undefined | null
+}
+
+export type MarkdownItShikijiSetupOptions =
+  & CodeOptionsThemes<BuiltinTheme>
+  & TransformerOptions
+  & CodeOptionsMeta
+  & MarkdownItShikijiExtraOptions
+
+export function setupMarkdownIt(
+  markdownit: MarkdownIt,
+  highlighter: HighlighterGeneric<any, any>,
+  options: MarkdownItShikijiSetupOptions,
+) {
+  const {
+    highlightLines = true,
+    parseMetaString,
+  } = options
+
+  markdownit.options.highlight = (code, lang = 'text', attrs) => {
+    const meta = parseMetaString?.(attrs, code, lang) || {}
+    const codeOptions: CodeToHastOptions = {
+      ...options,
+      lang,
+      meta: {
+        ...options.meta,
+        ...meta,
+        __raw: attrs,
+      },
+    }
+
+    const builtInTransformer: ShikijiTransformer[] = []
+
+    if (highlightLines) {
+      const lines = parseHighlightLines(attrs)
+      if (lines) {
+        const className = highlightLines === true
+          ? 'highlighted'
+          : highlightLines
+
+        builtInTransformer.push({
+          name: 'markdown-it-shikiji:line-class',
+          line(node, line) {
+            if (lines.includes(line))
+              addClassToHast(node, className)
+            return node
+          },
+        })
+      }
+    }
+
+    builtInTransformer.push({
+      name: 'markdown-it-shikiji:block-class',
+      code(node) {
+        node.properties.class = `language-${lang}`
+      },
+    })
+
+    return highlighter.codeToHtml(
+      code,
+      {
+        ...codeOptions,
+        transformers: [
+          ...builtInTransformer,
+          ...codeOptions.transformers || [],
+        ],
+      },
+    )
+  }
+}
+
+export function fromHighlighter(
+  highlighter: HighlighterGeneric<any, any>,
+  options: MarkdownItShikijiSetupOptions,
+) {
+  return function (markdownit: MarkdownIt) {
+    setupMarkdownIt(markdownit, highlighter, options)
+  }
+}

packages/markdown-it-shikiji/src/index.ts

@@ -1,7 +1,10 @@
 import type MarkdownIt from 'markdown-it'
-import { addClassToHast, bundledLanguages, getHighlighter } from 'shikiji'
-import type { BuiltinLanguage, BuiltinTheme, CodeOptionsMeta, CodeOptionsThemes, CodeToHastOptions, Highlighter, LanguageInput, ShikijiTransformer, TransformerOptions } from 'shikiji'
-import { parseHighlightLines } from '../../shared/line-highlight'
+import { bundledLanguages, getHighlighter } from 'shikiji'
+import type { BuiltinLanguage, BuiltinTheme, LanguageInput } from 'shikiji'
+import type { MarkdownItShikijiSetupOptions } from './core'
+import { setupMarkdownIt } from './core'
+
+export * from './core'
 
 export type MarkdownItShikijiOptions = MarkdownItShikijiSetupOptions & {
   /**
@@ -12,86 +15,6 @@ export type MarkdownItShikijiOptions = MarkdownItShikijiSetupOptions & {
   langs?: Array<LanguageInput | BuiltinLanguage>
 }
 
-export type MarkdownItShikijiSetupOptions = CodeOptionsThemes<BuiltinTheme>
-  & TransformerOptions
-  & CodeOptionsMeta
-  & {
-  /**
-   * Add `highlighted` class to lines defined in after codeblock
-   *
-   * @default true
-   */
-    highlightLines?: boolean | string
-
-    /**
-     * Custom meta string parser
-     * Return an object to merge with `meta`
-     */
-    parseMetaString?: (
-      metaString: string,
-      code: string,
-      lang: string,
-    ) => Record<string, any> | undefined | null
-  }
-
-function setup(markdownit: MarkdownIt, highlighter: Highlighter, options: MarkdownItShikijiSetupOptions) {
-  const {
-    highlightLines = true,
-    parseMetaString,
-  } = options
-
-  markdownit.options.highlight = (code, lang = 'text', attrs) => {
-    const meta = parseMetaString?.(attrs, code, lang) || {}
-    const codeOptions: CodeToHastOptions = {
-      ...options,
-      lang,
-      meta: {
-        ...options.meta,
-        ...meta,
-        __raw: attrs,
-      },
-    }
-
-    const builtInTransformer: ShikijiTransformer[] = []
-
-    if (highlightLines) {
-      const lines = parseHighlightLines(attrs)
-      if (lines) {
-        const className = highlightLines === true
-          ? 'highlighted'
-          : highlightLines
-
-        builtInTransformer.push({
-          name: 'markdown-it-shikiji:line-class',
-          line(node, line) {
-            if (lines.includes(line))
-              addClassToHast(node, className)
-            return node
-          },
-        })
-      }
-    }
-
-    builtInTransformer.push({
-      name: 'markdown-it-shikiji:block-class',
-      code(node) {
-        node.properties.class = `language-${lang}`
-      },
-    })
-
-    return highlighter.codeToHtml(
-      code,
-      {
-        ...codeOptions,
-        transformers: [
-          ...builtInTransformer,
-          ...codeOptions.transformers || [],
-        ],
-      },
-    )
-  }
-}
-
 export default async function markdownItShikiji(options: MarkdownItShikijiOptions) {
   const themeNames = ('themes' in options
     ? Object.values(options.themes)
@@ -102,6 +25,6 @@ export default async function markdownItShikiji(options: MarkdownItShikijiOption
   })
 
   return function (markdownit: MarkdownIt) {
-    setup(markdownit, highlighter, options)
+    setupMarkdownIt(markdownit, highlighter, options)
   }
 }