Commit f8fdd94

@@ -1,50 +0,0 @@
-#import "/src/contents/_lib/lib.typ" as kp
-#show: kp.post-template
-
-#metadata(
-  (
-    title: "Test page",
-    author: "HPCesia",
-    desc: "Test Page",
-    date: datetime(
-      year: 2025,
-      month: 3,
-      day: 12,
-    ),
-  )
-)<frontmatter>
-
-This _Is_ *A* _*TEST*_ Page. Current Typst version: #sys.version
-
-== Equations
-
-Some equations here: $E = m c^2$
-
-$ 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. $
-
-== Plain Text
-
-Some random text#footnote[A footnote here.]:
-
-#lorem(20)
-
-== Table
-
-A table here:
-
-#table(
-  columns: 4,
-  ..lorem(20).split(" ")
-)
-
-== Code Block
-
-A code block here:
-
-```nix
-{
-  inputs = {
-    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
-  };
-}
-```

@@ -0,0 +1,142 @@
+#import "/src/contents/_lib/lib.typ" as kp
+#show: kp.post-template
+
+#metadata(
+  (
+    title: "Typst Syntax",
+    author: "HPCesia",
+    desc: "Showing what you can do with Typst in Kerplunk.",
+    date: datetime(
+      year: 2025,
+      month: 7,
+      day: 15,
+    ),
+  ),
+)<frontmatter>
+
+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 Kerplunk.
+Current Typst version: #sys.version
+
+= 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 Kerplunk.
+
+= 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://github.com/torvalds/linux")[source of Linux]
+or #link("/")[home page]. Typst label an be also a target, like #link(label("heading:links"))[this section].
+
+See more imformation about links in #link("https://typst.app/docs/reference/model/link/")[Typst Reference: link].
+
+= Blockquotes
+
+Use ```typ #quote(block: true, attribution: "Author Name")[Content]``` to create a blockquote with attribution.
+
+#quote(block: true, attribution: [Robert A. Heinlein])[
+  A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building,
+  write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate,
+  act alone, solve equations, analyse a new problem, pitch manure, program a computer, cook a tasty meal, fight
+  efficiently, die gallantly. Specialization is for insects.
+]
+
+= 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.
+$
+
+= Tables
+
+Create a table using the ```typ #table()``` function. See more information about tables in
+#link("https://typst.app/docs/reference/model/table/")[Typst Reference: Table Function].
+
+#figure(
+  table(
+    columns: 4,
+    table.header([Framework], [Language], [License], [Description]),
+    [Astro], [TypeScript], [MIT], [The web framework for content-driven websites.],
+    [Eleventy], [JavaScript], [MIT], [A simpler site generator.],
+    [Hugo], [Go], [Apache-2.0], [The world’s fastest framework for building websites.],
+    [Zola], [Rust], [MIT / EUPL-1.2], [A static site generator in a single binary with everything built-in.],
+    table.footer([Test1], [Test2], [Test3], [Test4])
+  ),
+  caption: [Comparison of static site generators],
+)
+
+Prefer to Markdown tables? A Typst package #link("https://typst.app/universe/package/tablem")[tablem] can help you with that.
+
+#{
+  import "@preview/tablem:0.3.0": tablem
+  tablem[
+    | Name  | Location   | Height | Score |
+    | ----- | ---------- | ------ | ----- |
+    | John  | Second St. | 180 cm | 5     |
+    | Wally | Third Av.  | 160 cm | 10    |
+  ]
+}
+
+= 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: A word or expression that has a precise meaning in some uses or is peculiar to a science, art, profession,
+  or subject. Here is a list of terms.
+/ SVG: #[*S*]calable #[*V*]ector #[*G*]raphics, an XML-based markup language for describing two-dimensional based
+  vector graphics.
+/ XML: E#[*X*]tensible #[*M*]arkup #[*L*]anguage, a strict serialization of the DOM.
+/ DOM: #[*D*]ocument #[*O*]bject #[*M*]odel, connects web pages to scripts or programming languages by representing
+  the structure of a document.
+/ HTML: #[*H*]yper#[*T*]ext #[*M*]arkup #[*L*]anguage, a standard for structuring web content.
+/ URL: #[*U*]niform #[*R*]esource #[*L*]ocator, a text string that specifies where a resource can be found on the Internet.