Authoring

This section will cover specific authoring details when using Haita. Please refer to https://typst.app/docs/tutorial/ and https://typst.app/docs/reference/syntax/ for Typst reference.

Cross-references

You can reference different content using the following syntax:

// This attaches a `label` to the figure
#figure(..) <my-listing>

See @my-listing for an example.
See #link(<my-listing>)[This listing]

Listing 3: Reference syntax

In addition, you can reference different pages using label("page:/path/to/page"). See https://typst.app/docs/reference/foundations/label/ for additional information on labels. You can write the following to create a link to a different page:

#link(label("page:/path/to/page"))[See this page for help]

You can even create a reference to an HTML element:

#context if target() == "html" [
  #html.section[Foo bar baz] <foobar>
]
// somewhere else in the document
#context if target() == "html" [
  #link(<foobar>)[This section] explains.
]

You may reference a label located in one page from the same page or from a different page.

Contextual Output And Embedding HTML

You can write different content for different targets, for example, embedding a link to a page via iframe in the HTML target. In addition, Typst provides a typed interface for HTML elements. Custom HTML elements may be embedded using html.elem()

#context if target() == "html" {
  // target IS HTML. Write some HTML specific stuff
  html.elem(..)
  html.iframe(..)
  // or import the entire html interface
  import html: *
  div(..)
} else {
  // target IS NOT HTML. It is instead "paged", which is for PDF, PNG and SVG.
  // Write some PDF specific stuff
  curve(..)
}

Please always keep HTML specific content in the context if target() == "html" {..} block. HTML elems will not work when using PDF export.

You are currently looking at the HTML target. The default theme “New Hamber” is inspired by Documenter.jl’s “Documenter” theme, which is based on sphinx’s sphinx_rtd_theme.

Video 2: Watch something ★funky★

#let youtube-video-player = html.iframe.with(
  class: "w-full aspect-video",
  title: "YouTube video player",
  allow: {
    "accelerometer; autoplay; clipboard-write; encrypted-media;"
    " gyroscope; picture-in-picture; web-share"
  },
  referrerpolicy: "strict-origin-when-cross-origin",
  allowfullscreen: true,
)

#figure(
  supplement: "Video",
  caption: [Watch something ★funky★],
  youtube-video-player(
    src: "https://www.youtube-nocookie.com/embed/rl7ppuXMfC8",
  ),
)

Listing 4: Source code for the video player above.

Copyable Math Blocks

Haita provides an extension to standard Typst to make math blocks copyable as Typst source. This extension only works for math blocks, and does not work for inline math such as $𝑎^{2} + 𝑏^{2} = 𝑐^{2}$ . Typically, math blocks are written as follows:

$
  f(x) = integral^oo_oo hat(f)(xi)e^(2pi i xi x) dif xi
$

This will be rendered as follows. Notice how the math block’s source cannot be copied:

𝑓 (𝑥) = \int_{\infty}^{\infty} \hat{𝑓} (𝜉) 𝑒^{2 𝜋 𝑖 𝜉 𝑥} d 𝜉

Instead, you can remove the $ $ and wrap your text in the typm-copy code block. Haita will extract the text from the code block, evaluate it, and render a math block with a copy button. Additionally, you can also hover on the math block to reveal a tooltip for the Typst source:

```typm-copy
f(x) = integral^oo_oo hat(f)(xi)e^(2pi i xi x) dif xi
```

𝑓 (𝑥) = \int_{\infty}^{\infty} \hat{𝑓} (𝜉) 𝑒^{2 𝜋 𝑖 𝜉 𝑥} d 𝜉

Note that writing inside raw blocks won’t give you LSP completions. In this case, you can first write the math formula in a standard $ $ , then remove the dollar sign and wrap it in the code block. You may not reference any outside variables when writing in this way. For example, the following snippet would not work at all since the math block relies on a method that is not defined in Typst’s standard library:

#let my-method(foo) = math.attach(foo, tr: foo)
// this works
$
  #my-method[8848.86]
$
// but this is borked
// ```typm-copy
// #my-method[8848.86]
// ```

{8848.86}^{8848.86}