diff --git a/docs/features/typst.md b/docs/features/typst.md
new file mode 100644
index 0000000000..434413d0ad
--- /dev/null
+++ b/docs/features/typst.md
@@ -0,0 +1,77 @@
+---
+relates:
+ - Typst: https://typst.app/
+tags: [codeblock, syntax]
+description: |
+ Slidev supports Typst as an alternative to KaTeX for formula rendering.
+---
+
+# Typst
+
+Slidev supports [Typst](https://typst.app/) as an alternative to KaTeX for formula rendering.
+
+## Setup
+
+To use Typst as your formula renderer, add the following to your frontmatter:
+
+```yaml
+---
+formulaRenderer: typst
+---
+```
+
+## Inline
+
+Surround your Typst formula 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.
+
+```typst
+$$
+\begin{aligned}
+\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
+\nabla \cdot \vec{B} &= 0 \\
+\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
+\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
+\end{aligned}
+$$
+```
+
+## Line Highlighting
+
+To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1 by default.
+
+```typst
+$$ {1|3|all}
+\begin{aligned}
+\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
+\nabla \cdot \vec{B} &= 0 \\
+\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
+\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
+\end{aligned}
+$$
+```
+
+The `at` and `finally` options of [code blocks](/features/line-highlighting) are also available for Typst blocks.
+
+## Why Typst?
+
+Typst is a modern typesetting system designed as an alternative to LaTeX. It offers:
+
+- More concise syntax than LaTeX
+- Better package manager support
+- Powerful math formula typesetting
+- Ability to use third-party packages for tasks like plotting and drawing vector graphics
+
+This makes Typst particularly useful for those who are already documenting with Typst and want a consistent experience in their presentations.
+
+## Implementation
+
+Slidev's Typst support is powered by [Typst.ts](https://github.com/Myriad-Dreamin/typst.ts), which brings Typst to the JavaScript world, making it easy to render Typst source code to SVG or HTML in both server-side and client-side environments.
\ No newline at end of file
diff --git a/packages/client/builtin/TypstBlockWrapper.vue b/packages/client/builtin/TypstBlockWrapper.vue
new file mode 100644
index 0000000000..80e8861bcf
--- /dev/null
+++ b/packages/client/builtin/TypstBlockWrapper.vue
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/client/builtin/TypstRenderer.vue b/packages/client/builtin/TypstRenderer.vue
new file mode 100644
index 0000000000..95cef301ec
--- /dev/null
+++ b/packages/client/builtin/TypstRenderer.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
Loading...
+
{{ formula }}
+
+
${latex}
`
+ }
+ catch (error) {
+ if (options.throwOnError)
+ console.warn(error)
+ return latex
+ }
+ }
+
+ const blockRenderer = function (tokens: any, idx: number) {
+ return `${typstBlock(tokens[idx].content)}\n`
+ }
+
+ md.inline.ruler.after('escape', 'typst_inline', math_inline)
+ md.block.ruler.after('blockquote', 'typst_block', math_block, {
+ alt: ['paragraph', 'reference', 'blockquote', 'list'],
+ })
+ md.renderer.rules.typst_inline = inlineRenderer
+ md.renderer.rules.typst_block = blockRenderer
+}
\ No newline at end of file
diff --git a/packages/slidev/node/syntax/transform/index.ts b/packages/slidev/node/syntax/transform/index.ts
index e013370344..07b7b377d2 100644
--- a/packages/slidev/node/syntax/transform/index.ts
+++ b/packages/slidev/node/syntax/transform/index.ts
@@ -1,8 +1,8 @@
-import type { MarkdownTransformer, ResolvedSlidevOptions } from '@slidev/types'
-import setupTransformers from '../../setups/transformers'
+import type { MarkdownTransformContext } from '@slidev/types'
import { transformCodeWrapper } from './code-wrapper'
-import { transformPageCSS } from './in-page-css'
+import { transformInPageCSS } from './in-page-css'
import { transformKaTexWrapper } from './katex-wrapper'
+import { transformTypstWrapper } from './typst-wrapper'
import { transformMagicMove } from './magic-move'
import { transformMermaid } from './mermaid'
import { transformMonaco } from './monaco'
@@ -10,27 +10,15 @@ import { transformPlantUml } from './plant-uml'
import { transformSlotSugar } from './slot-sugar'
import { transformSnippet } from './snippet'
-export async function getMarkdownTransformers(options: ResolvedSlidevOptions): Promise<(false | MarkdownTransformer)[]> {
- const extras = await setupTransformers(options.roots)
- return [
- ...extras.pre,
-
- transformSnippet,
- options.data.config.highlighter === 'shiki' && transformMagicMove,
-
- ...extras.preCodeblock,
-
- transformMermaid,
- transformPlantUml,
- options.data.features.monaco && transformMonaco,
-
- ...extras.postCodeblock,
-
- transformCodeWrapper,
- options.data.features.katex && transformKaTexWrapper,
- transformPageCSS,
- transformSlotSugar,
-
- ...extras.post,
- ]
-}
+export function transformMarkdown(ctx: MarkdownTransformContext) {
+ transformCodeWrapper(ctx)
+ transformInPageCSS(ctx)
+ transformKaTexWrapper(ctx)
+ transformTypstWrapper(ctx)
+ transformMagicMove(ctx)
+ transformMermaid(ctx)
+ transformMonaco(ctx)
+ transformPlantUml(ctx)
+ transformSlotSugar(ctx)
+ transformSnippet(ctx)
+}
\ No newline at end of file
diff --git a/packages/slidev/node/syntax/transform/katex-wrapper.ts b/packages/slidev/node/syntax/transform/katex-wrapper.ts
index a51e7050b8..f262941e7c 100644
--- a/packages/slidev/node/syntax/transform/katex-wrapper.ts
+++ b/packages/slidev/node/syntax/transform/katex-wrapper.ts
@@ -4,13 +4,17 @@ import type { MarkdownTransformContext } from '@slidev/types'
* Wrapper KaTex syntax `$$...$$` for highlighting
*/
export function transformKaTexWrapper(ctx: MarkdownTransformContext) {
+ // Only apply KaTeX wrapper if formulaRenderer is not set or set to 'katex'
+ if (ctx.frontmatter.formulaRenderer && ctx.frontmatter.formulaRenderer !== 'katex')
+ return
+
ctx.s.replace(
- /^\$\$(?:\s*\{([\w*,|-]+)\}\s*?(?:(\{[^}]*\})\s*?)?)?\n(\S[\s\S]*?)^\$\$/gm,
+ /^\$\$(?:\s*\{([\w*,|-]+)\}\s*?(?:(\{[^}]*\})\s*?)?)?\\n(\S[\s\S]*?)^\$\$/gm,
(full, rangeStr: string = '', options = '', code: string) => {
const ranges = !rangeStr.trim() ? [] : rangeStr.trim().split(/\|/g).map(i => i.trim())
code = code.trimEnd()
options = options.trim() || '{}'
- return `\n\n\$\$\n${code}\n\$\$\n\n`
+ return `\\n\\n\$\$\\n${code}\\n\$\$\\n\\n`
},
)
-}
+}
\ No newline at end of file
diff --git a/packages/slidev/node/syntax/transform/typst-wrapper.ts b/packages/slidev/node/syntax/transform/typst-wrapper.ts
new file mode 100644
index 0000000000..058fd17fec
--- /dev/null
+++ b/packages/slidev/node/syntax/transform/typst-wrapper.ts
@@ -0,0 +1,16 @@
+import type { MarkdownTransformContext } from '@slidev/types'
+
+/**
+ * Wrapper Typst syntax `$$...$$` for highlighting
+ */
+export function transformTypstWrapper(ctx: MarkdownTransformContext) {
+ ctx.s.replace(
+ /^\\$\\$(?:\\s*\\{([\\w*,|-]+)\\}\\s*?(?:(\\{[^}]*\\})\\s*?)?)?\\n(\\S[\\s\\S]*?)^\\$\\$/gm,
+ (full, rangeStr: string = '', options = '', code: string) => {
+ const ranges = !rangeStr.trim() ? [] : rangeStr.trim().split(/\\|/g).map(i => i.trim())
+ code = code.trimEnd()
+ options = options.trim() || '{}'
+ return `\\n\\n\\$\\$\\n${code}\\n\\$\\$\\n\\n`
+ },
+ )
+}
\ No newline at end of file
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index fbe4dbdc11..1d6a5b2323 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -36,3 +36,7 @@ export interface ResolvedExportOptions extends Omit
shikiOptions: MarkdownItShikiOptions
katexOptions: KatexOptions | null
+ typstOptions: Record | null
+ formulaRenderer: 'katex' | 'typst'
indexHtml: string
define: Record
iconsResolvePath: string[]
@@ -72,4 +75,4 @@ export interface SlidevServerOptions {
* @returns `false` if server should be restarted
*/
loadData?: (loadedSource: Record) => Promise
-}
+}
\ No newline at end of file