feat: support notes auto ruby

Author: antfu

docs/components.d.ts

@@ -1,8 +1,12 @@
 /* eslint-disable */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
+import { GlobalComponents } from 'vue'
+
 export {}
 
 /* prettier-ignore */
@@ -98,3 +102,95 @@ declare module 'vue' {
     Youtube: typeof import('./node_modules/@slidev/client/builtin/Youtube.vue')['default']
   }
 }
+
+// For TSX support
+declare global {
+  const AddonGallery: typeof import('./.vitepress/theme/components/AddonGallery.vue')['default']
+  const AddonInfo: typeof import('./.vitepress/theme/components/AddonInfo.vue')['default']
+  const Arrow: typeof import('./node_modules/@slidev/client/builtin/Arrow.vue')['default']
+  const AutoFitText: typeof import('./node_modules/@slidev/client/builtin/AutoFitText.vue')['default']
+  const 'Carbon:chevronLeft': typeof import('~icons/carbon/chevron-left')['default']
+  const 'Carbon:chevronRight': typeof import('~icons/carbon/chevron-right')['default']
+  const 'Carbon:close': typeof import('~icons/carbon/close')['default']
+  const 'Carbon:filterRemove': typeof import('~icons/carbon/filter-remove')['default']
+  const 'Carbon:logoGithub': typeof import('~icons/carbon/logo-github')['default']
+  const 'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
+  const 'Carbon:presentationFile': typeof import('~icons/carbon/presentation-file')['default']
+  const 'Carbon:reset': typeof import('~icons/carbon/reset')['default']
+  const 'Carbon:search': typeof import('~icons/carbon/search')['default']
+  const 'Carbon:tag': typeof import('~icons/carbon/tag')['default']
+  const 'Carbon:video': typeof import('~icons/carbon/video')['default']
+  const CarbonApps: typeof import('~icons/carbon/apps')['default']
+  const CarbonArrowLeft: typeof import('~icons/carbon/arrow-left')['default']
+  const CarbonArrowRight: typeof import('~icons/carbon/arrow-right')['default']
+  const CarbonBadge: typeof import('~icons/carbon/badge')['default']
+  const CarbonDocumentPdf: typeof import('~icons/carbon/document-pdf')['default']
+  const CarbonDownload: typeof import('~icons/carbon/download')['default']
+  const CarbonEdit: typeof import('~icons/carbon/edit')['default']
+  const CarbonInformation: typeof import('~icons/carbon/information')['default']
+  const CarbonListBoxes: typeof import('~icons/carbon/list-boxes')['default']
+  const CarbonMaximize: typeof import('~icons/carbon/maximize')['default']
+  const CarbonMinimize: typeof import('~icons/carbon/minimize')['default']
+  const CarbonMoon: typeof import('~icons/carbon/moon')['default']
+  const CarbonPen: typeof import('~icons/carbon/pen')['default']
+  const CarbonSettingsAdjust: typeof import('~icons/carbon/settings-adjust')['default']
+  const CarbonSun: typeof import('~icons/carbon/sun')['default']
+  const CarbonTextAnnotationToggle: typeof import('~icons/carbon/text-annotation-toggle')['default']
+  const CarbonUserAvatar: typeof import('~icons/carbon/user-avatar')['default']
+  const CarbonUserSpeaker: typeof import('~icons/carbon/user-speaker')['default']
+  const CarbonVideo: typeof import('~icons/carbon/video')['default']
+  const CodeBlockWrapper: typeof import('./node_modules/@slidev/client/builtin/CodeBlockWrapper.vue')['default']
+  const CodeGroup: typeof import('./node_modules/@slidev/client/builtin/CodeGroup.vue')['default']
+  const CodiconAdd: typeof import('~icons/codicon/add')['default']
+  const CodiconEye: typeof import('~icons/codicon/eye')['default']
+  const CodiconGlobe: typeof import('~icons/codicon/globe')['default']
+  const CodiconLock: typeof import('~icons/codicon/lock')['default']
+  const CodiconRunAll: typeof import('~icons/codicon/run-all')['default']
+  const Demo: typeof import('./.vitepress/theme/components/Demo.vue')['default']
+  const DemoEditor: typeof import('./.vitepress/theme/components/DemoEditor.vue')['default']
+  const DemoSlide: typeof import('./.vitepress/theme/components/DemoSlide.vue')['default']
+  const Environment: typeof import('./.vitepress/theme/components/Environment.vue')['default']
+  const FeaturesAnimation: typeof import('./.vitepress/theme/components/FeaturesAnimation.vue')['default']
+  const FeaturesAnimationInner: typeof import('./.vitepress/theme/components/FeaturesAnimationInner.vue')['default']
+  const FeaturesOverview: typeof import('./.vitepress/theme/components/FeaturesOverview.vue')['default']
+  const FeatureTag: typeof import('./.vitepress/theme/components/FeatureTag.vue')['default']
+  const KaTexBlockWrapper: typeof import('./node_modules/@slidev/client/builtin/KaTexBlockWrapper.vue')['default']
+  const LandingPage: typeof import('./.vitepress/theme/components/LandingPage.vue')['default']
+  const Layout: typeof import('./.vitepress/theme/components/Layout.vue')['default']
+  const LightOrDark: typeof import('./node_modules/@slidev/client/builtin/LightOrDark.vue')['default']
+  const Link: typeof import('./node_modules/@slidev/client/builtin/Link.vue')['default']
+  const LinkCard: typeof import('./.vitepress/theme/components/LinkCard.vue')['default']
+  const LinkInline: typeof import('./.vitepress/theme/components/LinkInline.vue')['default']
+  const LogosVue: typeof import('~icons/logos/vue')['default']
+  const MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
+  const Mermaid: typeof import('./node_modules/@slidev/client/builtin/Mermaid.vue')['default']
+  const Monaco: typeof import('./node_modules/@slidev/client/builtin/Monaco.vue')['default']
+  const PlantUml: typeof import('./node_modules/@slidev/client/builtin/PlantUml.vue')['default']
+  const PoweredBySlidev: typeof import('./node_modules/@slidev/client/builtin/PoweredBySlidev.vue')['default']
+  const RenderWhen: typeof import('./node_modules/@slidev/client/builtin/RenderWhen.vue')['default']
+  const RouterLink: typeof import('vue-router')['RouterLink']
+  const RouterView: typeof import('vue-router')['RouterView']
+  const SeeAlso: typeof import('./.vitepress/theme/components/SeeAlso.vue')['default']
+  const ShikiMagicMove: typeof import('./node_modules/@slidev/client/builtin/ShikiMagicMove.vue')['default']
+  const ShowCaseInfo: typeof import('./.vitepress/theme/components/ShowCaseInfo.vue')['default']
+  const ShowCases: typeof import('./.vitepress/theme/components/ShowCases.vue')['default']
+  const SimpleIconsGithub: typeof import('~icons/simple-icons/github')['default']
+  const SimpleIconsNpm: typeof import('~icons/simple-icons/npm')['default']
+  const SlideContainer: typeof import('./.vitepress/theme/components/SlideContainer.vue')['default']
+  const SlideCurrentNo: typeof import('./node_modules/@slidev/client/builtin/SlideCurrentNo.vue')['default']
+  const SlidesTotal: typeof import('./node_modules/@slidev/client/builtin/SlidesTotal.vue')['default']
+  const SlidevVideo: typeof import('./node_modules/@slidev/client/builtin/SlidevVideo.vue')['default']
+  const ThemeGallery: typeof import('./.vitepress/theme/components/ThemeGallery.vue')['default']
+  const ThemeInfo: typeof import('./.vitepress/theme/components/ThemeInfo.vue')['default']
+  const TheTweet: typeof import('./.vitepress/theme/components/TheTweet.vue')['default']
+  const Toc: typeof import('./node_modules/@slidev/client/builtin/Toc.vue')['default']
+  const TocList: typeof import('./node_modules/@slidev/client/builtin/TocList.vue')['default']
+  const Transform: typeof import('./node_modules/@slidev/client/builtin/Transform.vue')['default']
+  const Tweet: typeof import('./node_modules/@slidev/client/builtin/Tweet.vue')['default']
+  const TwemojiCatWithTearsOfJoy: typeof import('~icons/twemoji/cat-with-tears-of-joy')['default']
+  const UimRocket: typeof import('~icons/uim/rocket')['default']
+  const VClickGap: typeof import('./node_modules/@slidev/client/builtin/VClickGap.vue')['default']
+  const VDrag: typeof import('./node_modules/@slidev/client/builtin/VDrag.vue')['default']
+  const VDragArrow: typeof import('./node_modules/@slidev/client/builtin/VDragArrow.vue')['default']
+  const Youtube: typeof import('./node_modules/@slidev/client/builtin/Youtube.vue')['default']
+}

docs/features/notes-auto-ruby.md

@@ -0,0 +1,31 @@
+---
+tags: [notes, presenter]
+description: Automatically add `<ruby>` tags to your notes.
+---
+
+# Notes Auto Ruby
+
+> Available since v52.4.0
+
+When you write notes in your slides, you might want to add some ruby text to help pronouncing the some words. You can always add `<ruby>` tags to your notes manually, but Slidev also provides a convenient way to do this automatically by a global auto-replacement.
+
+In the headmatter, you can set the `notesAutoRuby` option to a map of words to their ruby text:
+
+```md
+---
+notesAutoRuby:
+  日本語: ni hon go
+  勉強: べんきょう
+---
+
+# Your slides here
+
+<!--
+私は日本語を勉強しています。
+-->
+```
+
+And the notes will be rendered as:
+
+<p>私は<ruby>日本語<rt>ni hon go</rt></ruby>を<ruby>勉強<rt>べんきょう</rt></ruby>しています。</p>
+

packages/client/constants.ts

@@ -84,4 +84,5 @@ export const HEADMATTER_FIELDS = [
   'contextMenu',
   'wakeLock',
   'seoMeta',
+  'notesAutoRuby',
 ]

packages/slidev/node/vite/loaders.ts

@@ -366,14 +366,35 @@ export function createSlidesLoader(
 
   function renderNote(text: string = '') {
     let clickCount = 0
-    const html = notesMd.render(text
-    // replace [click] marker with span
+    const notesAutoRuby: Record<string, string | undefined> = (data.headmatter as any).notesAutoRuby || {}
+
+    // Apply [click] marker
+    let md = text
+      // replace [click] marker with span
       .replace(/\[click(?::(\d+))?\]/gi, (_, count = 1) => {
         clickCount += Number(count)
         return `<span class="slidev-note-click-mark" data-clicks="${clickCount}"></span>`
-      }),
-    )
+      })
+
+    // Apply notesAutoRuby
+    const keys = Object.keys(notesAutoRuby)
+      .sort((b, a) => b.length - a.length)
+      // Add word boundaries to the keys when they are simple alphabets or numbers
+      .map(i => /^[\w-]+$/.test(i) ? `\\b${i}\\b` : i)
+
+    if (keys.length) {
+      const regex = new RegExp(`(${keys.join('|')})`, 'g')
+      md = md.replace(
+        regex,
+        (match) => {
+          if (notesAutoRuby[match])
+            return `<ruby>${match}<rt>${notesAutoRuby[match]}</rt></ruby>`
+          return match
+        },
+      )
+    }
 
+    const html = notesMd.render(md)
     return html
   }
 

packages/types/src/frontmatter.ts

@@ -270,6 +270,18 @@ export interface HeadmatterConfig extends TransitionOptions {
    * @default {}
    */
   seoMeta?: SeoMeta
+  /**
+   * Auto replace words with `<ruby>` tags in notes
+   *
+   * @default {}
+   *
+   * @example
+   * ```yaml
+   * notesAutoRuby:
+   *   大丈夫: だいじょうぶ
+   * ```
+   */
+  notesAutoRuby?: Record<string, string>
 }
 
 export interface Frontmatter extends TransitionOptions {

packages/vscode/schema/headmatter.json

@@ -511,6 +511,15 @@
           "markdownDescription": "Seo meta tags settings",
           "default": {}
         },
+        "notesAutoRuby": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "Auto replace words with `<ruby>` tags in notes",
+          "markdownDescription": "Auto replace words with `<ruby>` tags in notes",
+          "default": {}
+        },
         "defaults": {
           "$ref": "#/definitions/Frontmatter",
           "description": "Default frontmatter options applied to all slides",