歡迎使用51CTO AI.x社區(qū)-Markdown編輯器 原創(chuàng)
@toc
Guide
這是一篇講解如何正確使用51CTO AI.x社區(qū)-Markdown編輯器的排版示例。希望通過此文檔，大家都能輕松上手，都能通過Markdown讓自己的文章有更加出色、清晰明了的排版。
什么是Markdown
Markdown (MD) 是現(xiàn)在普遍使用的一種文檔書寫語言格式，只需用一些非常簡(jiǎn)單易記的符號(hào)，如（# * / > [] ()\ ），就可以輕松寫出一篇具有良好的排版和可讀性的文章。
語法示例
1.基本語法
一些常規(guī)的語法格式。
1.1 標(biāo)題
標(biāo)題用#+空格表示，不同數(shù)量的#可以表示不同的標(biāo)題。
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
1.2 粗體和斜體粗體
斜體：在需要斜體的文字前后各加一個(gè)“ * ”。
粗體：在需要操作的文字前后各加兩個(gè)“ * ”。
粗體加斜體：在需要操作的文字前后各加三個(gè)“ * ”。
1.3 刪除線語法
在需要?jiǎng)h除的文字前后各使用兩個(gè)符號(hào)“~~”要?jiǎng)h除的文字。
1.4 引用
符號(hào)“>”后面書寫文字。示例：
這個(gè)是引用
1.5 目錄
可通過：@[toc](目錄) 生成目錄。
1.6 空行
如需空行，則可 +回車換行。
2.LaTeX公式
LaTeX數(shù)學(xué)公式有兩種：行中公式和獨(dú)立公式（行間公式）。行中公式放在文中與其他文字混編，獨(dú)立公式單獨(dú)成行。
2.1 行內(nèi)公式
$E=mc^2$
$E=mc^2$
2.2 獨(dú)立公式
$$E=mc^2$$
$$E=mc^2$$
2.3 復(fù)雜公式
$$\begin{array}{c}
\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{array}$$
$$\begin{array}{c}
\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{array}$$
更多語法參考：《Markdown編輯器添加Latex數(shù)學(xué)公式教程》
3.代碼高亮
3.1 普通
*emphasize* **strong**
_emphasize_ __strong__
@a = 1
3.2 語法高亮支持
如果在 ``` 后面跟隨語言名稱，可以有語法高亮的效果，如:
3.2.1 html/xml 代碼高亮示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3.2.2 Python高亮示例
#!/usr/bin/python3
# Fibonacci series: 斐波納契數(shù)列
# 兩個(gè)元素的總和確定了下一個(gè)數(shù)
a, b = 0, 1
while b < 10:
print(b)
a, b = b, a+b
3.2.3 CSS 文件示例
body {
background-color: red;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
支持語言有:
HTML/XML,JSON,Bash,CSS,Java,JavaScript,PHP,Python,Rust,C/C++…
4.繪制表格
| Column 1 | Column 2 | Column 3 |
| -------- | -----: | :----: |
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
| cell 7 | cell 8 | cell 9 |
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
| cell 7 | cell 8 | cell 9 |
5.高效繪制流程圖
` ` `flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
` ` `
顯示：
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
6.高效繪制序列圖
` ` `seq
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
` ` `
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
7.高效繪制甘特圖
` ` `gantt
axisFormat %m/%d
title 項(xiàng)目開發(fā)流程
section 項(xiàng)目立項(xiàng)
需求分析 :a1, 2021-01-01, 5d
可行性報(bào)告 :after a1, 6d
概念驗(yàn)證 : 5d
section 項(xiàng)目實(shí)施
概要設(shè)計(jì) :2021-01-14 , 5d
詳細(xì)設(shè)計(jì) :2021-01-19, 10d
編碼 :2021-01-29, 10d
測(cè)試 :2021-02-08, 5d
section 發(fā)布驗(yàn)收
發(fā)布: 3d
驗(yàn)收: 3d
` ` `
axisFormat %m/%d
title 項(xiàng)目開發(fā)流程
section 項(xiàng)目立項(xiàng)
需求分析 :a1, 2021-01-01, 5d
可行性報(bào)告 :after a1, 6d
概念驗(yàn)證 : 5d
section 項(xiàng)目實(shí)施
概要設(shè)計(jì) :2021-01-14 , 5d
詳細(xì)設(shè)計(jì) :2021-01-19, 10d
編碼 :2021-01-29, 10d
測(cè)試 :2021-02-08, 5d
section 發(fā)布驗(yàn)收
發(fā)布: 3d
驗(yàn)收: 3d
8.Todo列表
語法：
- [ ] 社區(qū)直播公開課開展情況
- [x] 5分鐘搞定俄羅斯方塊—組件化實(shí)戰(zhàn)
- [x] HarmonyOS應(yīng)用服務(wù)早期紅利與各項(xiàng)技術(shù)場(chǎng)景創(chuàng)新分析
- [ ] 從萌新到高手——怎樣快速掌握鴻蒙開發(fā)
顯示：
- [ ] 社區(qū)直播公開課開展情況
- [x] 5分鐘搞定俄羅斯方塊—組件化實(shí)戰(zhàn)
- [x] HarmonyOS應(yīng)用服務(wù)早期紅利與各項(xiàng)技術(shù)場(chǎng)景創(chuàng)新分析
- [ ] 從萌新到高手——怎樣快速掌握鴻蒙開發(fā)
9.鏈接
支持直接粘貼鏈接地址。鏈接語法和顯示如下：
語法1：[鏈接名稱](http://鏈接網(wǎng)址)
顯示：鏈接名稱
或語法2：<http://鏈接網(wǎng)址>
顯示：http://鏈接網(wǎng)址
10. 圖片
可通過上傳按鈕上傳圖片，也支持直接粘貼圖片，也支持拖拽上傳圖片。語法如下：
語法：
12. 有序列表&有序列表
無序列表的使用，在符號(hào)“-”后加空格使用。如下：
- 列表項(xiàng)
- 列表項(xiàng)
- 列表項(xiàng)
如果要控制列表的層級(jí)，則需要在符號(hào)“-”前使用空格。如下：
- 列表項(xiàng)
- 列表項(xiàng)
- 列表內(nèi)容
- 列表內(nèi)容
有序列表的使用，在數(shù)字及符號(hào)“.”后加空格幾個(gè)，如下：
- 列表項(xiàng)
- 列表項(xiàng)
- 列表內(nèi)容
- 列表內(nèi)容
- 子列表內(nèi)容
- 子列表內(nèi)容
- 子列表內(nèi)容
13. 分割線
可以在一行中用三個(gè)以上的星號(hào)、減號(hào)、底線來建立一個(gè)分隔線，同時(shí)需要在分隔線的上面空一行。
例：
-------
*****
______
14. 符號(hào)轉(zhuǎn)義
如果你的描述中需要用到 Markdown 的符號(hào)，比如 # * 等，但又不想它被轉(zhuǎn)義，這時(shí)候可以在這些符號(hào)前加反斜杠，如 \ # * 進(jìn)行避免。
15. 導(dǎo)入和導(dǎo)出
支持正文導(dǎo)出.md的文檔，支持導(dǎo)入.md格式的文檔。
導(dǎo)入：支持導(dǎo)入本地 .md 格式的文檔
導(dǎo)出：正文內(nèi)容可以導(dǎo)出本地.md格式的文檔
16. 顏色
使用 $\color{顏色}{文字}$ 來更改特定的文字顏色。
更改文字顏色需要瀏覽器支持，如果不支持則文字將被渲染為黑色。
輸入 $\color {#rgb} {text}$ 來自定義更多的顏色，示例：
語法：
$\begin{array}{|rrrrrrrr|}\hline
\verb+#000+ & \color{#000}{text} & & &
\verb+#00F+ & \color{#00F}{text} & & \\
& & \verb+#0F0+ & \color{#0F0}{text} &
& & \verb+#0FF+ & \color{#0FF}{text}\\
\verb+#F00+ & \color{#F00}{text} & & &
\verb+#F0F+ & \color{#F0F}{text} & & \\
& & \verb+#FF0+ & \color{#FF0}{text} &
& & \verb+#FFF+ & \color{#FFF}{text}\\
\hline
\end{array}$
顯示：
$\begin{array}{|rrrrrrrr|}\hline
\verb+#000+ & \color{#000}{text} & & &
\verb+#00F+ & \color{#00F}{text} & & \
& & \verb+#0F0+ & \color{#0F0}{text} &
& & \verb+#0FF+ & \color{#0FF}{text}\
\verb+#F00+ & \color{#F00}{text} & & &
\verb+#F0F+ & \color{#F0F}{text} & & \
& & \verb+#FF0+ & \color{#FF0}{text} &
& & \verb+#FFF+ & \color{#FFF}{text}\
\hline
\end{array}$
17. 其他說明
使用富文本編輯器發(fā)布的內(nèi)容只能富文本編輯器編輯，不可切換Markdown編輯器；
使用Markdown編輯器發(fā)布的內(nèi)容只能Markdown編輯器編輯，不可切換富文本編輯器編輯。
