# Syntax Support

You can add a variety of content in the comments, including expanded Markdown syntax and HTML tags.

# Markdown Support

We support tcomplete Markdown syntax and the following extensions.

# GFM Markdown Favor

Including tables and delete lines

Demo

This is ~~deleted~~.

center	right	left
For center align use `:-:`	For right align use `-:`	For left align use `:-`
b	aaaaaaaaa	aaaa
c	aaaa	a

This is ~~deleted~~.

|           center           |                    right | left                    |
| :------------------------: | -----------------------: | :---------------------- |
| For center align use `:-:` | For right align use `-:` | For left align use `:-` |
|             b              |                aaaaaaaaa | aaaa                    |
|             c              |                     aaaa | a                       |

1
2
3
4
5
6
7

# Superscript and Subscript

Use ^ and ~ to mark the superscript and subscript.

Demo

19^th
H₂O

- 19^th^
- H~2~O

1
2

# Emojis

Besides user-configured or built-in Weibo emojis, we also support complete Emoji abbreviated emoticons.

Demo

😃 😦 😄 😆 😊 😃 😏 😍 😘

:) :( :smile: :laughing: :blush: :smiley: :smirk: :heart_eyes: :kissing_heart:

# Code Block Highlight

We support highlighting in almost all languages.

Demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      // Just a lil’ script to show off that inline JS gets highlighted
      window.console && console.log('foo');
    </script>
    <meta charset="utf-8" />
    <link rel="icon" href="assets/favicon.png" />
    <title>Prism</title>
    <link rel="stylesheet" href="assets/style.css" />
    <link rel="stylesheet" href="themes/prism.css" data-noprefix />
    <script src="assets/vendor/prefixfree.min.js"></script>

    <script>
      var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];
    </script>
    <script src="https://www.google-analytics.com/ga.js" async></script>
  </head>
  <body></body>
</html>

/** @deprecated Use `Prism.plugins.fileHighlight.highlight` instead. */
Prism.fileHighlight = function () {
  if (!logged) {
    console.warn(
      'Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.'
    );
    logged = true;
  }
  Prism.plugins.fileHighlight.highlight.apply(this, arguments);
};

@import url(https://fonts.googleapis.com/css?family=Questrial);
@import url(https://fonts.googleapis.com/css?family=Arvo);

@font-face {
  src: url(https://lea.verou.me/logo.otf);
  font-family: 'LeaVerou';
}

/*
 Shared styles
 */

section h1,
#features li strong,
header h2,
footer p {
  font: 100% Rockwell, Arvo, serif;
}

# Mathematical formula

You can use $ ... $ to create inline formulas, or use $$ ... $$ to create block-level formulas.

Demo

Euler’s identity

e^{i π} + 1 = 0

is a beautiful formula in

R^{2}

\frac{\partial^{r}}{\partial ω^{r}} (\frac{y^{ω}}{ω}) = (\frac{y^{ω}}{ω}) {(\log y)^{r} + \sum_{i = 1}^{r} \frac{(- 1)^{i} r \dots (r - i + 1) (\log y)^{r - i}}{ω^{i}}}

Euler’s identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.

$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}
$$

1
2
3
4
5
6

# Spam and XSS prevention

Preventing XSS attacks

We use DOMPurify to sanitize every comment input to prevent potential XSS attacks. This means you can't use <iframe> or any form of script.

At the same time, all links will be automatically set rel="noreferrer noopener" and opened in a new window with target="_ blank".

Preventing malicious content implantation

To prevent users from creating submitable forms in the comment area to trick other visitors submitting information, <form> and <input> are not allowed
To prevent users from using style tag to revise website pages or modify their own comment styles to implant spam ads, the <style> tag and the style attribute are not allowed.
To prevent users from abusing media autoplay feature, autoplay attribute is not allowed.

# Restricted preview function

In order to control the size of the client @waline / client, many functions cannot be displayed correctly in the preview mode, but after submission they will be correctly rendered in the comment area.

This includes the following restrictions:

Standard emoji syntax (e.g.: tada: :tada:) cannot be rendered correctly
Superscript and subscript (e.g.: H~2~O, x^2^) cannot be rendered correctly
Tex syntax, or mathematical formulas (e.g.: $a = 1$ ) cannot be rendered correctly
Code blocks will be highlighted in random colors splited by specific characters

Principle

Considering the size, the client uses marked for rendering and hanabi for highlighting, which will have the above limitations.
When a user submits a comment, the client embeds custom Emoji images, and the raw comment will be sent to the server.
The server receives the comment, uses markdown-it to render markdown correctly with related plugins, and uses prismjs to highlight code blocks according to the language, and finally executes XSS sanitizing.
After successfully processed, the server storage the render content in database, and returns it to the client when needed so comment will be displayed normally.

TIPS: The comment area is only for demo. If you have any questions, please go to Github Discussion to ask.