Markdown學習

引入

跟隨菜鳥教程學習，所以基本一致，自用

標題

使用 = 和 - 標記一級和二級標題

我展示的是一級標題
=================

我展示的是二級標題
-----------------

使用 # 號標記

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題

段落格式

段落的換行是使用兩個以上空格加上回車。

當然也可以在段落后面使用一個空行來表示重新開始一個段落。

字體

*斜體文本*
_斜體文本_
**粗體文本**
__粗體文本__
***粗斜體文本***
___粗斜體文本___

斜體文本
斜體文本
粗體文本
粗體文本
粗斜體文本
粗斜體文本

分割線

你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線：

***

* * *

*****

- - -

----------

刪除線

只需要在文字的兩端加上兩個波浪線 ~~ 即可

RUNOOB.COM
GOOGLE.COM
~~BAIDU.COM~~

RUNOOB.COM
GOOGLE.COM
~~BAIDU.COM~~

下劃線

下劃線可以通過 HTML 的標簽來實現：

<u>帶下劃線文本</u>

帶下劃線文本

腳注

對文本的補充說明。

[^要注明的文本]
[^RUNOOB]。
[^RUNOOB]: 燊楽 -- 嚕啦啦

創建腳注格式類似這樣 ^[1]。

列表

無序列表使用星號(*)、加號(+)或是減號(-)作為列表標記，這些標記后面要添加一個空格，然后再填寫內容：

無序列表

* 第一項
* 第二項
* 第三項

+ 第一項
+ 第二項
+ 第三項


- 第一項
- 第二項
- 第三項

第一項
第二項
第三項

第一項
第二項
第三項

第一項
第二項
第三項

有序列表

1. 第一項
2. 第二項
3. 第三項

第一項
第二項
第三項

列表嵌套

1. 第一項:
   - 第一項嵌套的第一個元素
   - 第一項嵌套的第二個元素
2. 第二項:
   - 第二項嵌套的第一個元素
   - 第二項嵌套的第二個元素

第一項:
- 第一項嵌套的第一個元素
- 第一項嵌套的第二個元素
第二項:
- 第二項嵌套的第一個元素
- 第二項嵌套的第二個元素

區塊

Markdown 區塊引用是在段落開頭使用 > 符號，然后后面緊跟一個空格符號：

> 區塊引用
> 菜鳥教程
> 學的不僅是技術更是夢想

區塊引用
菜鳥教程
學的不僅是技術更是夢想

區塊嵌套

> 最外層
> > 第一層嵌套
> > > 第二層嵌套

最外層

第一層嵌套

第二層嵌套

區塊中使用列表

> 區塊中使用列表
> 1. 第一項
> 2. 第二項
> + 第一項
> + 第二項
> + 第三項

區塊中使用列表

第一項

第二項

第一項

第二項

第三項

列表中使用區塊

* 第一項
    > 菜鳥教程
    >> 學的不僅是技術更是夢想
* 第二項

第一項

菜鳥教程

學的不僅是技術更是夢想
第二項

代碼

如果是段落上的一個函數或片段的代碼可以用反引號把它包起來（`），例如：

`printf()` 函數

printf() 函數

代碼區塊

``c
//按理說要放三個```,要改
``

鏈接

[鏈接名稱](鏈接地址)
或者
<鏈接地址>

鏈接名稱

或者

<鏈接地址>

高級鏈接

這個鏈接用 1 作為網址變量 [Google][1]
這個鏈接用 runoob 作為網址變量 [Runoob][runoob]
然后在文檔的結尾為變量賦值（網址）

  [1]: http://www.google.com/
  [runoob]: http://www.runoob.com/



  和腳注類似，腳注是對某些內容的引用注釋。
  而鏈接是對某些內容的引用網址。

這個鏈接用 1 作為網址變量 Google
這個鏈接用 runoob 作為網址變量 Runoob
然后在文檔的結尾為變量賦值（網址）

圖片

![alt 屬性文本](圖片地址)

![alt 屬性文本](圖片地址 "可選標題")

舉例說明：
![RUNOOB 圖標](https://static.jyshare.com/images/runoob-logo.png)

![RUNOOB 圖標](https://static.jyshare.com/images/runoob-logo.png "RUNOOB")

開頭一個感嘆號!
接著一個方括號，里面放上圖片的替代文字
接著一個普通括號，里面放上圖片的網址，最后還可以用引號包住并加上選擇性的'title'文本。

也可以像網址那樣對圖片網址使用變量:

這個鏈接用 1 作為網址變量 [RUNOOB][1].
然后在文檔的結尾為變量賦值（網址）

[1]: https://static.jyshare.com/images/runoob-logo.png

這個鏈接用 1 作為網址變量 RUNOOB.
然后在文檔的結尾為變量賦值（網址）

Markdown 還沒有辦法指定圖片的高度與寬度，如果你需要的話，你可以使用普通的標簽。

<img src="https://static.jyshare.com/images/runoob-logo.png" width="50%">

表格

Markdown 制作表格使用 | 來分隔不同的單元格，使用 - 來分隔表頭和其他行。

|  表頭   | 表頭  |
|  ----  | ----  |
| 單元格  | 單元格 |
| 單元格  | 單元格 |

表頭	表頭
單元人生格	單元人生格
單元人生格子	單元人生格子
單元人生格子	單元人生格子

表格對齊

-: 設置內容和標題欄居右對齊。
:- 設置內容和標題欄居左對齊。
:-: 設置內容和標題欄居中對齊。

默認左對齊

| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

左對齊	右對齊	居中對齊
單元人生格	單元人生格	單元人生格
單元格	單元格	單元格

高級技巧

支持的HTML元素

不在 Markdown 涵蓋范圍之內的標簽，都可以直接在文檔里面用 HTML 撰寫。

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重啟電腦

使用 Ctrl+Alt+Del 重啟電腦

轉義

Markdown 使用了很多特殊符號來表示特定的意義，如果需要顯示特定的符號則需要使用轉義字符，Markdown 使用反斜杠轉義特殊字符：

**文本加粗** 
\*\* 正常顯示星號 \*\*

文本加粗
** 正常顯示星號 **
Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號：

\   反斜線
`   反引號
*   星號
_   下劃線
{}  花括號
[]  方括號
()  小括號
#   井字號
+   加號
-   減號
.   英文句點
!   感嘆號

公式

Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 來渲染數學表達式。

KaTeX 擁有比 MathJax 更快的性能，但是它卻少了很多 MathJax 擁有的特性。你可以查看 KaTeX supported functions/symbols 來了解 KaTeX 支持那些符號和函數。
默認下的分隔符：

$...$ 或者 $...$ 中的數學表達式將會在行內顯示。

畫流程圖、時序圖(順序圖)、甘特圖

橫向流程圖源碼格式：

```mermaid
graph LR
A[方形] -->B(圓角)
    B --> C{條件a}
    C -->|a=1| D[結果1]
    C -->|a=2| E[結果2]
    F[橫向流程圖]
` ` `

graph LR A[方形] -->B(圓角) B --> C{條件a} C -->|a=1| D[結果1] C -->|a=2| E[結果2] F[橫向流程圖]

豎向流程圖源碼格式：

```mermaid
graph TD
A[方形] --> B(圓角)
    B --> C{條件a}
    C --> |a=1| D[結果1]
    C --> |a=2| E[結果2]
    F[豎向流程圖]
` ` `

graph TD A[方形] --> B(圓角) B --> C{條件a} C --> |a=1| D[結果1] C --> |a=2| E[結果2] F[豎向流程圖]

標準流程圖源碼格式：

```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
`` `

這里不直接支持flow語法，用圖片代替

標準流程圖源碼格式（橫向）：

```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
`` `

這里不直接支持flow語法，用圖片代替

UML時序圖源碼樣例：

```sequence
對象A->對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象A->對象B: 你真的好嗎？
` ``

這里不直接支持sequence語法，用圖片代替

UML時序圖源碼復雜樣例：

```sequence
Title: 標題：復雜使用
對象A->對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象B->小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->對象B: 你真的好嗎？
Note over 小三,對象B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
`` `

這里不直接支持sequence語法，用圖片代替

UML標準時序圖樣例：

```mermaid
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
  sequenceDiagram
    participant 張三
    participant 李四
    張三->王五: 王五你好嗎？
    loop 健康檢查
        王五->王五: 與疾病戰斗
    end
    Note right of 王五: 合理 食物 <br/>看醫生...
    李四-->>張三: 很好!
    王五->李四: 你怎么樣?
    李四-->王五: 很好!
` ``

%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭 sequenceDiagram participant 張三 participant 李四張三->王五: 王五你好嗎？ loop 健康檢查王五->王五: 與疾病戰斗 end Note right of 王五: 合理食物 <br/>看醫生... 李四-->>張三: 很好! 王五->李四: 你怎么樣? 李四-->王五: 很好!

甘特圖樣例：

```mermaid
%% 語法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 軟件開發甘特圖
        section 設計
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI設計                     :         des3, after des2, 5d
    未來任務                     :         des4, after des3, 5d
        section 開發
        學習準備理解需求                      :crit, done, 2014-01-06,24h
        設計框架                             :crit, done, after des2, 2d
        開發                                 :crit, active, 3d
        未來任務                              :crit, 5d
        耍                                   :2d
        section 測試
        功能測試                              :active, a1, after des3, 3d
        壓力測試                               :after a1  , 20h
        測試報告                               : 48h
` ``

%% 語法示例 gantt dateFormat YYYY-MM-DD title 軟件開發甘特圖 section 設計需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI設計 : des3, after des2, 5d 未來任務 : des4, after des3, 5d section 開發學習準備理解需求 :crit, done, 2014-01-06,24h 設計框架 :crit, done, after des2, 2d 開發 :crit, active, 3d 未來任務 :crit, 5d 耍 :2d section 測試功能測試 :active, a1, after des3, 3d 壓力測試 :after a1 , 20h 測試報告 : 48h

燊楽 -- 嚕啦啦 ??

posted @ 2024-12-26 18:55 燊楽閱讀(46) 評論(1) 收藏舉報

刷新頁面返回頂部

雲が流れてく思ったより早く

Markdown學習

引入

標題

段落格式

字體

分割線

刪除線

下劃線

腳注

列表

無序列表

有序列表

列表嵌套

區塊

區塊嵌套

區塊中使用列表

列表中使用區塊

代碼

代碼區塊

鏈接

高級鏈接

圖片

表格

表格對齊

高級技巧

支持的HTML元素

轉義

公式

畫流程圖、時序圖(順序圖)、甘特圖

橫向流程圖源碼格式：

豎向流程圖源碼格式：

標準流程圖源碼格式：

標準流程圖源碼格式（橫向）：

UML時序圖源碼樣例：

UML時序圖源碼復雜樣例：

UML標準時序圖樣例：

甘特圖樣例：

公告

雲が流れてく 思ったより早く

Markdown學習

引入

標題

段落格式

字體

分割線

刪除線

下劃線

腳注

列表

無序列表

有序列表

列表嵌套

區塊

區塊嵌套

區塊中使用列表

列表中使用區塊

代碼

代碼區塊

鏈接

高級鏈接

圖片

表格

表格對齊

高級技巧

支持的HTML元素

轉義

公式

畫流程圖、時序圖(順序圖)、甘特圖

橫向流程圖源碼格式：

豎向流程圖源碼格式：

標準流程圖源碼格式：

標準流程圖源碼格式（橫向）：

UML時序圖源碼樣例：

UML時序圖源碼復雜樣例：

UML標準時序圖樣例：

甘特圖樣例：

公告

雲が流れてく思ったより早く