Markdown 語法大全，範例模板
文件
教程文章
Markdown 語法大全，範例模板
僅收入常用語法
目錄
- 標題
- 內文
- 清單
- 標註
- 區塊
- 程式碼
- 分隔線
- 超連結
- 圖片
- 表格
標題
H1 ~ H6
語法
# H1 大標題
## H2 標題
### H3 子標題
#### H4 小標題
##### H5 小標題
###### H6 小標題 標體 - 渲染效果
↓↓↓
H1 大標題
H2 標題
H3 子標題
H4 小標題
H5 小標題
H6 小標題
↑↑↑
另外一種標題寫法
H1 大標題
======
H2 標題
------標體 - 渲染效果
↓↓↓
H1 大標題
H2 標題
↑↑↑
內文
文章內容
語法
- Text : 一般文字，不添加任何符號
- Bold : 粗體，使用兩個
+、-、*符號 - Italic : 斜體 ，使用一個
+、-、*符號 - Underline : 下劃線，使用 HTML
<u>標籤 - Delete : 刪除線，使用兩個
~符號 - TextWrap : 文字換行，需使用兩次，否則會以空格形式呈現
- #1#2#3 : #字符號前面需添加倒斜線，否則無法渲染
Text **Bold** *Italic* <u>underline</u> ~~delete~~
Text __Bold__ _Italic_ <u>underline</u> ~~delete~~
1.TextWrap
2.TextWrap
3.TextWrap
#1#2#3
\#1\#2\#3內文 - 渲染效果
↓↓↓
Text Bold Italic underline delete
Text Bold Italic underline delete
1.TextWrap 2.TextWrap
3.TextWrap
#1#2#3 #1#2#3
↑↑↑
清單
項目列表、任務列表
語法
- Item : 項目符號使用
+、-、*皆可 - Number : 數字項目使用
數字.開頭，實際數字不影響渲染結果 - CheckBox : 任務清單，前方除 Item 符號以外，使用
[ ]符號+ [ ]: 渲染未打勾+ [X]: 渲染為打勾
+ Item1
+ Item1.1
+ Item1.2
- Item2
- Item2.1
- Item2.2
* Item2.2.1
1. Number
2. Number
2. Number
- [ ] CheckBox
+ [X] To-Do
* [ ] To-Do清單 - 渲染效果
↓↓↓
- Item1
- Item1.1
- Item1.2
- Item2
- Item2.1
- Item2.2
- Item2.2.1
- Number
- Number
- Number
- CheckBox
- To-Do
- To-Do
↑↑↑
標註
Highlight
語法
- Highlight : 使用 `` 符號
Text`Highlight`Remark標註 - 渲染效果
↓↓↓
TextHighlightRemark
↑↑↑
區塊
語法
- Block : 文字前使用四個空格
Text Block區塊 - 渲染效果
↓↓↓
Text Block↑↑↑
程式碼
語法
- Text : 一般的文字說明，若內容字數太長，使用程式碼區塊
避免一般文字換行排版的困擾
- java : 區塊的語法類型，使用三個 ` 符號，後方加上程式語言名稱
程式碼語法高亮取決於軟體的支援
- diff : 類似於 git 版本比對功能
+: 綠色代表新增-: 紅色代表刪除
```
Text - 文字說明
```
```java
// Java Code
System.out.println("Hello Word");
```
```diff
+ System.out.println("Hello Word");
- System.out.println("Hello Word");
```
程式碼 - 渲染效果
↓↓↓
Text - 文字說明// Java Code
System.out.println("Hello Word");+ System.out.println("Hello Word");
- System.out.println("Hello Word");↑↑↑
分隔線
語法
---: 使用*或-符號，數量要大於 三個
--
-----
***分隔線 - 渲染效果
↓↓↓
↑↑↑
超連結
url
語法
- Gitlab : 使用
<>符號，將網址渲染成超連結 - Blogger : 使用
[]與()，將文字變成指定網址的超連結標籤 - YouTube : 另一種將文字變成指定網址的超連結方法，統一管理連結的網址
### Gitlab
<https://gitlab.com/GammaRayStudio>
[Blogger](https://gamma-ray-studio.blogspot.com/)
[Youtube]
[YouTube]: https://www.youtube.com/user/rhxs020
超連結 - 渲染效果
↓↓↓
Gitlab
https://gitlab.com/GammaRayStudio
↑↑↑
圖片
語法
圖片 - 渲染效果
↓↓↓
↑↑↑
表格
語法
- Table - Align : 表格對齊方式，置左、置右、置中
- Table - Text : 表格中使用文字符號
- Table - Html : 在 Markdown 中，使用 Html 表格標籤
- Table - Span : 使用 Html 標籤，合併表格欄位
- Table - Mix : 混合使用 Markdown 格式與 Html 標籤
- Table - Item : 使用 Html 標籤，在表格中呈現項目列表
### Table - Align
| Markdown | Simple | Table |
| :------------------- | -------------------: |:---------------:|
| left-aligned column | right-aligned column | centered column |
| $100 | $100 | $100 |
| $10 | $10 | $10 |
| $1 | $1 | $1 |
### Table - Text
1 | 2 | 3
--- | --- | ---
one | two | three
*Italic* | `Hightlight` | **Bold**
### Table - Html
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
### Table - Span
<table>
<tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
</tr>
<tr>
<td>A1</td>
<td colspan="2">A2</td>
</tr>
<tr>
<td rowspan="2">B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C2</td>
<td>C3</td>
</tr>
</table>
### Table - Mix
|Table 1|Table 2|
|--|--|
|<table> <tr><th>Table 1 Heading 1</th><th>Table 1 Heading 2</th></tr><tr><td>Row 1 Column 1</td><td>Row 1 Column 2</td></tr> </table>| <table> <tr><th>Table 2 Heading 1</th><th>Table 2 Heading 2</th></tr><tr><td>Row 1 Column 1</td><td>Row 1 Column 2</td></tr> </table>|
### Html - Item
<table>
<thead>
<tr>
<th>Java</th>
<th>Android</th>
<th>iOS</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" width="300">
<ul>
<li>OwO</li>
<li>OwO</li>
<li>OwO</li>
</ul>
</td>
<td valign="top" width="300">
<ul>
<li>OwO#1</li>
<li>OwO#2
<ul>
<li>OwO@3</li>
<li>OwO@4</li>
<li>OwO@5</li>
</ul>
</li>
</ul>
</td>
<td valign="top" width="300">
<ul>
<li>OwO#1</li>
<li>OwO#2
<ul>
<li>OwO@3</li>
<li>OwO@4</li>
<li>OwO@5
<ul>
<li>OwO$1</li>
<li>OwO$2</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody>
</table>表格 - 渲染效果
↓↓↓
Table - Align
| Fun | With | Tables |
|---|---|---|
| left-aligned column | right-aligned column | centered column |
| $100 | $100 | $100 |
| $10 | $10 | $10 |
| $1 | $1 | $1 |
Table - Text
| 1 | 2 | 3 |
|---|---|---|
| one | two | three |
| Italic | Hightlight | Bold |
Table - Html
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Sum | $180 |
Table - Span
| Item1 | Item2 | Item3 |
|---|---|---|
| A1 | A2 | |
| B1 | B2 | B3 |
| C2 | C3 | |
Table - Mix
| Table 1 | Table 2 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
|
|
Html - Item
| Java | Android | iOS |
|---|---|---|
|
|
|
↑↑↑
留言
張貼留言