16

測試MD 所有樣式

換行 換行換行 換行換行 換行換行 換行換行 換行

2025/06/04


tags: Markdown

Markdown 語法大全,範例模板

僅收入常用語法

目錄

  • 標題
  • 內文
  • 清單
  • 標註
  • 區塊
  • 程式碼
  • 分隔線
  • 超連結
  • 圖片
  • 表格 [TOC]

標題

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 <u>underline</u> delete

Text Bold Italic <u>underline</u> 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
  1. Number
  2. Number
  3. Number
  • CheckBox
  • To-Do
  • To-Do

↑↑↑

標註

Highlight

語法

  • Highlight : 使用 `` 符號
Text`Highlight`Remark

標註 - 渲染效果

↓↓↓


TextHighlightRemark


↑↑↑

區塊

語法

  • Block : 文字前使用四個空格
    Text Block

區塊 - 渲染效果

↓↓↓


Text Block

↑↑↑

程式碼

語法

  • Text : 一般的文字說明,若內容字數太長,使用程式碼區塊
    • 避免一般文字換行排版的困擾
  • java : 區塊的語法類型,使用三個 ` 符號,後方加上程式語言名稱
    • 程式碼語法高亮取決於軟體的支援
  • diff : 類似於 git 版本比對功能
    • + : 綠色代表新增
    • - : 紅色代表刪除
<pre> <code> ``` Text - 文字說明 ``` ```java // Java Code System.out.println("Hello Word"); ``` ```diff + System.out.println("Hello Word"); - System.out.println("Hello Word"); ``` </code> </pre>

程式碼 - 渲染效果

↓↓↓


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

Blogger

Youtube


↑↑↑

圖片

語法


![Gamma-Ray-Studio](assets/001/gamma-ray-studio.png)

圖片 - 渲染效果

↓↓↓


Gamma-Ray-Studio


↑↑↑

表格

語法

  • 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

FunWithTables
left-aligned columnright-aligned columncentered column
$100$100$100
$10$10$10
$1$1$1

Table - Text

123
onetwothree
ItalicHightlightBold

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 1Table 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>

↑↑↑



留言區

披薩

13 天前

測試正式寫入測試正式寫入

發表留言