歡迎使用51CTO AI.x社區-Markdown編輯器 原創
@toc
Guide
這是一篇講解如何正確使用51CTO AI.x社區-Markdown編輯器的排版示例。希望通過此文檔，大家都能輕松上手，都能通過Markdown讓自己的文章有更加出色、清晰明了的排版。
什么是Markdown
Markdown (MD) 是現在普遍使用的一種文檔書寫語言格式，只需用一些非常簡單易記的符號，如（# * / > [] ()\ ），就可以輕松寫出一篇具有良好的排版和可讀性的文章。
語法示例
1.基本語法
一些常規的語法格式。
1.1 標題
標題用#+空格表示，不同數量的#可以表示不同的標題。
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
1.2 粗體和斜體粗體
斜體：在需要斜體的文字前后各加一個“ * ”。
粗體：在需要操作的文字前后各加兩個“ * ”。
粗體加斜體：在需要操作的文字前后各加三個“ * ”。
1.3 刪除線語法
在需要刪除的文字前后各使用兩個符號“~~”要刪除的文字。
1.4 引用
符號“>”后面書寫文字。示例：
這個是引用
1.5 目錄
可通過：@[toc](目錄) 生成目錄。
1.6 空行
如需空行，則可 +回車換行。
2.LaTeX公式
LaTeX數學公式有兩種：行中公式和獨立公式（行間公式）。行中公式放在文中與其他文字混編，獨立公式單獨成行。
2.1 行內公式
$E=mc^2$
$E=mc^2$
2.2 獨立公式
$$E=mc^2$$
$$E=mc^2$$
2.3 復雜公式
$$\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數學公式教程》
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: 斐波納契數列
# 兩個元素的總和確定了下一個數
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 項目開發流程
section 項目立項
需求分析 :a1, 2021-01-01, 5d
可行性報告 :after a1, 6d
概念驗證 : 5d
section 項目實施
概要設計 :2021-01-14 , 5d
詳細設計 :2021-01-19, 10d
編碼 :2021-01-29, 10d
測試 :2021-02-08, 5d
section 發布驗收
發布: 3d
驗收: 3d
` ` `
axisFormat %m/%d
title 項目開發流程
section 項目立項
需求分析 :a1, 2021-01-01, 5d
可行性報告 :after a1, 6d
概念驗證 : 5d
section 項目實施
概要設計 :2021-01-14 , 5d
詳細設計 :2021-01-19, 10d
編碼 :2021-01-29, 10d
測試 :2021-02-08, 5d
section 發布驗收
發布: 3d
驗收: 3d
8.Todo列表
語法：
- [ ] 社區直播公開課開展情況
- [x] 5分鐘搞定俄羅斯方塊—組件化實戰
- [x] HarmonyOS應用服務早期紅利與各項技術場景創新分析
- [ ] 從萌新到高手——怎樣快速掌握鴻蒙開發
顯示：
- [ ] 社區直播公開課開展情況
- [x] 5分鐘搞定俄羅斯方塊—組件化實戰
- [x] HarmonyOS應用服務早期紅利與各項技術場景創新分析
- [ ] 從萌新到高手——怎樣快速掌握鴻蒙開發
9.鏈接
支持直接粘貼鏈接地址。鏈接語法和顯示如下：
語法1：[鏈接名稱](http://鏈接網址)
顯示：鏈接名稱
或語法2：<http://鏈接網址>
顯示：http://鏈接網址
10. 圖片
可通過上傳按鈕上傳圖片，也支持直接粘貼圖片，也支持拖拽上傳圖片。語法如下：
語法：
11. 視頻
僅支持mp4和mp3視頻。語法如下：
語法：
12. 有序列表&有序列表
無序列表的使用，在符號“-”后加空格使用。如下：
- 列表項
- 列表項
- 列表項
如果要控制列表的層級，則需要在符號“-”前使用空格。如下：
- 列表項
- 列表項
- 列表內容
- 列表內容
有序列表的使用，在數字及符號“.”后加空格幾個，如下：
- 列表項
- 列表項
- 列表內容
- 列表內容
- 子列表內容
- 子列表內容
- 子列表內容
13. 分割線
可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，同時需要在分隔線的上面空一行。
例：
-------
*****
______
14. 符號轉義
如果你的描述中需要用到 Markdown 的符號，比如 # * 等，但又不想它被轉義，這時候可以在這些符號前加反斜杠，如 \ # * 進行避免。
15. 導入和導出
支持正文導出.md的文檔，支持導入.md格式的文檔。
導入：支持導入本地 .md 格式的文檔
導出：正文內容可以導出本地.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. 其他說明
使用富文本編輯器發布的內容只能富文本編輯器編輯，不可切換Markdown編輯器；
使用Markdown編輯器發布的內容只能Markdown編輯器編輯，不可切換富文本編輯器編輯。
