feat: add markdown footnote support (#264)

slidevjs · Jun 21, 2021 · 486cce9 · 486cce9
1 parent bc671eb
commit 486cce9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/packages/create-app/template/slides.md b/packages/create-app/template/slides.md
@@ -101,9 +101,7 @@ image: https://source.unsplash.com/collection/94734566/1920x1080
 
 # Code
 
-Use code snippets and get the highlighting directly!
-
-<!-- https://sli.dev/guide/syntax.html#line-highlighting -->
+Use code snippets and get the highlighting directly[^1]!
 
 ```ts {all|2|1-6|9|all}
 interface User {
@@ -122,6 +120,17 @@ function updateUser(id: number, update: User) {
 
 <arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" />
 
+[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)
+
+<style>
+.footnotes-sep {
+  margin-top: 3em;
+}
+.footnote-backref {
+  display: none
+}
+</style>
+
 ---
 
 # Components

diff --git a/packages/slidev/node/plugins/markdown.ts b/packages/slidev/node/plugins/markdown.ts
@@ -4,6 +4,8 @@ import base64 from 'js-base64'
 import { slash } from '@antfu/utils'
 // @ts-expect-error
 import mila from 'markdown-it-link-attributes'
+// @ts-expect-error
+import mif from 'markdown-it-footnote'
 import type { KatexOptions } from 'katex'
 import type MarkdownIt from 'markdown-it'
 import type { ShikiOptions } from '@slidev/types'
@@ -59,6 +61,8 @@ export async function createMarkdownPlugin(
         },
       })
 
+      md.use(mif)
+
       md.use(Katex, KatexOptions)
 
       setups.forEach(i => i(md))

diff --git a/packages/slidev/package.json b/packages/slidev/package.json
@@ -68,6 +68,7 @@
     "katex": "^0.13.11",
     "kolorist": "^1.4.1",
     "markdown-it": "^12.0.6",
+    "markdown-it-footnote": "^3.0.3",
     "markdown-it-link-attributes": "^3.0.0",
     "monaco-editor": "^0.24.0",
     "nanoid": "^3.1.23",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml