feat(build): allow specifying default language for syntax highlighter (…

…#1296) Co-authored-by: Divyansh Singh <[email protected]>
vuejs · Dec 21, 2022 · f40df31 · f40df31
1 parent 36da61a
commit f40df31
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md
@@ -69,7 +69,10 @@ Additional elements to render in the `<head>` tag in the page HTML. The user-add
 ```ts
 export default {
   head: [
-    ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }]
+    [
+      'link',
+      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }
+    ]
     // would render: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   ]
 }
@@ -164,6 +167,9 @@ interface MarkdownOptions extends MarkdownIt.Options {
     disable?: boolean
   }
 
+  // specify default language for syntax highlighter
+  defaultHighlightLang?: string
+
   // @mdit-vue/plugin-frontmatter plugin options.
   // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-frontmatter#options
   frontmatter?: FrontmatterPluginOptions
@@ -298,6 +304,7 @@ Don't mutate anything inside the `ctx`.
 ```ts
 export default {
   async transformHead(ctx) {
+    // ...
   }
 }
 ```
@@ -327,6 +334,7 @@ Don't mutate anything inside the `ctx`. Also, modifying the html content may cau
 ```ts
 export default {
   async transformHtml(code, id, context) {
+    // ...
   }
 }
 ```
@@ -337,7 +345,6 @@ export default {
 
 `transformPageData` is a hook to transform the `pageData` of each page. You can directly mutate `pageData` or return changed values which will be merged into PageData.
 
-
 ```ts
 export default {
   async transformPageData(pageData) {
@@ -362,6 +369,7 @@ export default {
 ```ts
 export default {
   async buildEnd(siteConfig) {
+    // ...
   }
 }
 ```
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
@@ -40,6 +40,7 @@ export interface MarkdownOptions extends MarkdownIt.Options {
     allowedAttributes?: string[]
     disable?: boolean
   }
+  defaultHighlightLang?: string
   frontmatter?: FrontmatterPluginOptions
   headers?: HeadersPluginOptions
   sfc?: SfcPluginOptions
@@ -60,7 +61,9 @@ export const createMarkdownRenderer = async (
   const md = MarkdownIt({
     html: true,
     linkify: true,
-    highlight: options.highlight || (await highlight(options.theme)),
+    highlight:
+      options.highlight ||
+      (await highlight(options.theme, options.defaultHighlightLang)),
     ...options
   }) as MarkdownRenderer
 

diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts
@@ -52,7 +52,8 @@ const errorLevelProcessor = defineProcessor({
 })
 
 export async function highlight(
-  theme: ThemeOptions = 'material-palenight'
+  theme: ThemeOptions = 'material-palenight',
+  defaultLang: string = ''
 ): Promise<(str: string, lang: string, attrs: string) => string> {
   const hasSingleTheme = typeof theme === 'string' || 'name' in theme
   const getThemeName = (themeValue: IThemeRegistration) =>
@@ -76,7 +77,7 @@ export async function highlight(
 
   return (str: string, lang: string, attrs: string) => {
     const vPre = vueRE.test(lang) ? '' : 'v-pre'
-    lang = lang.replace(vueRE, '').toLowerCase()
+    lang = lang.replace(vueRE, '').toLowerCase() || defaultLang
 
     const lineOptions = attrsToLines(attrs)
     const cleanup = (str: string) =>