Skip to content

Conversation

KHemanthRaju
Copy link

This PR adds support for Typst as an alternative to KaTeX for formula rendering in Slidev.

Features

  • Added a new formulaRenderer option in frontmatter to choose between 'katex' (default) and 'typst'
  • Implemented Typst.ts integration for rendering Typst formulas
  • Added line highlighting support for Typst formulas
  • Created documentation for Typst usage

Usage

To use Typst as the formula renderer, add this to your frontmatter:

---
formulaRenderer: typst
---

Copy link

netlify bot commented May 24, 2025

Deploy Preview for slidev failed.

Name Link
🔨 Latest commit dcd87de
🔍 Latest deploy log https://app.netlify.com/projects/slidev/deploys/6831922d4451b20008d374aa

@antfu
Copy link
Member

antfu commented May 26, 2025

There is already a community addons for that #2179, have you tried it? If it works well I don't think we need to have it builtin

@peekxc
Copy link

peekxc commented Oct 17, 2025

There is already a community addons for that #2179, have you tried it? If it works well I don't think we need to have it builtin

Well, to be clear these are different features. Consider this slide, which uses both typst and katex:

---
addons:
  - slidev-addon-typst
---

Given pair of graphs $(H, G)$, determine *if there exists* an injective map $f: V_H \to V_G$ satisfying: 

'''typst
$ (v,v') in E_H <==> (f(v), f(v')) in E_G $ 
'''

vs this slide, which would use typst exclusively via the proposed change:

---
formulaRenderer: typst
---

Given pair of graphs $(H, G)$, determine *if there exists* an injective map $f: V_H to V_G$ satisfying: 

$ (v,v') in E_H <==> (f(v), f(v')) in E_G $ 

Neither the typst plugin nor MDC apparently supports inline syntax, I don't see how to avoid using katex for inline changes, but this is unfavorable.

Copy link
Member

@antfu antfu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I am fine having it, but there are a few things need to be addressed before moving forward

__SLIDEV_FEATURE_BROWSER_EXPORTER__: matchMode(options.data.config.browserExporter),
__SLIDEV_FEATURE_WAKE_LOCK__: matchMode(options.data.config.wakeLock),
__SLIDEV_HAS_SERVER__: options.mode !== 'build',
__SLIDEV_FEATURE_TYPST__: options.data.headmatter.formulaRenderer === 'typst',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
__SLIDEV_FEATURE_TYPST__: options.data.headmatter.formulaRenderer === 'typst',
__SLIDEV_FEATURE_FORMULA_RENDERER__: options.data.headmatter.formulaRenderer,

Should it be something like this?

"@vueuse/motion": "^2.0.0",
"codemirror": "^5.65.16",
"defu": "^6.1.4",
"drauu": "^0.3.2",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you revert this change?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, since typst is a Rust-based tool which could be rather heavy, I think we should make it an optional peer dep and ask users to install it manually when they opt-in to this feature.

let can_open = true
let can_close = true

const prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have a markdown-it-typst plugin? I don't want to host this complexity here which would be hard for us to maintain

}
export function transformMarkdown(ctx: MarkdownTransformContext) {
transformCodeWrapper(ctx)
transformInPageCSS(ctx)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we change this?

@@ -0,0 +1,16 @@
.slidev-typst-wrapper .typst-line.highlighted {
}
.slidev-typst-wrapper .typst-line.dishonored {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this file duplicated?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants