Introduction to Typst

Typst is a modern typesetting system, similar to LaTeX, but designed to be more concise and easier to learn. It is primarily used to create beautifully typeset documents such as academic papers, books, and reports.

You can find the official English documentation here: Typst Document
For a Chinese tutorial on Typst, I highly recommend: The Typst Blue Book
[Oh my, the author is clearly aware that they're explaining an ontology!].


Typst

🔥has risen!🔥




🚀Did the TeX folks miss the memo?🚀


The rest of this section will introduce Typst & HTML → Typsite

1 Typst’s HTML Export Feature

In version 0.13 0.13 , Typst added HTML export capabilities, including an html-export mode and two core functions: html.elem html.elem and html.frame html.frame — using these, we can write Typst documents targeting HTML+CSS output.

2 Typsite: A Static Site Generator Based on Typst

Inspired by this, I developed a static site generator in Rust called Typsite.

Currently, Typst’s HTML export:

  • Has good support for basic rich text
  • Requires users to manually write complex styles using the html.elem html.elem function
  • Cannot automatically convert all Typst ecosystem content into HTML
  • For content with complex Typst styles, html.frame html.frame can be used to convert them into SVG and embed them into HTML
  • Only supports single-file HTML output per compilation

For details on supported features and the roadmap, follow this issue: HTML export #5512

Although the official team plans to support automatic typst style → HTML+CSS in the future, this won’t conflict with Typsite. On the contrary, Typst’s development will make Typsite even more useful, because Typsite’s main role is to coordinate interaction between articles and ultimately build a fully functional static website.

Backlinks

Content Example [example]

1 Beautiful Things

This is a regular paragraph of text.

This is

Typst

🔥has risen! 🔥

🚀Did the TeX folks miss the memo?🚀


|-> Typst


My Treant is gone! 1


Blockquote with a nice font:

Typst is a modern typesetting system, similar to LaTeX, but designed to be more concise and easier to learn. It is primarily used to create beautifully typeset documents such as academic papers, books, and reports.

You can find the official English documentation here: Typst Document
For a Chinese tutorial on Typst, I highly recommend: The Typst Blue Book
[Oh my, the author is clearly aware that they're explaining an ontology!].


Math time!

ker𝜏={[𝑥]𝑈𝑉/𝑈|[𝑥]𝑊=[0]𝑊}={[𝑥]𝑈𝑉/𝑈|𝑥𝑊}

Section footnote:

1The Iron Tree Treant of the Nature Prophet may have left us forever… in the 7.39b gameplay update.

2 Fun Things

Click me to jump to a magical place.

Click me to jump to Rise Up!

Click me to see some good stuff [ Haha, NEVER GONNA GIVE U UP ]

3 Nice Music

Another One Bites the Dust 2

4 Magical Place

Citation: I can customize citation block content or I can also just cite the article title directly: Introduction to Typst

I can even embed a whole page!

⬇️ I can also treat embedded content as a section with a specific heading level!

4.1  Introduction to Typst [typst]

Typst is a modern typesetting system, similar to LaTeX, but designed to be more concise and easier to learn. It is primarily used to create beautifully typeset documents such as academic papers, books, and reports.

You can find the official English documentation here: Typst Document
For a Chinese tutorial on Typst, I highly recommend: The Typst Blue Book
[Oh my, the author is clearly aware that they're explaining an ontology!].


Typst

🔥has risen!🔥




🚀Did the TeX folks miss the memo?🚀


The rest of this section will introduce Typst & HTML → Typsite

4.1.1 Typst’s HTML Export Feature

In version 0.13 0.13 , Typst added HTML export capabilities, including an html-export mode and two core functions: html.elem html.elem and html.frame html.frame — using these, we can write Typst documents targeting HTML+CSS output.

4.1.2 Typsite: A Static Site Generator Based on Typst

Inspired by this, I developed a static site generator in Rust called Typsite.

Currently, Typst’s HTML export:

  • Has good support for basic rich text
  • Requires users to manually write complex styles using the html.elem html.elem function
  • Cannot automatically convert all Typst ecosystem content into HTML
  • For content with complex Typst styles, html.frame html.frame can be used to convert them into SVG and embed them into HTML
  • Only supports single-file HTML output per compilation

For details on supported features and the roadmap, follow this issue: HTML export #5512

Although the official team plans to support automatic typst style → HTML+CSS in the future, this won’t conflict with Typsite. On the contrary, Typst’s development will make Typsite even more useful, because Typsite’s main role is to coordinate interaction between articles and ultimately build a fully functional static website.

4.2 RUUUST
fn main() {
    let f: fn(&'static str) -> usize = |s| unsafe {
        *s.as_ptr().offset(1) as usize & 0xFF
    };
    println!("{}", (0..5).map(|i| f("hello") ^ i).fold(0, |a, b| a ^ b));
}
fn main() {
    let f: fn(&'static str) -> usize = |s| unsafe {
        *s.as_ptr().offset(1) as usize & 0xFF
    };
    println!("{}", (0..5).map(|i| f("hello") ^ i).fold(0, |a, b| a ^ b));
}
4.3 Typsite Flowchart