Typora系列之Quick Start-Markdown Reference

        最近發現了 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.==
```


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章