【Tools】MarkDown教程(七)-Typora詳細教程

00. 目錄

01. Markdown簡介

Typora是一款輕便簡潔的Markdown編輯器，支持即時渲染技術，這也是與其他Markdown編輯器最顯著的區別。即時渲染使得你寫Markdown就想是寫Word文檔一樣流暢自如，不像其他編輯器的有編輯欄和顯示欄。

• Typora刪除了預覽窗口，以及所有其他不必要的干擾。取而代之的是實時預覽。
• Markdown的語法因不同的解析器或編輯器而異，Typora使用的是GitHub Flavored Markdown。

Typora 首先是一個 Markdown 文本編輯器，它支持且僅支持 Markdown 語法的文本編輯。在 Typora 官網 上他們將 Typora 描述爲 「A truly minimal markdown editor. 」。

Markdown 是一種輕量級標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔。

Markdown 語言在 2004 由約翰·格魯伯（英語：John Gruber）創建。

Markdown 編寫的文檔可以導出 HTML 、Word、圖像、PDF、Epub 等多種格式的文檔。

Markdown 編寫的文檔後綴爲 .md, .markdown。

02. Typora下載

2.1 Typora官網下載

下載：https://www.typora.io/

2.2 CSDN高速下載

下載：typora-setup-x64-20200701.rar

03. 常用快捷鍵

• 加粗： Ctrl + B
• 標題： Ctrl + H
• 插入鏈接： Ctrl + K
• 插入代碼： Ctrl + Shift + C – 無法執行
• 行內代碼： Ctrl + Shift + K
• 插入圖片： Ctrl + Shift + I
• 無序列表：Ctrl + Shift + L – 無法執行
• 撤銷： Ctrl + Z
• 一級標題： Ctrl + 1 – 以此類推

Typora快捷鍵整合
​```
Ctrl+1  一階標題    			Ctrl+B  字體加粗
Ctrl+2  二階標題    			Ctrl+I  字體傾斜
Ctrl+3  三階標題    			Ctrl+U  下劃線
Ctrl+4  四階標題    			Ctrl+Home   返回Typora頂部
Ctrl+5  五階標題    			Ctrl+End    返回Typora底部
Ctrl+6  六階標題    			Ctrl+T  創建表格
Ctrl+L  選中某句話   	   	   Ctrl+K  創建超鏈接
Ctrl+D  選中某個單詞  		   Ctrl+F  搜索
Ctrl+E  選中相同格式的文字   	 Ctrl+H  搜索並替換
Alt+Shift+5 刪除線 			 Ctrl+Shift+I    插入圖片
Ctrl+Shift+M    公式塊 		 Ctrl+Shift+Q    引用

注：一些實體符號需要在實體符號之前加”\”才能夠顯示
​```

04. 塊元素-換行符

在markdown中，段落由多個空格分隔。在Typora中，只需回車即可創建新段落。

05. 塊元素-標題級別

# 一級標題 快捷鍵爲 Ctrl + 1
## 二級標題 快捷鍵爲 Ctrl + 2
......
###### 六級標題 快捷鍵爲 Ctrl + 6

06. 塊元素-引用文字

> + 空格 + 引用文字

07. 塊元素-無序列表

使用 * + - 都可以創建一個無序列表

## un-ordered list
*   Red
*   Green
*   Blue

08. 塊元素-有序列表

使用 1. 2. 3. 創建有序列表

## ordered list
1.  Red
2. 	Green
3.	Blue

09. 塊元素-任務列表

- [ ] 不勾選
- [x] 勾選

- [ ] a task list item
- [ ] list syntax required
- [ ] normal **formatting**, @mentions, #1234 refs
- [ ] incomplete
- [x] completed

10. 塊元素-代碼塊

在Typora中插入程序代碼的方式有兩種：使用反引號 `（~ 鍵）、使用縮進（Tab）。

• 插入行內代碼，即插入一個單詞或者一句代碼的情況，使用 code 這樣的形式插入。
• 插入多行代碼輸入3個反引號（`） + 回車，並在後面選擇一個語言名稱即可實現語法高亮。

Here's an example:

​```
function test() {
  console.log("notice the blank line before this function?");
}
​```

syntax highlighting:
​```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
​```

11. 塊元素-數學表達式

當你需要在編輯器中插入數學公式時，可以使用兩個美元符 $$ 包裹 TeX 或 LaTeX 格式的數學公式來實現。根據需要加載 Mathjax 對數學公式進行渲染。

按下 $$，然後按下回車鍵，即可進行數學公式的編輯。
$\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}$

$$
\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}
$$

12. 塊元素-表格

輸入 | 表頭1 | 表頭2 |並回車。即可創建一個包含2列表。快捷鍵 Ctrl + T彈出對話框。

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

• 不管是哪種方式，第一行爲表頭，第二行爲分割表頭和主體部分，第三行開始每一行爲一個表格行
• 列與列之間用管道符號| 隔開
• 還可設置對齊方式(表頭與內容之間)，如果不使用對齊標記，內容默認左對齊，表頭居中對齊
  • 左對齊 ：|
  • 右對齊 |：
  • 中對齊 ：|：
• 爲了美觀，可以使用空格對齊不同行的單元格，並在左右兩側都使用 | 來標記單元格邊界
• 爲了使 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 |

13. 塊元素-腳註

這個例子的腳註爲¹。

注意：該例子腳註標識是1，腳註標識可以爲字母數字下劃線，但是暫不支持中文。腳註內容可爲任意字符，包括中文。

You can create footnotes like this[^footnote].

[^footnote]: Here is the *text* of the **footnote**.

14. 塊元素-水平線

輸入 *** 或者 --- 再按回車即可繪製一條水平線，如下：

---

---

***
---

15. 塊元素-YAML Front Matter

Typora支持YAML Front Matter， 在文章開頭輸入---，然後按回車即可。

16. 塊元素-目錄[toc]

輸入 [ toc ] 然後回車，即可創建一個“目錄”。TOC從文檔中提取所有標題，其內容將自動更新。

17. 跨度元素

跨度元素即圖片，網址，視頻等，在Typora中輸入後，會立即載入並呈現。

18. 跨度元素-內部鏈接

這是一個帶有標題屬性的 [鏈接](http://example.com/ "標題")
這是一個沒有標題屬性的 [鏈接](http://example.net/)

這是一個帶有標題屬性的 鏈接
這是一個沒有標題屬性的 鏈接

內部鏈接，跳轉到指定的標題

Command(on Windows: Ctrl) + Click [This link](#block-elements)

[跳轉到塊元素-代碼塊](#10. 塊元素-代碼塊)

19. 跨度元素-參考鏈接

這是一個[參考鏈接][id]。
[id]: http://example.com/ “可選標題”

這是一個參考鏈接.

20. 跨度元素-網址

Typora允許用<括號括起來>, 把URL作爲鏈接插入。

<[email protected]> 將會成爲 [email protected].

Typora還會自動鏈接標準網址。

www.baidu.com

21. 跨度元素-圖片

![顯示的文字](C:\Users\Hider\Desktop\echart.png "圖片標題")

![顯示的文字](C:\Users\Hider\Desktop\echart.png)

除了以上2種方式之外，還可以直接將圖片拖拽進來，自動生成鏈接。

22. 跨度元素-斜體

使用 *單個星號* 或者 _單下劃線_ 可以字體傾斜。快捷鍵 Ctrl + I

*單個星號 *
_單下劃線 _

單個星號
單下劃線

可以使用\轉義*

*this text is surrounded by literal asterisks*

23. 跨度元素-加粗

使用 **兩個星號** 或者 __兩個下劃線__ 可以字體加粗。快捷鍵 Ctrl + B

**double asterisks**

__double underscores__

顯示效果：

double asterisks

double underscores

24. 跨度元素-加粗斜體

使用***加粗斜體***可以加粗斜體。

`***加粗斜體***`

加粗斜體

25. 跨度元素-代碼標記

標記代碼使用反引號，即在英文輸入法下，ESC鍵下面和1鍵左邊的符號。

使用`printf`函數

使用printf函數

26. 跨度元素-刪除線

使用~~刪除線~~ 快捷鍵 Alt + Shift + 5

~~刪除線~~

刪除線

27. 跨度元素-下劃線

通過<u>下劃線的內容</u> 或者 快捷鍵Ctrl + U可實現下劃線

<u>下劃線</u>

下劃線

28. 跨度元素-表情符號

Github的Markdown語法支持添加emoji表情，輸入不同的符號碼（兩個冒號包圍的字符）可以顯示出不同的表情。

:smile:

😄

29. 跨度元素-內聯公式

To use this feature, please enable it first in the Preference Panel -> Markdown Tab. Then, use $ to wrap a TeX command. For example: $\lim_{x \to \infty} \exp(-x) = 0$ will be rendered as LaTeX command.
$\lim_{x \to \infty} \exp(-x) = 0$

30. 跨度元素-下標

To use this feature, please enable it first in the Preference Panel -> Markdown Tab. Then, use ~ to wrap subscript content. For example: H~2~O, X~long\ text~/

可以使用 <sub>文本</sub>實現下標。

H<sub>2</sub>O

H₂O

31. 跨度元素-上標

可以使用<sup>文本</sup>實現上標。

<sup>2</sup>

X^2

x²

32. 跨度元素-高亮

==高亮==(需在設置中打開該功能)

==高亮==

高亮

33. 跨度元素-HTML

使用 <center>這是要居中的內容</center>可以使文本居中

這是要居中的內容

You can use HTML to style content what pure Markdown does not support. For example, use <span style="color:red">this text is red</span> to add text with red color.

this text is red

34. 跨度元素-嵌入內容

支持iframe-based嵌入代碼，

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

35. 跨度元素-視頻

You can use the <video> HTML tag to embed videos. For example:

<video src="xxx.mp4" />

36. 跨度元素-換行符

使用 空格 + 空格 + Enter可以實現換行，例如：

或者可以使用<br/>實現換行。

37. 轉義

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

Markdown 支持以下這些符號前面加上反斜槓來幫助插入普通的符號：

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

38. 總結

建議打開大綱視圖Ctrl + Shift + 1

插入表格需要頂格寫，否則無法顯示

語法無須刻意記憶，右鍵可查詢

39. 附錄

菜鳥教程：https://www.runoob.com/markdown/md-tutorial.html

---

1. 這兒是腳註1 ↩︎