Commit c4d6668

@@ -1,149 +0,0 @@
-#import "/src/contents/_lib/lib.typ": *
-#show: tybios.post-template
-
-#metadata(
-  (
-    title: "Test page",
-    author: "HPCesia",
-    desc: "Test Page",
-    date: datetime(
-      year: 2025,
-      month: 2,
-      day: 3,
-    ),
-  ),
-)<frontmatter>
-
-// ======================================
-
-#outline()
-
-= Equations <eq>
-
-Some equations here: $E = m c^2$.#footnote[
-  Tybios use #link("https://codeberg.org/akida/mathyml", [akida/mathyml]) to convert Typst equations to MathML,
-  and use remote math fonts from #link("https://github.com/fred-wang/MathFonts", [fred-wang/MathFonts])'s GitHub page.
-  So, an internet connection is required to display equations properly.
-  You can also self-host the math fonts and change the URL in tybios's source code if you want to use them offline.
-]
-
-$
-  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.
-$
-
-Above equation employs some tricks from complex analysis.
-
-= Plain Text & Margin Notes
-
-Some random text:
-
-#lorem(20)
-
-#lorem(15)
-
-You can use ```typ #footnote[]``` to create footnotes. #footnote[Footnotes will be displayed as margin notes in HTML output.]
-
-You can also use ```typ #tybios.marginnote[]```#tybios.marginnote[It's same to foot note, but no refer link.]
-to create margin notes.#tybios.marginnote[
-  Due to the way Typst generates HTML, you cannot create separate paragraphs in a footnote;
-  otherwise, it will lead to HTML structure errors.
-]
-#tybios.marginnote[```typ #tybios.marginnote[]``` is designed to address
-  this issue—you can use `marginnote` multiple times in succession to simulate the effect of separate paragraphs.
-]
-
-= Table
-
-A table here:
-
-#figure(
-  table(
-    columns: 4,
-    table.header(..lorem(4).split(" ")),
-    ..lorem(20).split(" "),
-  ),
-  caption: [Test table],
-)
-
-= Code
-
-A code block here:
-
-```rust
-fn main() {
-  println!("Hello, World! This is a long message from Typst's code block!");
-}
-```
-
-And some inline code: `print("Hello, World!")`.
-
-Maybe you want Typst's special inline code with syntax highlighting: ```rust println!("Hello, World!"); ```,
-just wrap the code with three backticks and specify the language.
-
-````typ
-```js console.log("Hello, Typst!");```
-````
-
-= Frame
-
-You can use ```typ #tybios.frame()``` wrap any content that can't automatically convert to HTML, convert them to SVGs.
-#footnote[Converted SVGs will adapt to dark theme by color invert and hue rotation, but the result may not be perfect.]
-This function is a wrapper of #link("https://typst.app/docs/reference/html/frame/", ```typ #html.frame()```),
-but only use it when ```typ #target()``` exists and equals to "html". Otherwise, it will return the content directly without wrapping it in a frame.
-
-#figure(
-  {
-    import "@preview/lilaq:0.5.0" as lq
-    let x = lq.linspace(0, 10)
-
-    tybios.frame(lq.diagram(
-      lq.plot(x, x => calc.sin(x)),
-    ))
-  },
-  caption: [The diagram of the sine function],
-)
-
-= List & Enumeration
-
-Example of enumeration:
-
-- Item 1
-- Item 2
-- Item 3
-- Long Item 4:
-  #lorem(30)
-
-  #lorem(25)
-- Nested Item 5:
-  - Subitem 1
-  - Subitem 2
-  - Subitem 3
-    - Subsubitem 1
-    - Subsubitem 2
-
-Example of ordered list with specified numbering:
-
-1. Item 1
-2. Item 2
-3. Item 3
-5. Item 4
-
-Example of ordered list:
-
-+ Item 1
-+ Item 2
-+ Item 3
-25. Item 4
-+ Item 5
-
-  #lorem(20)
-
-= Term List
-
-/ Ligature: A merged glyph.
-/ HTML: HyperText Markup Language, a standard for structuring web content.
-/ Kerning: A spacing adjustment between two adjacent letters.
-/ Test1: A vary lang first line here. #lorem(50)
-
-  Another paragraph here. #lorem(30)
-/ Test2: A vary lang first line here. #lorem(50)

@@ -0,0 +1,134 @@
+#import "/src/contents/_lib/lib.typ": *
+#show: tybios.post-template
+
+#metadata(
+  (
+    title: "Typst Syntax",
+    desc: "Showing what you can do with Typst in Tybios.",
+    date: datetime(
+      year: 2025,
+      month: 3,
+      day: 12,
+    ),
+  ),
+)<frontmatter>
+
+#outline()
+
+This is not a reference to Typst syntax, see #link("https://typst.app/docs/reference/")[Typst Reference] for that.
+This is a demonstration of what you can do with Typst syntax in Tybios.
+
+= Basic Text
+
+This is a normal text. You can make it _italic_ or *bold*. You can also make it _*both*_.
+And #underline[underlined], #strike[strikethrough], #overline[overlined] are also supported.
+Why not #highlight[make it highlighted]?
+
+Left a blank line to start a new paragraph.\
+Insert `\` to break a line without starting a new paragraph.
+
+Some characters need to be escaped, such as \#, \*, \_, \`, \\,
+as they are #link("https://typst.app/docs/reference/syntax/#markup")[markup] characters.
+
+Unfortunately, you can't change the font family, size and color inside Typst,
+they are determined by CSS in Tybios.
+
+= Links<heading:links>
+
+Links can be created using the ```typ #link(target, content)```#footnote[
+  Or ```typ #link(target)[content]```, this is a syntactic sugar
+  for the special case of first form: ```typ #link(target, [content])```.
+] function.
+The first argument is the URL, and the second argument is the text to display.
+
+Target can be a URL, like #link("https://codeberg.org/HPCesia/Tybios")[source of Tybios]
+or #link("/Tybios/")[home page]. Typst label an be also a target,
+like #link(label("figure:sine-diagram"))[the sine diagram figure] or #link(label("heading:links"))[this section].
+
+See more imformation about links in #link("https://typst.app/docs/reference/model/link/")[Typst Reference: link].
+
+= Raw Blocks
+
+This is an inline raw block `println!("Hello, world!");`.
+
+This is an inline syntax-highlighted raw block ```rust println!("Hello, world!");```.
+
+This is a long inline raw block
+```css @media(prefers-color-scheme:dark){:root{background-color:var(--color-neutral-900);color:var(--color-neutral-300)}}```.
+
+Js syntax highlight are handled by syntect:
+
+```js
+class T {
+  constructor() {
+    console.log("Hello, world!");
+  }
+}
+```
+
+Typst syntax hightlight are specially handled internally:
+
+```typ
+#let fn(x) = x
+```
+
+= Equations
+
+This is an inline equation $E = m c^2$.
+
+This is a display equation:
+$
+  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.
+$
+
+A example from #link("https://github.com/ahxt/academic-homepage-typst/blob/55e76cb813f0096070fdda57dc81e13697af66b2/content/blog/grpo.typ")[academic-homepage-typst: GRPO]:
+
+$
+  cal(J)_text("PPO")(theta) = bb(E)_((q,a)~cal(D))
+  [
+    min ( (pi_theta(o_t|q, o_(<t)))/(pi_(theta_text("old"))(o_t|q,o_(<t))) hat(A)_t,
+      "clip" ( (pi_theta(o_t|q, o_(<t)))/(pi_(theta_text("old"))(o_t|q,o_(<t))), 1 - epsilon, 1 + epsilon ) hat(A)_t ) ]
+$
+
+= Figures
+
+#figure(
+  table(
+    columns: 4,
+    table.header(..lorem(4).split(" ")),
+    ..lorem(20).split(" "),
+  ),
+  caption: [Table with placeholder text],
+)
+
+Use ```typ #tybios.frame()``` to wrap any content that can't automatically convert to HTML, convert them to SVGs. #footnote[
+  Converted SVGs will adapt to dark theme by color invert and hue rotation, but the result may not be perfect.
+]
+
+#figure(
+  {
+    import "@preview/lilaq:0.5.0" as lq
+    let x = lq.linspace(0, 10)
+
+    tybios.frame(lq.diagram(
+      lq.plot(x, x => calc.sin(x)),
+    ))
+  },
+  caption: [The diagram of the sine function],
+)<figure:sine-diagram>
+
+= Lists
+
+- An unordered list here
+- You can use `-` to start a unordered list item.
+
++ An ordered list here
++ You can use `+` to start a ordered list item, and the number will be automatically generated.
+6. You can also use numbers to specify the order.
++ After a specified order item, the next item will continue the order you specified.
+
+Term List
+
+/ Ligature: A merged glyph.
+/ HTML: HyperText Markup Language, a standard for structuring web content.
+/ Kerning: A spacing adjustment between two adjacent letters.