feat: allow HTML in TOC (#473)

Co-authored-by: Tony CABAYE <tony.cabaye@smile.fr>
slidevjs · Feb 8, 2022 · f332669 · f332669
1 parent 209dd41
commit f332669
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/client/builtin/TocList.vue b/packages/client/builtin/TocList.vue
@@ -18,8 +18,7 @@ withDefaults(defineProps<{
 <template>
   <ul v-if="list && list.length > 0" :class="['slidev-toc-list', `slidev-toc-list-level-${level}`]">
     <li v-for="item in list" :key="item.path" :class="['slidev-toc-item', {'slidev-toc-item-active': item.active}, {'slidev-toc-item-parent-active': item.activeParent}]">
-      <RouterLink :to="item.path">
-        {{ item.title }}
+      <RouterLink :to="item.path" v-html="item.title">
       </RouterLink>
       <TocList :level="level + 1" :list="item.children" />
     </li>

diff --git a/packages/parser/src/fs.ts b/packages/parser/src/fs.ts
@@ -1,9 +1,12 @@
 import { promises as fs } from 'fs'
 import { dirname, resolve } from 'path'
 import type { SlideInfoWithPath, SlidevMarkdown, SlidevThemeMeta } from '@slidev/types'
+import Markdown from 'markdown-it'
 import { detectFeatures, mergeFeatureFlags, parse, parseSlide, stringify, stringifySlide } from './core'
 export * from './core'
 
+const md = Markdown({ html: true })
+
 export async function load(filepath: string, themeMeta?: SlidevThemeMeta, content?: string) {
   const dir = dirname(filepath)
   const markdown = content ?? await fs.readFile(filepath, 'utf-8')
@@ -15,6 +18,9 @@ export async function load(filepath: string, themeMeta?: SlidevThemeMeta, conten
   ])
 
   for (const slide of data.slides) {
+    if (slide.title)
+      slide.title = md.render(slide.title).trim().replace(/^<p>/, '').replace(/<\/p>$/, '')
+
     if (!slide.frontmatter.src)
       continue