Mastering Docsify: Essential Markdown Syntax for Documentation

Docsify uses Markdown syntax for documentation formatting. Below are the most common markup techniques.

Bold Text

Wrap the text to be emphasized with two asterisks (**). Example: **Bold Text** Wrap the text with a single asterisk (*) for a different style. Example: *Italic Text* Wrap the text with three asterisks (***) for combined bold and italic. Example:

***Bold and Italic***

Changing Font Color and Size

Markdown does not support colors directly, so HTML <font> tags are used to adjust size and color.

Font Color

Examples of red, green, and yellow text using HTML:

<font color="red">Red Text</font>
<font color="green">Green Text</font>
<font color="yellow">Yellow Text</font>

Font Size

Use HTML size attributes to set sizes from 2 to 7:

<font size="2">2号字</font>
<font size="3">3号字</font>
<font size="4">4号字</font>
<font size="5">5号字</font>
<font size="6">6号字</font>
<font size="7">7号字</font>

Table Format

Markdown tables are created with pipes and hyphens. Example:

|字段|类型|长度|是否必填|含义|
|---|---|---|---|---|
|resultCode|long|20|Y|body code|

The rendered table looks like:

字段 类型 长度 是否必填 含义 resultCode long 20 Y bodycode

Alignment

Set column alignment with colons: -: – right‑align :- – left‑align :-: – center‑align

Line Breaks in Cells

Insert <br> inside a cell to force a line break.

Custom CSS Support

A custom stylesheet can style labels similar to WeChat Pay documentation. Example CSS:

.label-green,.label-red,.label-yellow,.label-gray,.label-blue{display:inline-block;font-size:12px;padding:0 5px;width:44px;height:18px;text-align:center;line-height:16px;border:1px solid #fff;border-radius:3px;}
.label-green{color:#00c250;border-color:#99e7b9;}

Save the CSS in common.css and include it in index.html:

<link rel="stylesheet" href="../common.css">

With this stylesheet, the documentation can mimic the look of WeChat Pay API pages.

Markdown also supports flowcharts, math formulas, code blocks, ordered and unordered lists, but this article focuses on the most common operations to help you get started.

Feel free to discuss further below.