1#import "/src/contents/_lib/lib.typ" as kp
  2#show: kp.post-template
  3
  4#metadata(
  5  (
  6    title: "Typst Syntax",
  7    author: "HPCesia",
  8    desc: "Showing what you can do with Typst in Kerplunk.",
  9    date: datetime(
 10      year: 2025,
 11      month: 7,
 12      day: 15,
 13    ),
 14  ),
 15)<frontmatter>
 16
 17This is not a reference to Typst syntax, see #link("https://typst.app/docs/reference/")[Typst Reference]
 18for that. This is a demonstration of what you can do with Typst syntax in Kerplunk.
 19Current Typst version: #sys.version
 20
 21= Basic Text
 22
 23This is a normal text. You can make it _italic_ or *bold*. You can also make it
 24_*both*_. And #underline[underlined], #strike[strikethrough], #overline[overlined]
 25are also supported. Why not #highlight[make it highlighted]?
 26
 27Left a blank line to start a new paragraph.\
 28Insert `\` to break a line without starting a new paragraph.
 29
 30Some characters need to be escaped, such as \#, \*, \_, \`, \\,
 31as they are #link("https://typst.app/docs/reference/syntax/#markup")[markup] characters.
 32
 33Unfortunately, you can't change the font family, size and color inside Typst,
 34they are determined by CSS in Kerplunk.
 35
 36= Links<heading:links>
 37
 38Links can be created using the ```typ #link(target, content)```#footnote[
 39  Or ```typ #link(target)[content]```, this is a syntactic sugar
 40  for the special case of first form: ```typ #link(target, [content])```.
 41] function.
 42The first argument is the URL, and the second argument is the text to display.
 43
 44Target can be a URL, like #link("https://github.com/torvalds/linux")[source of Linux]
 45or #link("/")[home page]. Typst label an be also a target, like
 46#link(label("heading:links"))[this section].
 47
 48See more imformation about links in
 49#link("https://typst.app/docs/reference/model/link/")[Typst Reference: link].
 50
 51= Blockquotes
 52
 53Use ```typ #quote(block: true, attribution: "Author Name")[Content]``` to create
 54a blockquote with attribution.
 55
 56#quote(block: true, attribution: [Robert A. Heinlein])[
 57  A human being should be able to change a diaper, plan an invasion, butcher a
 58  hog, conn a ship, design a building, write a sonnet, balance accounts, build a
 59  wall, set a bone, comfort the dying, take orders, give orders, cooperate, act
 60  alone, solve equations, analyse a new problem, pitch manure, program a computer,
 61  cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects.
 62]
 63
 64= Raw Blocks
 65
 66This is an inline raw block `println!("Hello, world!");`.
 67
 68This is an inline syntax-highlighted raw block ```rust println!("Hello, world!");```.
 69
 70This is a long inline raw block
 71```css @media(prefers-color-scheme:dark){:root{background-color:var(--color-neutral-900);color:var(--color-neutral-300)}}```.
 72
 73Js syntax highlight are handled by syntect:
 74
 75```js
 76class T {
 77  constructor() {
 78    console.log("Hello, world!");
 79  }
 80}
 81```
 82
 83Typst syntax hightlight are specially handled internally:
 84
 85```typ
 86#let fn(x) = x
 87```
 88
 89= Equations
 90
 91This is an inline equation $E = m c^2$.
 92
 93This is a display equation:
 94$
 95  integral_(0)^(+infinity) (ln x) / (x^2 - 1) dif x = 1/2integral_(x > 0) integral_(y>0) (dif x dif y) / ((1+y)(1+x^2 y)) = pi^2 / 4.
 96$
 97
 98= Tables
 99
100Create a table using the ```typ #table()``` function. See more information about
101tables in #link("https://typst.app/docs/reference/model/table/")[Typst Reference: Table Function].
102
103#figure(
104  table(
105    columns: 4,
106    table.header([Framework], [Language], [License], [Description]),
107    [Astro],
108    [TypeScript],
109    [MIT],
110    [The web framework for content-driven websites.],
111
112    [Eleventy], [JavaScript], [MIT], [A simpler site generator.],
113    [Hugo],
114    [Go],
115    [Apache-2.0],
116    [The world’s fastest framework for building websites.],
117
118    [Zola],
119    [Rust],
120    [MIT / EUPL-1.2],
121    [A static site generator in a single binary.],
122
123    table.footer([Test1], [Test2], [Test3], [Test4]),
124  ),
125  caption: [Comparison of static site generators],
126)
127
128Prefer to Markdown tables? A Typst package #link("https://typst.app/universe/package/tablem")[tablem]
129can help you with that.
130
131#{
132  import "@preview/tablem:0.3.0": tablem
133  tablem[
134    | Name  | Location   | Height | Score |
135    | ----- | ---------- | ------ | ----- |
136    | John  | Second St. | 180 cm | 5     |
137    | Wally | Third Av.  | 160 cm | 10    |
138  ]
139}
140
141= Lists
142
143- An unordered list here
144- You can use `-` to start a unordered list item.
145
146+ An ordered list here
147+ You can use `+` to start a ordered list item, and the number will be automatically
148  generated.
1496. You can also use numbers to specify the order.
150+ After a specified order item, the next item will continue the order you specified.
151
152/ Term: A word or expression that has a precise meaning in some uses or is peculiar
153  to a science, art, profession, or subject. Here is a list of terms.
154/ SVG: #[*S*]calable #[*V*]ector #[*G*]raphics, an XML-based markup language for
155  describing two-dimensional based vector graphics.
156/ XML: E#[*X*]tensible #[*M*]arkup #[*L*]anguage, a strict serialization of the DOM.
157/ DOM: #[*D*]ocument #[*O*]bject #[*M*]odel, connects web pages to scripts or
158  programming languages by representing the structure of a document.
159/ HTML: #[*H*]yper#[*T*]ext #[*M*]arkup #[*L*]anguage, a standard for structuring
160  web content.
161/ URL: #[*U*]niform #[*R*]esource #[*L*]ocator, a text string that specifies where
162  a resource can be found on the Internet.
163
164= Images
165
166Pass a `path` value or a root-absolute string to ```typ #kp.img()``` and Astro's
167```jsx <Image />``` component optimizes the image.
168
169#figure(
170  kp.img(
171    path("../avatar.png"),
172    alt: "HPCesia, author of Kerplunk's avatar",
173    width: 30%,
174  ),
175  caption: [An image optimized by Astro.],
176)
177
178Or just use Typst's original ```typ #image()``` function to avoid Astro's optimization.
179For web image, use ```typ #html.img()``` instead.
180
181Images that can't be imported as a file are extracted to `/_typst/` at build time.
182
183#figure(
184  image(
185    read("../avatar.png", encoding: none),
186    alt: "HPCesia, author of Kerplunk's avatar",
187    width: 30%,
188  ),
189  caption: [An image built from bytes.],
190)
191
192#figure(
193  kp.frame({
194    import "@preview/lilaq:0.5.0" as lq
195    lq.diagram(lq.plot(lq.linspace(0, 10), x => calc.sin(x)))
196  }),
197  caption: [A function plot rendered as SVG by ```typ #kp.frame()```.],
198)
199
200= Extra Components
201
202These components are added by Kerplunk.
203
204== Ruby
205
206Ruby, also known as #kp.ruby("振り仮名", "furigana"), is a small annotation
207that appears above or next to a word. It's commonly used in Japanese to show the
208pronunciation of kanji characters.
209
210```typst
211#kp.ruby("ruby top", "ruby base")
212#kp.ruby("rt|and|rb|can|splited|by|bars", "but|must|has|same|number|of|bars")
213#kp.ruby([contents], [auto convert to string])
214```
215
216== Sidenotes
217
218#kp.sidenote[This is a sidenote. It can be used to add some extra information
219  without interrupting the reading flow.]
220
221Sidenotes is a special footnote that appears in the margin of the page also, but
222without a marker in the main text. You can use it to add some extra information
223without interrupting the reading flow.
224
225```typst
226// Just like footnote, only one line of content,
227// and no marker in the main text.
228#kp.sidenote[contents]
229// A block margin note, can contain multiple
230// paragraphs and other components.
231#kp.sidenote(block: true)[contents]
232```
233