feat: support latex, close #16

slidevjs · May 6, 2021 · 30587cb · 30587cb
1 parent d9b1717
commit 30587cb
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 3 deletions.
diff --git a/docs/guide/syntax.md b/docs/guide/syntax.md
@@ -161,3 +161,37 @@ This is the cover page.
 ```
 
 For more details about using a theme, refer to the [themes usage section](/themes/use).
+
+## LaTeX
+
+Slidev comes with LaTeX support out-of-box, powered by [KaTeX](https://katex.org/).
+
+### Inline
+
+Surround your LaTeX with a single `$` on each side for inline rendering.
+
+```md
+$\sqrt{3x-1}+(1+x)^2$
+```
+
+### Block
+
+Use two (`$$`) for block rendering. This mode uses bigger symbols and centers
+the result.
+
+```md
+$$
+\begin{array}{c}
+
+\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
+= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
+
+\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
+
+\nabla \cdot \vec{\mathbf{B}} & = 0
+
+\end{array}
+$$
+```
+
+Learn more: [KaTeX](https://katex.org/) | [`markdown-it-katex`](https://github.com/waylonflinn/markdown-it-katex).
diff --git a/packages/create-app/template/slides.md b/packages/create-app/template/slides.md
@@ -126,6 +126,33 @@ Check out [the guides](https://sli.dev/custom/#components) for more.
 </div>
 </div>
 
+---
+
+# LaTeX
+
+LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/).
+
+<br>
+
+Inline $\sqrt{3x-1}+(1+x)^2$
+
+Block
+$$
+\begin{array}{c}
+
+\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
+= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
+
+\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
+
+\nabla \cdot \vec{\mathbf{B}} & = 0
+
+\end{array}
+$$
+
+<br>
+
+[Learn more](https://sli.dev/guide/syntax#latex)
 
 ---
 class: px-20

diff --git a/packages/parser/src/core.ts b/packages/parser/src/core.ts
@@ -54,6 +54,14 @@ function matter(code: string) {
   return { data, content }
 }
 
+export function detectFeatures(code: string) {
+  return {
+    katex: !!code.match(/\$.*?\$/) || !!code.match(/$\$\$/),
+    monaco: !!code.match(/{monaco.*}/),
+    tweet: !!code.match(/<Tweet\b/),
+  }
+}
+
 export function parse(
   markdown: string,
   filepath?: string,
@@ -146,6 +154,7 @@ export function parse(
     filepath,
     slides,
     config,
+    features: detectFeatures(markdown),
   }
 }
 

diff --git a/packages/slidev/node/common.ts b/packages/slidev/node/common.ts
@@ -4,7 +4,7 @@ import { uniq } from '@antfu/utils'
 import { ResolvedSlidevOptions } from './options'
 import { toAtFS } from './utils'
 
-export async function getIndexHtml({ clientRoot, themeRoots }: ResolvedSlidevOptions): Promise<string> {
+export async function getIndexHtml({ clientRoot, themeRoots, data }: ResolvedSlidevOptions): Promise<string> {
   let main = await fs.readFile(join(clientRoot, 'index.html'), 'utf-8')
   let head = ''
   let body = ''
@@ -25,6 +25,12 @@ export async function getIndexHtml({ clientRoot, themeRoots }: ResolvedSlidevOpt
     body += `\n${(index.match(/<body>([\s\S]*?)<\/body>/im)?.[1] || '').trim()}`
   }
 
+  if (data.features.katex)
+    head += '\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">'
+
+  if (data.features.tweet)
+    body += '\n<script src="https://platform.twitter.com/widgets.js"></script>'
+
   main = main
     .replace('__ENTRY__', toAtFS(join(clientRoot, 'main.ts')))
     .replace('<!-- head -->', head)

diff --git a/packages/slidev/node/plugins/loaders.ts b/packages/slidev/node/plugins/loaders.ts
@@ -8,6 +8,7 @@ import Markdown from 'markdown-it'
 import mila from 'markdown-it-link-attributes'
 import { SlideInfo, SlideInfoExtended } from '@slidev/types'
 import * as parser from '@slidev/parser/fs'
+import equal from 'fast-deep-equal'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
 import { toAtFS } from '../utils'
 
@@ -128,9 +129,15 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRo
         if (data.slides.length !== newData.slides.length)
           moduleIds.push('/@slidev/routes')
 
-        if (JSON.stringify(data.config) !== JSON.stringify(newData.config))
+        if (!equal(data.config, newData.config))
           moduleIds.push('/@slidev/configs')
 
+        if (!equal(data.features, newData.features)) {
+          setTimeout(() => {
+            ctx.server.ws.send({ type: 'full-reload' })
+          }, 1)
+        }
+
         const length = Math.max(data.slides.length, newData.slides.length)
 
         for (let i = 0; i < length; i++) {
@@ -153,7 +160,7 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRo
 
         pluginOptions.onDataReload?.(newData, data)
 
-        data = newData
+        Object.assign(data, newData)
 
         moduleEntries.map(m => ctx.server.moduleGraph.invalidateModule(m))
         return moduleEntries

diff --git a/packages/slidev/node/plugins/markdown.ts b/packages/slidev/node/plugins/markdown.ts
@@ -6,6 +6,8 @@ import type { ShikiOptions } from '@slidev/types'
 import type MarkdownIt from 'markdown-it'
 import base64 from 'js-base64'
 import { isTruthy } from '@antfu/utils'
+// @ts-expect-error
+import Katex from 'markdown-it-katex'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
 import { loadSetups } from './setupNode'
 import Prism from './markdown-it-prism'
@@ -52,6 +54,8 @@ export async function createMarkdownPlugin(
         },
       })
 
+      md.use(Katex)
+
       setups.forEach(i => i(md))
     },
     transforms: {

diff --git a/packages/slidev/node/plugins/preset.ts b/packages/slidev/node/plugins/preset.ts
@@ -16,6 +16,24 @@ import { createMarkdownPlugin } from './markdown'
 import { createWindiCSSPlugin } from './windicss'
 import { createFixPlugins } from './fix'
 
+const customElements = new Set([
+  // katex
+  'annotation',
+  'math',
+  'mrow',
+  'mcol',
+  'mfrac',
+  'mi',
+  'mn',
+  'mo',
+  'mover',
+  'mspace',
+  'mtable',
+  'mtd',
+  'mtr',
+  'semantics',
+])
+
 export async function ViteSlidevPlugin(
   options: ResolvedSlidevOptions,
   pluginOptions: SlidevPluginOptions,
@@ -40,6 +58,13 @@ export async function ViteSlidevPlugin(
     Vue({
       include: [/\.vue$/, /\.md$/],
       exclude: [],
+      template: {
+        compilerOptions: {
+          isCustomElement(tag) {
+            return customElements.has(tag)
+          },
+        },
+      },
       ...vueOptions,
     }),
 

diff --git a/packages/slidev/package.json b/packages/slidev/package.json
@@ -64,6 +64,7 @@
     "js-yaml": "^3.14.1",
     "kolorist": "^1.4.1",
     "markdown-it": "^12.0.6",
+    "markdown-it-katex": "^2.0.3",
     "markdown-it-link-attributes": "^3.0.0",
     "monaco-editor": "^0.23.0",
     "pdf-lib": "^1.16.0",
@@ -80,5 +81,8 @@
     "vue": "^3.0.11",
     "windicss": "^3.0.0-beta.5",
     "yargs": "^17.0.1"
+  },
+  "devDependencies": {
+    "fast-deep-equal": "^3.1.3"
   }
 }
diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
@@ -44,9 +44,16 @@ export interface SlidevConfig {
   highlighter: 'prism' | 'shiki'
 }
 
+export interface SlidevFeatureFlags {
+  katex: boolean
+  monaco: boolean
+  tweet: boolean
+}
+
 export interface SlidevMarkdown {
   filepath?: string
   slides: SlideInfo[]
   raw: string
   config: SlidevConfig
+  features: SlidevFeatureFlags
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml