Function Summary - Guztchian

This document summarizes all article features supported by the blog system, with live-rendered examples.

1. Alert Boxes

Provides five preset alert box styles for displaying different levels of callout information in articles.

Single-Line Content

Syntax: :::note / :::tip / :::important / :::warning / :::caution with a closing :::.

Below are all five alert types rendered live:

NOTE

This is a note.

TIP

This is a tip.

IMPORTANT

This is an important note.

WARNING

This is a warning.

CAUTION

This is a cautionary note.

Multi-Line Content

Alert boxes support multiple paragraphs, lists, bold text, and other Markdown elements:

TIP

This is an alert box with multi-line content.

Supports list items
Can contain multiple paragraphs

Key point: can also include bold text and other Markdown elements.

Nested Content

Alert boxes can embed complex elements such as code blocks:

WARNING

Alert boxes can contain code blocks and other elements.

console.log('Hello World');

Custom Title

Use the :::important[Custom Title] syntax to override the default title:

Custom Title

This is an alert box with a custom title. The title will display as “Custom Title” instead of the default “IMPORTANT”.

2. Embedded Cards

Supports embedding third-party platform content cards within articles to enrich content presentation.

Music Card

Syntax: ::music{id="song_id"}

Waiting for API...

Waiting...

GitHub Card

Syntax: ::github{repo="owner/repo"}

DOGOGOD

Loading repository…

…

3. Draft Management

Provides article draft status control for content preview and iteration.

Set draft: true in the article’s frontmatter to mark it as a draft:

Environment isolation: Draft articles are only visible in the dev environment and are automatically hidden in production
Visual indicator: A red alert box appears at the top of draft articles, reading: “Draft Warning: This article is a draft and only appears in the test environment. It will not be displayed in production.”

4. KaTeX Math Formulas

Full support for KaTeX math formula rendering, covering common formula types in academic writing.

Inline Formulas

Here is an inline formula example: $E = mc^2$ , demonstrating Einstein’s mass-energy equivalence.

Another inline formula example: $\sum_{i=1}^{n} x_i = X$ , representing the sum of n numbers.

Block Formulas

The Schrödinger equation (time-dependent form):

\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \frac{i}{\hbar}H\Psi(\mathbf{r},t)

Multi-Line Aligned Formulas

Maxwell’s equations (differential form):

\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}

Matrices

\begin{pmatrix} a & b & c \\ d & e & f \\ g & h & i \end{pmatrix}

Piecewise Functions

f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases}

Limits

\lim_{x \to 0} \frac{\sin(x)}{x} = 1

Integrals

The Gaussian integral:

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

5. Special Typography Styles

Provides several custom Markdown extension syntaxes to enhance article expressiveness.

5.1 Quote Block

Use the :::quote ... ::: syntax to create beautifully styled quote blocks, with HTML tag support for aligning attribution:

The universe is a dark forest. Every civilization is an armed hunter, stalking through the trees like a ghost, gently pushing aside branches that block the path and trying to tread without sound. Even breathing is done with great care. The hunter has to be careful, because everywhere in the forest are stealthy hunters like him. If he finds other life — another hunter, an angel or a demon, a delicate infant or a tottering old man, a fairy or a demigod — there’s only one thing he can do: open fire and eliminate them.

— The Three-Body Problem II: The Dark Forest

Quote blocks can also embed math formulas:

E = mc^2

5.2 Blur Effect

Syntax: !!text!!

This is a blur effect.

Desktop: Hover to remove blur; click to keep it clear for 3 seconds
Mobile: Tap to remove blur; it returns to the blurred state only when both 3 seconds have elapsed since the tap and the page is scrolled

5.3 Pinyin Annotation

Syntax: {汉字}(pinyin), use | to separate the pinyin of each character, and || to skip annotation for a character.

ppīniyīnnyin

君きみの名なは

5.4 Rainbow Text

Syntax: ==text==

This is a rainbow text effect.

5.5 Underline

Syntax: ++text++

This text has an underline effect.

5.6 Style Nesting

The above special styles can be freely nested and combined — for example, blur + rainbow + pinyin:

This is a blurred rainbow text with ppīniyīnnyin annotation

Another nesting example:

Do you like the movie 君きみの名なは

5.7 Footnotes

Use [^1] in the body text to add footnote references, and define the corresponding content at the end of the article¹.

This is another sentence referencing a different source².

5.8 Typst Rendering

Typst typesetting rendering powered by Typst.ts.

Basic typesetting example:

Cetz 3D graphics example:

Waves

Note: Typst graphics rendering may not display optimally in dark mode.

6. Table of Contents Generation

Automatically generates a navigable Table of Contents based on heading hierarchy.

Automatically parses ##, ###, #### and other heading levels
Supports unlimited depth nesting
Generates clickable, jump-to-section TOC links
Maximum TOC depth (1–4) can be configured via toc.depth in src/config.ts

7. External Video Embedding

Supports embedding external platform video players via standard HTML <iframe> tags, with responsive width (width="100%").

Feature Overview

Feature	Syntax	Core Capability
Alert Boxes	`:::type ... :::`	5 preset styles, supports nesting and custom titles
Music Card	`::music{id="..."}`	NetEase Cloud Music embedding
GitHub Card	`::github{repo="..."}`	Repository info card embedding
Draft Management	frontmatter `draft: true`	Environment isolation + visual indicator
KaTeX Inline	$...$	Inline math formulas
KaTeX Block	`$$...$$`	Centered block math formulas
Quote Block	`:::quote ... :::`	Styled quotes with attribution alignment and inline formulas
Blur Effect	`!!...!!`	Interactive hover/tap blur effect
Pinyin Annotation	`{汉字}(pinyin)`	CJK phonetic annotation
Rainbow Text	`==...==`	Gradient color text
Underline	`++...++`	Text underline
Style Nesting	Combined use	Free layering of multiple effects
Footnotes	`[^n]`	In-text reference + end-of-article definition
Typst Rendering	```typst	Typesetting and 3D graphics rendering
TOC Generation	Automatic	Auto-generated from heading hierarchy
Video Embedding	`<iframe>`	Cross-platform video embedding

This is the content of the first reference. Click the arrow before it to jump back to the body text. ↩
This is the content of the second reference. Supports links. ↩

Function Summary

Author

Guztchian

Published on

Jun 25, 2026