Comment Format Support

About 1 min...

You can add different contents to comment, including extended Markdown syntax and HTML tags.

Format Support

We support the full CommonMark (standard Markdown syntax), along with the following extensions:

GFM style table
GFM style strike through
Subscript and superscript
Emoji
Code block highlighting
$T E X$ formula

GFM

Github Flavored Markdown

Meanwhile, you can freely embed any HTML content without triggering the protection mechanism.

In order to control the size of the client, we only place a small Markdown parser in the official client @waline/client, which causes many grammars to not display correctly in the preview panel (they can be correctly rendered in the comment area).

This includes the following restrictions:

Standard emoji syntax (eg 🎉:tada:) does not render correctly
The upper and lower subscripts (eg: H~2~O, x^2^) cannot be rendered correctly
$T E X$ syntax, i.e. math formulas (eg: $a = 1$ ) cannot be rendered by default.
When using the official client, you can customize the $T E X$ rendering in preview by setting the texRenderer option, see Cookbook → Use a custom $T E X$ renderer.
Under the default highlighter, code blocks will be highlighted with random colors with specific delimiters.
When using the official client, you can customize the code highlighting when previewing by setting the highlighter option, see Cookbook → Custom Code Highlighting.

Principle

Considering package size, the client uses marked for rendering and uses a < 1kb highlighter for highlighting by default, and does not include a $T E X$ renderer, resulting in the above limitations.
When a user submits a comment, the client embeds a custom Emoji image and sends the original comment to the server.
The server receives the original text, uses markdown-it to render markdown correctly with relevant plug-ins, uses prismjs to highlight code blocks according to the language, and performs $T E X$ rendering according to user settings, and finally performs XSS processing .
After the processing is completed, the server will store the correct rendering content and return it to the client when needed to ensure the normal display of the comment area.