feat(build): add support for custom languages (#1837)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
vuejs · Feb 26, 2023 · 5a6d384 · 5a6d384
1 parent e2d4edf
commit 5a6d384
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/docs/config/app-config.md b/docs/config/app-config.md
@@ -154,6 +154,10 @@ interface MarkdownOptions extends MarkdownIt.Options {
   // Enable line numbers in code block.
   lineNumbers?: boolean
 
+  // Add support for your own languages.
+  // https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki
+  languages?: Shiki.ILanguageRegistration
+
   // markdown-it-anchor plugin options.
   // See: https://github.com/valeriangalliat/markdown-it-anchor#usage
   anchor?: anchorPlugin.AnchorOptions

diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
@@ -15,7 +15,7 @@ import MarkdownIt from 'markdown-it'
 import anchorPlugin from 'markdown-it-anchor'
 import attrsPlugin from 'markdown-it-attrs'
 import emojiPlugin from 'markdown-it-emoji'
-import type { IThemeRegistration } from 'shiki'
+import type { ILanguageRegistration, IThemeRegistration } from 'shiki'
 import type { Logger } from 'vite'
 import { containerPlugin } from './plugins/containers'
 import { highlight } from './plugins/highlight'
@@ -47,6 +47,7 @@ export interface MarkdownOptions extends MarkdownIt.Options {
   headers?: HeadersPluginOptions
   sfc?: SfcPluginOptions
   theme?: ThemeOptions
+  languages?: ILanguageRegistration[]
   toc?: TocPluginOptions
   externalLinks?: Record<string, string>
 }
@@ -64,7 +65,12 @@ export const createMarkdownRenderer = async (
     linkify: true,
     highlight:
       options.highlight ||
-      (await highlight(options.theme, options.defaultHighlightLang, logger)),
+      (await highlight(
+        options.theme,
+        options.languages,
+        options.defaultHighlightLang,
+        logger
+      )),
     ...options
   }) as MarkdownRenderer
 

diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts
@@ -1,6 +1,11 @@
 import { customAlphabet } from 'nanoid'
 import c from 'picocolors'
-import type { HtmlRendererOptions, IThemeRegistration } from 'shiki'
+import {
+  BUNDLED_LANGUAGES,
+  type HtmlRendererOptions,
+  type ILanguageRegistration,
+  type IThemeRegistration
+} from 'shiki'
 import {
   addClass,
   createDiffProcessor,
@@ -58,6 +63,7 @@ const errorLevelProcessor = defineProcessor({
 
 export async function highlight(
   theme: ThemeOptions = 'material-theme-palenight',
+  languages: ILanguageRegistration[] = [],
   defaultLang: string = '',
   logger: Pick<Logger, 'warn'> = console
 ): Promise<(str: string, lang: string, attrs: string) => string> {
@@ -74,6 +80,7 @@ export async function highlight(
 
   const highlighter = await getHighlighter({
     themes: hasSingleTheme ? [theme] : [theme.dark, theme.light],
+    langs: [...BUNDLED_LANGUAGES, ...languages],
     processors
   })