Test Page

2026-03-05 #Miscellaneous

This document showcases Typst features and how they look in the current web template. The rendered result is shown above, and the code blocks below are the corresponding source code.

1. Fonts and Text Styling

Here we demonstrate bold, italic, underline, strikethrough, overline, superscript E=mc², subscript H₂O. Important content can be highlighted.

You can create paragraphs by leaving a blank line.

This is a new paragraph. You can add a line break by appending \ at the end of a line.
This is a new line.

Currently, #line() does not support HTML export, but you can use #html.hr() to add a horizontal divider.

To display special characters, escape them: * _ # $ @

The site’s visual appearance is controlled by CSS, so you currently cannot directly change text styles in Typst, such as color, size. If you want to customize them, add your own CSS rules in assets/custom.css.

You currently cannot directly change text styles in Typst, such as #text(fill: blue)[color], #text(size: 14pt)[size].

2. Headings

The “Typst Example” at the top is a level-1 heading, and “2. Headings” is a level-2 heading.

Level 3

Level 4

=== Level 3
==== Level 4

3. Links

You can use #link() to add links, for example:

• This is a link to an external webpage.
• This is also an external link.

• You can also link to other pages or resources on this site, for example:

  • And this links to this site.

4. Lists

Here is an example of mixed lists:

• Unordered item 1

• Unordered item 2

  • Indented levels are supported

    • Indent further

  1. You can insert an ordered list inside an unordered list

     Add a paragraph at the current nesting level

1. Ordered item 1

2. Ordered item 2 (auto-numbered)

   1. Nested ordered item A

      • You can insert an unordered list inside an ordered list
   • Nested unordered item B

Term list

list items with names, useful for definitions.

Typst

A new markup-based typesetting system.

5. Margin Notes, Footnotes, and Bibliography

You can add margin content anywhere.

The most distinctive feature of the Tufte style is its wide margin layout: notes, references, and figures are displayed in the margin right next to the main text, replacing traditional footnotes or endnotes. This recreates a clear, immersive, side-by-side reading experience on screens. ¹¹ This is what the homepage of this site says.

You can use footnote() to add footnotes. They will automatically appear in the margin aligned with the main text, so readers don’t have to scroll to the end of the page. ²² Footnotes really interrupt reading! That’s also why I built this blog template with the Tufte style.

You can use margin-note() to place arbitrary unbroken margin content anywhere, e.g. an image, inline code, or inline math. ³³ box() can force content to stay in a single paragraph. ⬆️ This is a duck, this is inline code, and this is inline math .
This is a line break

6. Images

You can use figure() to add a caption for any content, especially images and tables. The caption will also appear in the margin.

Use image() to insert images. You can control size with width and height. For example, figure + image:

Figure 1: Another duck.

7. Tables

You can use table() to create a simple table:

A nicer option is the tablem package by @OrangeX4, which builds tables from a Markdown-like table syntax:

8. Code Blocks

Wrap code with ``` to insert a code block (with syntax highlighting). Like images and tables, you can also use figure() to add a caption. I customized the code block style and added line numbers and a copy button.

# Fibonacci function in Python
def fib(n):
    if n <= 1: return n
    return fib(n-1) + fib(n-2)

fn main() {
    println!("Typst is written in Rust.");
}

9. Alignment, Columns, and Blocks

You can use the theorem package theorion by @OrangeX4 to create special block styles, for example:

10. Math

Typst uses $ $ to typeset math. Inline math is embedded in text, written with $ immediately followed by the formula, e.g. .

Block math occupies its own line. In this case there is a space between $ and the formula, e.g.

Fractions, roots, sums, and integrals:

Matrices and determinants:

Multi-line aligned equations:

Very long block equations (overflowing the screen width):

For more complex formulas and symbols, see the documentation.

11. Cross References

Typst supports cross references. You can label headings, figures, code blocks, etc., and reference them elsewhere.

Link to the “1. Fonts and Text Styling” section.
Link to the Listing 1 block.
Link to the Figure 1 figure.
Link to the “7. Tables” table.