From 0e8feed9ed8d5e0ea0dd7840c372caedd00b4d65 Mon Sep 17 00:00:00 2001 From: Azat S Date: Thu, 14 Jul 2022 23:48:33 +0300 Subject: [PATCH 1/4] feat: allow to use custom syntax highlighting themes --- src/node/markdown/markdown.ts | 6 ++++-- src/node/markdown/plugins/highlight.ts | 19 +++++++++++++------ 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts index 7582f47f99c1..7c003b2d041c 100644 --- a/src/node/markdown/markdown.ts +++ b/src/node/markdown/markdown.ts @@ -1,5 +1,5 @@ import MarkdownIt from 'markdown-it' -import { Theme } from 'shiki' +import { Theme, IShikiTheme } from 'shiki' import { parseHeader } from '../utils/parseHeader' import { highlight } from './plugins/highlight' import { slugify } from './plugins/slugify' @@ -19,7 +19,9 @@ import attrs from 'markdown-it-attrs' import emoji from 'markdown-it-emoji' import toc from 'markdown-it-toc-done-right' -export type ThemeOptions = Theme | { light: Theme; dark: Theme } +export type ThemeValue = Theme | IShikiTheme + +export type ThemeOptions = ThemeValue | { light: ThemeValue; dark: ThemeValue } export interface MarkdownOptions extends MarkdownIt.Options { lineNumbers?: boolean diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts index eb27b559edaa..424e74c4e2eb 100644 --- a/src/node/markdown/plugins/highlight.ts +++ b/src/node/markdown/plugins/highlight.ts @@ -1,26 +1,33 @@ import { getHighlighter } from 'shiki' -import type { ThemeOptions } from '../markdown' +import type { ThemeOptions, ThemeValue } from '../markdown' export async function highlight(theme: ThemeOptions = 'material-palenight') { - const themes = typeof theme === 'string' ? [theme] : [theme.dark, theme.light] + const hasMultipleThemes = + typeof theme !== 'string' && 'dark' in theme && 'light' in theme + const themes: ThemeValue[] = hasMultipleThemes + ? [theme.dark, theme.light] + : [theme] const highlighter = await getHighlighter({ themes }) const preRE = /^/ return (str: string, lang: string) => { lang = lang || 'text' - if (typeof theme === 'string') { + const getThemeName = (themeValue: ThemeValue) => + typeof themeValue === 'string' ? themeValue : themeValue.name + + if (!hasMultipleThemes) { return highlighter - .codeToHtml(str, { lang, theme }) + .codeToHtml(str, { lang, theme: getThemeName(theme) }) .replace(preRE, '
')
     }
 
     const dark = highlighter
-      .codeToHtml(str, { lang, theme: theme.dark })
+      .codeToHtml(str, { lang, theme: getThemeName(theme.dark) })
       .replace(preRE, '
')
 
     const light = highlighter
-      .codeToHtml(str, { lang, theme: theme.light })
+      .codeToHtml(str, { lang, theme: getThemeName(theme.light) })
       .replace(preRE, '
')
 
     return dark + light

From b82ce72f3f09d165f5b26cd4edbbce1a50da5b92 Mon Sep 17 00:00:00 2001
From: Azat S 
Date: Fri, 15 Jul 2022 00:26:38 +0300
Subject: [PATCH 2/4] feat: add information about using custom syntax
 highlighting themes to the docs

---
 docs/config/app-configs.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md
index 54657e3ff874..3e8251359b4b 100644
--- a/docs/config/app-configs.md
+++ b/docs/config/app-configs.md
@@ -114,8 +114,17 @@ Below shows the the full option you may define within this object.
 ```ts
 interface MarkdownOptions extends MarkdownIt.Options {
   // Syntax highlight theme for Shiki.
-  // See: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
-  theme?: Shiki.Theme | { light: Shiki.Theme, dark: Shiki.Theme }
+  // You can use an existing theme. See:
+  // https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
+  // Or add your own theme. See:
+  // https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
+  theme?:
+    | Shiki.Theme
+    | Shiki.IShikiTheme
+    | {
+        light: Shiki.Theme | Shiki.IShikiTheme,
+        dark: Shiki.Theme | Shiki.IShikiTheme
+      };
 
   // Enable line numbers in code block.
   lineNumbers?: boolean

From 7e0cb4a599908a68e1296eb7bb611fe36b95e813 Mon Sep 17 00:00:00 2001
From: Azat S 
Date: Fri, 15 Jul 2022 10:25:25 +0300
Subject: [PATCH 3/4] feat: update syntax highlighting theme typings

---
 docs/config/app-configs.md             |  7 +++----
 src/node/markdown/markdown.ts          | 11 +++++++----
 src/node/markdown/plugins/highlight.ts |  8 ++++----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md
index 3e8251359b4b..19983a8a87b5 100644
--- a/docs/config/app-configs.md
+++ b/docs/config/app-configs.md
@@ -119,11 +119,10 @@ interface MarkdownOptions extends MarkdownIt.Options {
   // Or add your own theme. See:
   // https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
   theme?:
-    | Shiki.Theme
-    | Shiki.IShikiTheme
+    | Shiki.IThemeRegistration
     | {
-        light: Shiki.Theme | Shiki.IShikiTheme,
-        dark: Shiki.Theme | Shiki.IShikiTheme
+        light: Shiki.IThemeRegistration,
+        dark: Shiki.IThemeRegistration
       };
 
   // Enable line numbers in code block.
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
index 7c003b2d041c..3a9e516c22f6 100644
--- a/src/node/markdown/markdown.ts
+++ b/src/node/markdown/markdown.ts
@@ -1,5 +1,5 @@
 import MarkdownIt from 'markdown-it'
-import { Theme, IShikiTheme } from 'shiki'
+import { IThemeRegistration } from 'shiki'
 import { parseHeader } from '../utils/parseHeader'
 import { highlight } from './plugins/highlight'
 import { slugify } from './plugins/slugify'
@@ -19,9 +19,12 @@ import attrs from 'markdown-it-attrs'
 import emoji from 'markdown-it-emoji'
 import toc from 'markdown-it-toc-done-right'
 
-export type ThemeValue = Theme | IShikiTheme
-
-export type ThemeOptions = ThemeValue | { light: ThemeValue; dark: ThemeValue }
+export type ThemeOptions =
+  | IThemeRegistration
+  | {
+      light: IThemeRegistration
+      dark: IThemeRegistration
+    }
 
 export interface MarkdownOptions extends MarkdownIt.Options {
   lineNumbers?: boolean
diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts
index 424e74c4e2eb..d142d2a8efea 100644
--- a/src/node/markdown/plugins/highlight.ts
+++ b/src/node/markdown/plugins/highlight.ts
@@ -1,10 +1,10 @@
-import { getHighlighter } from 'shiki'
-import type { ThemeOptions, ThemeValue } from '../markdown'
+import { IThemeRegistration, getHighlighter } from 'shiki'
+import type { ThemeOptions } from '../markdown'
 
 export async function highlight(theme: ThemeOptions = 'material-palenight') {
   const hasMultipleThemes =
     typeof theme !== 'string' && 'dark' in theme && 'light' in theme
-  const themes: ThemeValue[] = hasMultipleThemes
+  const themes: IThemeRegistration[] = hasMultipleThemes
     ? [theme.dark, theme.light]
     : [theme]
   const highlighter = await getHighlighter({ themes })
@@ -13,7 +13,7 @@ export async function highlight(theme: ThemeOptions = 'material-palenight') {
   return (str: string, lang: string) => {
     lang = lang || 'text'
 
-    const getThemeName = (themeValue: ThemeValue) =>
+    const getThemeName = (themeValue: IThemeRegistration) =>
       typeof themeValue === 'string' ? themeValue : themeValue.name
 
     if (!hasMultipleThemes) {

From 143769eab68b4da2bf5d8772fcc14cf95f4b5110 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Fri, 15 Jul 2022 20:07:52 +0530
Subject: [PATCH 4/4] chore: tweaks

---
 docs/config/app-configs.md             | 23 +++++++++--------------
 src/node/markdown/markdown.ts          |  5 +----
 src/node/markdown/plugins/highlight.ts | 18 ++++++++----------
 3 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md
index 19983a8a87b5..b9e3be6d498d 100644
--- a/docs/config/app-configs.md
+++ b/docs/config/app-configs.md
@@ -109,21 +109,18 @@ export default {
 }
 ```
 
-Below shows the the full option you may define within this object.
+Below are all the options that you can have in this object:
 
 ```ts
 interface MarkdownOptions extends MarkdownIt.Options {
-  // Syntax highlight theme for Shiki.
-  // You can use an existing theme. See:
-  // https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
-  // Or add your own theme. See:
-  // https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
+  // Custom theme for syntax highlighting.
+  // You can use an existing theme.
+  // See: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
+  // Or add your own theme.
+  // See: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
   theme?:
     | Shiki.IThemeRegistration
-    | {
-        light: Shiki.IThemeRegistration,
-        dark: Shiki.IThemeRegistration
-      };
+    | { light: Shiki.IThemeRegistration; dark: Shiki.IThemeRegistration }
 
   // Enable line numbers in code block.
   lineNumbers?: boolean
@@ -144,11 +141,10 @@ interface MarkdownOptions extends MarkdownIt.Options {
   }
 
   // markdown-it-toc-done-right plugin options
-  // https://github.com/nagaozen/markdown-it-toc-done-right
+  // See: https://github.com/nagaozen/markdown-it-toc-done-right
   toc?: any
 
-  // Configure the Markdown-it instance to fully customize
-  // how it works.
+  // Configure the Markdown-it instance.
   config?: (md: MarkdownIt) => void
 }
 ```
@@ -180,4 +176,3 @@ export default {
   titleTemplate: 'Vite & Vue powered static site generator'
 }
 ```
-
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
index 3a9e516c22f6..4b43918d8c81 100644
--- a/src/node/markdown/markdown.ts
+++ b/src/node/markdown/markdown.ts
@@ -21,10 +21,7 @@ import toc from 'markdown-it-toc-done-right'
 
 export type ThemeOptions =
   | IThemeRegistration
-  | {
-      light: IThemeRegistration
-      dark: IThemeRegistration
-    }
+  | { light: IThemeRegistration; dark: IThemeRegistration }
 
 export interface MarkdownOptions extends MarkdownIt.Options {
   lineNumbers?: boolean
diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts
index d142d2a8efea..5b1d0e144d69 100644
--- a/src/node/markdown/plugins/highlight.ts
+++ b/src/node/markdown/plugins/highlight.ts
@@ -2,21 +2,19 @@ import { IThemeRegistration, getHighlighter } from 'shiki'
 import type { ThemeOptions } from '../markdown'
 
 export async function highlight(theme: ThemeOptions = 'material-palenight') {
-  const hasMultipleThemes =
-    typeof theme !== 'string' && 'dark' in theme && 'light' in theme
-  const themes: IThemeRegistration[] = hasMultipleThemes
-    ? [theme.dark, theme.light]
-    : [theme]
-  const highlighter = await getHighlighter({ themes })
+  const hasSingleTheme = typeof theme === 'string' || 'name' in theme
+  const getThemeName = (themeValue: IThemeRegistration) =>
+    typeof themeValue === 'string' ? themeValue : themeValue.name
+
+  const highlighter = await getHighlighter({
+    themes: hasSingleTheme ? [theme] : [theme.dark, theme.light]
+  })
   const preRE = /^/
 
   return (str: string, lang: string) => {
     lang = lang || 'text'
 
-    const getThemeName = (themeValue: IThemeRegistration) =>
-      typeof themeValue === 'string' ? themeValue : themeValue.name
-
-    if (!hasMultipleThemes) {
+    if (hasSingleTheme) {
       return highlighter
         .codeToHtml(str, { lang, theme: getThemeName(theme) })
         .replace(preRE, '
')