最近發現了 Markdown 這種從來沒有接觸過的寫作方式,看起來很厲害的樣子。於是用了一個週末的時間研究了好幾個 Markdown 寫作軟件,如Markdown 2,Yu writer,Typora等,綜合對比 Typora 最符合我的口味,該軟件目前還在內測階段,有Mac,Windows 和 Linux 版本。
Typora 官網 -> https://typora.io/
Typora 官方文檔 -> https://support.typora.io/
下面的代碼是根據 Markdown Reference 學習的源碼,由於 CSDN 的 Markdown 與 Typora 有所出入,所以此處就不貼出 Typora-learning.md 文件,感興趣的童鞋可以到博主 GitHub 目錄下查看/下載相應資料:
https://github.com/fhqfghgdx/Markdown-Learning
小白上路,大神輕噴!^_^
[TOC]
# Block Elements
## Paragraph and line breaks
一個段落只是一個或多個連續的文本行。在Markdown源代碼中,段落由多個空行分隔。在Typora中,您只需按回車即可創建一個新段落。
按下Shift + Enter 可創建一個換行符。但是,大多數markdown解析器會忽略單行換行,讓其他markdown解析器識別您的換行符,您可以在行末留出兩個空格,或者插入<br/>
## Headers
創建一級到六級標題
```markdown
# 標題1
## 標題2
...
###### 標題6
```
快捷鍵:
![標題快捷鍵](E:\OneDrive\GitHub\Markdown-Learning\Picture\標題快捷鍵.png)
## Blockquotes
使用 '>' 符號
```markdown
> This is a blockquote with two paragraphs. This is first paragraph.
```
> This is a blockquote with two paragraphs. This is first paragraph.
>
> This is second pragraph.Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> This is another blockquote with one paragraph. There is three empty line to seperate two blockquote.
>
> 在引用中再次引用
>
> > 二級引用第一段
> >
> > 二級引用第二段
> >
> > > 三級引用第一段
> > >
> > > ...
源碼:
```markdown
> This is a blockquote with two paragraphs. This is first paragraph.
>
> This is second pragraph.Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> This is another blockquote with one paragraph. There is three empty line to seperate two blockquote.
>
> 在引用中再次引用
>
> > 二級引用第一段
> >
> > 二級引用第二段
> >
> > > 三級引用第一段
> > >
> > > ...
```
## Lists
無序列表:使用 '*','+','-'
有序列表:使用 '1.','2.',...
### un-ordered list
+ Red
+ Green
+ Block
+ Yellow
+ Blue
源碼:
```markdown
+ Red
+ Green
+ Block
+ Yellow
+ Blue
```
**注: 快捷鍵 Ctrl + / 切換視圖爲源代碼模式**
### ordered list
1. Red
1. Green
1. Block
2. Yellow
1. Blue
源碼:
```markdown
1. Red
1. Green
1. Block
2. Yellow
1. Blue
```
## Task list
創建任務列表形式的條目
- [x] A task list item
- [ ] list syntax required
- [ ] normal **formatting** , @mentions, #1234 refs
- [x] incomplete
- [ ] complete
源碼:
```markdown
- [x] A task list item
- [ ] list syntax required
- [ ] normal **formatting** , @mentions, #1234 refs
- [x] incomplete
- [ ] complete
```
## (Fenced) Code Blocks
Typora 僅支持 GitHub 格式的代碼塊,而不支持 Markdown 原始代碼塊的格式。
使用 Fence 創建代碼塊:使用連續的三個 '```',Typora 將把其之後的行解析成代碼塊。
```markdown
Code block line 1
```
設置代碼塊語言:'```Python'
```python
import Serial
...
```
## Math Blocks
創建公式:兩個連續的 '$$'
Input `$$`, then press ‘Return’ key will trigger an input field which accept *Tex/LaTex* source.
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$
源碼:
```markdown
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$
```
## Tables
Input `| First Header | Second Header |` and press `return` key will create a table with two column.
### 使用源碼格式建立表格:
切換到Markdown源碼視圖輸入下面的代碼塊
```markdown
| Left-Aligned | Center Aligned | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
```
再切換回標準視圖可以看到如下表格
| Left-Aligned | Center Aligned | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
### 使用 Typora 快速建立表格
**快捷鍵:Ctrl + T**,可以快速設置對齊方式,而不是使用 ':' 與 '-' 結合的方法
| | | |
| ---- | ---- | ---- |
| | | |
| | | |
| | | |
## Footnotes
You can create footnates like this[^1] and that[^2] .
[^1]: Here is the *this* of the **footnote**
[^2]: Here is the *that* of the **footnote**
源碼:
```markdown
You can create footnates like this[^1] and that[^2] .
[^1]: Here is the *this* of the **footnote**
[^2]: Here is the *that* of the **footnote**
```
## Horizontal Rules
創建水平分割線:'***' 或 '---'
例如:
***
---
源碼:
```
***
---
```
## YAML Front Matters
Typora support [YAML Front Matters](https://jekyllrb.com/docs/frontmatter/) now. Input `---` at the top of the article and then press `Enter` will introduce one. Or insert one metadata block from the menu.
**注:快捷鍵 Ctrl + Shift + L 隱藏/顯示側邊欄**
## Table of Contents(TOC)
輸入 '[toc]' 按 enter 鍵會生成本文檔的目錄
**切換到源碼模式,可以看到本文在開頭添加了 `[TOC]`,用於生成本文的目錄結構,且隨着文章修改而自動更新**
# Span Element
## Links
Markdown 支持兩種類型的 links: inline 和 reference
兩種模式的鏈接名稱都使用 [] 包含
This is [an example](https://www.baidu.com "百度一下") inline link.
[This link](https://www.baidu.com) has no title attribute.
源碼:
```markdown
This is [an example](https://www.baidu.com "百度一下") inline link.
[This link](https://www.baidu.com) has no title attribute.
```
### Internal Links(內部引用)
Command(on Windows: Ctrl) + Click [This link](https://support.typora.io/Markdown-Reference/#block-elements) will jump to header `Block Elements`. To see how to write that, please move cursor or click that link with `⌘` key pressed to expand the element into markdown source.
### Reference Links
可以先創建一個連接,[] 中的內容用一個“變量”代替,然後在本文章的任意位置均可以對該“變量”進行賦值,設置其網址和標題,如下:
This is [an example][id] reference-style link.
Then, anywhere in the document, you define your link label like this, on a line by itself:
[id]: http://example.com/ "Optional Title Here"
源碼:
```markdown
This is [an example][id] reference-style link.
Then, anywhere in the document, you define your link label like this, on a line by itself:
[id]: http://example.com/ "Optional Title Here"
```
也可以將中括號內空出來,僅使用連接名稱作爲“變量”去賦值:
[Baidu][]
And then difine the link:
[Baidu]:http://www.baidu.com/
源碼:
```markdown
[Google][]
And then define the link:
[Google]:http://google.com
```
## URLs
Typora 可以插入 URLs 作爲鏈接,由 <> 包含
`<[email protected]>` becomes [[email protected]](mailto:[email protected]).
`<baidu>`的地址是:www.baidu.com
## Images
### 快捷鍵 Ctrl + Shift + I
手動編輯 `![xxx](//path)`或使用快捷鍵 Ctrl + Shift + I
![藍色經典](E:\OneDrive\GitHub\Markdown-Learning\Picture\藍色經典.jpg)
源碼:
```markdown
![藍色經典](E:\OneDrive\GitHub\Markdown-Learning\Picture\藍色經典.jpg)
```
### 直接將圖片拖進文章
此方式將自動地創建圖片的鏈接信息
![wallhaven-133008](E:\OneDrive\GitHub\Markdown-Learning\Picture\wallhaven-133008.jpg)
源碼:
```markdown
![wallhaven-133008](E:\OneDrive\GitHub\Markdown-Learning\Picture\wallhaven-133008.jpg)
```
## Emphasis
設置斜體突出顯示,快捷鍵:Ctrl + I,或手輸 `*xxx*` 或 `_xxxx_`
*single asterisks*
_single underscores_
源碼:
```markdown
*single asterisks*
_single underscores_
```
**注:若需要使用`*`等特殊符號作爲文本顯示,則需要使用`\`對其進行轉義**
## Strong
設置粗體突出顯示,快捷鍵:Ctrl + B,或手輸`**xxxx**`
## Code
`` `符號用於代碼引用
**注:在行內的代碼塊引用使用兩個`` ` 包含文本,如:**
```markdown
`code`
``code``
```
## Strikethrough
爲文本添加刪除線,使用`Shift` + `` `鍵,在文本兩端添加 '~~' 符號
`Mistaken text.` becomes ~~Mistaken text~~
源碼:
```markdown
`Mistaken text.` becomes ~~Mistaken text~~
```
## Underlines
爲文本添加下劃線:`<u>xxx</u>`
`<u>Underline</u>` becomes <u>Underline</u>.
源碼:
```markdown
`<u>Underline</u>` becomes <u>Underline</u>.
```
## Emoji:happy:
`smile` -> :smile:
`satified`-> :satisfied:
......
源碼:
```markdown
`smile` -> :smile:
`satified`-> :satisfied:
```
**以下功能需要開啓 Markdown 擴展功能,在 Typora 中設置路徑:**
**文件->偏好設置->Markdown擴展語法->全部勾選**
![Markdown擴展語法](E:\OneDrive\GitHub\Markdown-Learning\Picture\Markdown 擴展語法.png)
## Inline Math
$\lim_{x \to \infty} \exp(-x) = 0$
源碼:
```
$\lim_{x \to \infty} \exp(-x) = 0$
```
## Subscript
下標設置:使用`~`包含下標文本
H~2~O
X~long~
源碼:
```markdown
H~2~O
X~long~
```
## Superscript
上標設置:使用`^`包含上標文本
X^2^
源碼:
```markdown
X^2^
```
## Highlight
高亮設置:使用`==`包含高亮文本
Here is the *test* of ==footnote.==
源碼:
```markdown
Here is the *test* of ==footnote.==
```