最齊的Typora使用教程

最齊全的Typora使用教程

作者：水木子

一、Markdown與Typora介紹

1.1 Markdown介紹

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

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

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

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

1.2 Typora介紹與下載

Typora編輯器讓人們能更簡單地用Markdown語言書寫文字，解決了使用傳統的Markdown編輯器寫文的痛點，並且界面簡潔優美，實現了實時預覽等功能。

Typora官網： https://typora.io/

windos版本下載地址：https://typora.io/#windows

請根據自己的電腦配置自行下載安裝，過程簡單，在此不多做介紹。

二、Markdown語法

2.1 標題

使用 # 可以表示標題，一級標題對應一個 # ，二級標題對應兩個 # 號，最多至六級標題。在Typora中，# 後要緊接着一個空格才能表示標題，否則就是普通字符。

在Typora中，也可以使用快捷鍵Ctrl+1（2，3，4，5，6）表示相對應的標題。Ctrl+0表示段落。標題快捷鍵信息可在菜單欄中的段落選項下查看。

2.2 字體

• 用一對星號*括住的文本表示斜體文本，如：*要變斜體的文本*，斜體文本 ；
• 也可以用一對下劃線_括住文本來表示斜體文本，如：_要變斜體的文本_，斜體文本 ；

也可以使用Typora的快捷鍵Ctrl+I來表示斜體文本。

• 用一對**括住的文本表示粗體文本，如：**要變粗體的文本**，粗體文本；
• 也可以用一對__括住的文本來表示粗體文本，如：__要變粗體的文本__，粗體文本；

也可以使用Typora的快捷鍵Ctrl+B來表示粗體文本。

• 用一對***括住的文本表示粗斜體文本，如：***要變粗斜體的文本***，粗斜體文本；
• 也可以用一對___括住的文本來表示粗斜體文本，如：___要變粗斜體的文本___，粗斜體文本；

2.3 各種線

• 分割線，可以使用三個及以上的 + 號或 * 號或 - 來表示一條分割線；

由三個*號表示的分割線：

---

由三個+號表示的分割線：

+++(在CSDN中不代表分割線）

由三個-號表示的分割線：

---

• 刪除線，可以使用一對~~括住的文本來表示刪除文本，如：~~要加刪除線的文本~~，刪除文本；在Typora中，也可以使用快捷鍵Alt+Shift+5來加刪除線，語法相同，刪除線。
• 下劃線，可以使用HTML的標籤<u>和</u>表示增加下劃線的文本，如：<u>要增加下劃線的文本</u>，下劃線；在Typora中，也可以使用快捷鍵Ctrl+U來增加下劃線，語法也是相同的，下劃線。

2.4 列表

無序列表

可以使用*，+或-標記符號來表示無序列表項，記住要在標記符號後添加一個空格，語法顯示如下：

* 第一項
* 第二項
+ 第一項
+ 第二項
- 第一項
- 第二項

結果如下：

• 第一項
• 第二項

• 第一項
• 第二項

• 第一項
• 第二項

有序列表

可以使用數字加上.再加上空格來表示有序列表，語法如下：

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

結果如下：

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

從結果可以看出，數字並不重要。

嵌套列表

• 一
  • 1.1
    • 1.1.1
      • 1.1.1.2
        • 1.1.1.3
• 二
  • 2.1
    • 2.1.1
    • 1. 有序列表第一項
      2. 有序列表第二項

首先使用*、+或-進入列表，然後回車換行，會發現系統自動生成列表第二項，此時按下Tab鍵，列表第二項變爲第一項的子列表。按回車退出當前列表。可以在無序列表中嵌套有序列表。

1. 一
   1. 一、一
      1. 一、一、一
         1. 一、一、一、一
         2. 一、一、一、二
2. 二
   1. 二、一
   2. • 無序列表第一項
      • 無序列表第二項

也可以在有序列表中嵌套無序列表。

2.5 區塊

當我們想要引用別人的文章內容時，可以將其放在區塊內。

可以使用>加空格來表示區塊。

這是區塊

區塊也可以嵌套

二級區塊

三級區塊

要退出區塊，同樣使用Enter鍵即可。

2.6 代碼

如果是一行代碼，可以使用段內代碼塊來表示，用一對 `（數字1旁邊的符號）括住代碼。

比如printf("Hello World!")

如果是代碼段，那麼可以使用三個 ` 加Enter/空格+編程語言來表示。如：

# include <stdio.h>
void main(){
	printf("Hello world!\n");
}

可以在代碼塊的右下角選擇編程語言。

2.7 鏈接

鏈接的使用方式有兩種語法，如下：

[鏈接文字](鏈接地址)
或
<鏈接地址>

我們可以使用鏈接打開網頁，示例如下：

[百度](https://www.baidu.com/)
<https://www.baidu.com/>

顯示效果如下：

百度
https://www.baidu.com/

當鼠標移到相應的鏈接文字時，按住Ctrl+鼠標左鍵點擊訪問。

鏈接除了可以打開相應的網頁外，還可以打開本地文件，使用方式類似，不過鏈接地址需要使用本地文件的地址，相對地址、絕對地址均可：

示例：

[打開LinkTest.md文檔](./LinkTest.md)
[打開LinkTest.png照片](./img/LinkTest.png)

結果如下：

打開LinkTest.md文檔

打開LinkTest.png照片

經測試可以打開相應的文件。但是不能使用<要打開的文件地址>來打開相應的文件，比如<./LinkTest.md>並沒有表現爲可鏈接狀態。

補充知識：

一個小圓點.表示當前目錄，故./LinkTest.md表示當前目錄下的LinkTest.md文件，./img/LinkTest.png表示當前目錄下的img文件下的LinkTest.png文件。

兩個小圓點..表示上一級目錄。

我們也可以使用鏈接來實現頁內跳轉，語法爲：

[鏈接文字](#標題文字)

示例：

[跳轉到第一章第一節](#1.1 Markdown介紹)

結果如下：
[跳轉到第一章第一節](#1.1 Markdown介紹)

經測試，可以成功跳轉。
在CSDN中不支持這種頁內跳轉方式。

2.8 圖片

我們也可以在Markdown文檔中插入圖片，語法如下：

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

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

• 首先一個感嘆號
• 然後中括號裏面寫屬性文本
• 小括號裏面寫圖片地址，後可接標題

示例語法：

![本地png圖片PictureTest.png](./img/PictureTest.png)

![本地jpg圖片](./img/PictureTest.jpg)

![網絡圖片](http://static.runoob.com/images/runoob-logo.png "菜鳥教程")

結果如下：

在Typora中，也可以直接使用Ctrl+C，Ctrl+V來直接進行復制粘貼圖片，但是，由於Markdown是需要圖片的地址的，所以需要簡單設置一下Typora。

點擊文件 --> 偏好設置 --> 圖像，如下：

可以自行設置選擇將圖片複製到哪個文件夾。

這裏選擇複製到指定路徑，然後在下面一欄中填寫./img，表示將圖片複製到你正在編輯的文檔同一級的img文件夾下。在下面的選項中，勾選第一、二、三項。正因爲勾選了第二項，所以當我們在插入網絡圖片時，Typora會自動幫我們將網絡圖片下載到指定的路徑下，前面的"菜鳥教程"圖片便是如此。

由於Markdown的特殊語法，故經常會出現圖片加載失敗的情況，很大的可能就是因爲在指定的路徑上找不到相應的圖片，當然，有時候也是由於Typora的原因，重啓Typora即可。

2.9 表格

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

語法如下：

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

結果如下：

表頭	表頭	表頭
單元格	單元格	單元格
單元格	單元格	單元格

我們可以設置對齊方式：

• :-表示左對齊
• -:表示右對齊
• :-:表示中間對齊

示例如下：

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

結果如下：

左對齊	右對齊	中間對齊
單元格	單元格	單元格
單元格	單元格	單元格

在Typora中，我們可以使用快捷鍵Ctrl+T來插入表格，並選擇行列，當選中表格某一單元格時，可以在表格左上角手動設置對齊方式，右上角選擇更多操作。

三、Typora與數學公式

在本章中，重點不在於介紹如何插入數學公式，而在於如何表示數學符號。

3.1 如何插入數學公式

在Typora中，有兩種方法插入數學公式，語法爲：

第一種方法：$數學公式$
第二種方法：
$$
數學公式
$$

第一種方法表示插入行內公式（內聯公式），即可以將公式插入到一行中，比如$1+2=3$這樣的公式。

第二種方法表示插入行間公式（外聯公式），即可以將公式插入到行與行之間，單獨佔據一行或者數行的空間，並且居中放置。
$1+2=3$
如果要在行間公式內換行，在換行的位置使用\\。

接下來重點介紹如何表示數學符號。

3.2 上標下標

上下標可以使用^，_後跟相應的符號來實現。如：

$上標：a^1，下標：a_1$

如果作爲上標、下標的符號不止一個，則需要用花括號{}將其括起來。如：

$上標爲12：a^{12},下標爲34：a_{34}$

更多例子：
$f(x)=x^{x^x}\\ e^{x2}\\ e^{x^2}\\$

3.3 根號

我們可以使用\sqrt{}來表示根號。如：

\sqrt{2},\sqrt{5}

結果爲：

$\sqrt{2},\sqrt{5}$

我們也可以使用\sqrt[]{}來表示更具體的根號信息：

\sqrt[3]{4}，\sqrt[4]{10}

$\sqrt[3]{4}，\sqrt[4]{10}$

3.4 上下水平線

我們可以使用\underline{},\overline{}來表示上下水平線，如：

$下水平線：\underline{a+b}$
$上水平線：\overline{a+b}$

結果爲：

$下水平線：\underline{a+b}$

$上水平線：\overline{a+b}$

3.5 上下水平大括號

我們可以使用\overbrace{} 和 \underbrace{} 在表達式的上、下方給出一水平的大括號

$\overbrace{x_1+x_2+x_3}$
$\underbrace{x_1+x_2+x_3}$

結果爲：

$\overbrace{x_1+x_2+x_3}$
$\underbrace{x_1+x_2+x_3}$

當然，我們也可以在括號上添加說明，使用語法爲\overbrace{}^{}和\underbrace{}_{}

$\overbrace{x_1+x_2+x_3}^{3個元素}$
$\underbrace{x_1+x_2+x_3}_{3個元素}$

$\overbrace{x_1+x_2+x_3}^{3個元素}$

$\underbrace{x_1+x_2+x_3}_{3個元素}$

3.6 向量符號

我們可以使用\vec{}來表示單個字母向量，其實也可以表示多個字母，但不美觀，另兩個命令\overrightarrow{} 和\overleftarrow{}在定義從A 到B 的向量時非常有用。如：

$\vec{a}$
$\vec{AB}$
$\vec{ABC}$
$\overrightarrow{AB}$
$\overleftarrow{AB}$

結果爲：

$\vec{a}$
$\vec{AB}$

$\vec{ABC}$

$\overrightarrow{AB}$
$\overleftarrow{AB}$

3.7 分數

我們可以使用\frac{}{}來表示分數，如：

$\frac{1}{2}$
$\frac{\sqrt{3}}{4}$

結果爲：

$\frac{1}{2}$
$\frac{\sqrt{3}}{4}$

3.8 積分運算符

積分運算符用\int 來生成 ，用\int_{}^{}來表示積分上下界，如：

$\int$
$\int_{1}^{2}$

結果爲：

$\int$
$\int_{1}^{2}$

3.9 求和運算符

求和運算符可以使用\sum來生成，用\sum_{}^{}來表示求和上下界，如：

$\sum$
$\sum_{i=1}^{10}x_i$

結果爲：

$\sum$
$\sum_{i=1}^{10}x_i$

求和符號的上下標在內聯公式裏，表現爲上面那樣，當在外聯公式裏時，表現如下：
$\sum_{i=1}^{10}x_i$

3.10 連乘運算符

連乘運算符用\prod{}表示，同樣地，上下標用prod_{}^{}表示，如：

$\prod$
$\prod_{i=1}^{10}x_i$
$$
\prod_{i=1}^{10}x_i
$$

結果爲：

$\prod$
$\prod_{i=1}^{10}x_i$
$\prod_{i=1}^{10}x_i$

3.11 特殊符號

希臘字母

$\alpha$爲\alpha，$\beta$爲\beta，$\gamma$爲\gamma，$\theta$爲\theta，$\rho$爲\rho，$\lambda$爲\lambda，$\mu$爲\mu

$\Delta$爲\Delta，$\pi$爲\pi，$\Omega$爲\Omega

關係運算符

大於>，大於等於$\geq$爲\geq或\ge

小於<，小於等於$\leq$爲\leq或\le

等於=，不等於$\neq$爲\neq或\ne

加減乘除

加+ 減-

乘$\times$爲\times 除$\div$爲\div

3.12 矩陣表示

我們可以使用以下格式來顯示矩陣：

$$
\begin{matrix}
1 & 2 & 3\\
4 & 5 & 6\\
\end{matrix}
$$

結果爲：
$\begin{matrix} 1 & 2 & 3\\ 4 & 5 & 6\\ \end{matrix}$
可是這並不是我們常見的矩陣啊，旁邊的中括號呢？

別急，我們先把上面的公式說明一下：

• \begin{matrix}和\end{matrix}說明在它們之間的是矩陣

• 1 & 2 & 3\\表示第一行的元素，其中用&來分割每一個元素，用\\來換行

現在我們來加括號，很簡單，語法如下：

$$
\left[\begin{matrix}
1 & 2 & 3\\
4 & 5 & 6
\end{matrix}\right]
$$

結果爲：
$\left[\begin{matrix} 1 & 2 & 3\\ 4 & 5 & 6 \end{matrix}\right]$
其實我們僅僅在\begin{matrix}前面加了\left[，在\end{matrix}後面加了\right]，這樣就能正確顯示括號了，那我們可以將[]改爲||嗎，當然可以，就簡單地把\left[，\right]改爲\left|和\right|即可。

$$
\left|\begin{matrix}
1 & 2 & 3\\
4 & 5 & 6
\end{matrix}\right|
$$

結果就能顯示爲行列式了。
$\left|\begin{matrix} 1 & 2 & 3\\ 4 & 5 & 6 \end{matrix}\right|$
這裏僅僅介紹簡單的矩陣表示，如果要了解更多矩陣表示法，請自行搜索瞭解，網上的資料很多。

3.13 方程組

$$
\begin{equation}
\left\{
             \begin{array}{lr}
             x=\dfrac{3\pi}{2}(1+2t)\cos(\dfrac{3\pi}{2}(1+2t)), &  \\
             y=s, & 0\leq s\leq L,|t|\leq1.\\
             z=\dfrac{3\pi}{2}(1+2t)\sin(\dfrac{3\pi}{2}(1+2t)), &  
             \end{array}
\right.
\end{equation}
$$

結果如下：(CSDN不支持）
KaTeX parse error: No such environment: equation at position 8: \begin{̲e̲q̲u̲a̲t̲i̲o̲n̲}̲ \left\{ …

現在我們一一來解釋：

• begin{equation}與\end{euqation}表示它們之間的爲方程組。

• \left\{和\right.表示在方程組的左邊加上{，在右邊加上.，因爲{在外聯公式中有特殊的意義，因此需要在其前面加上轉義字符\。

• \begin{array}和\end{array}表示它們之間的是數組，其實這也可以用來表示矩陣。

• {lr}表示有兩列，第一列的值靠左排列，用l表示，第二列的值靠右排列，用r表示，如果是中間對齊則爲c。

• 然後下面三行是方程式，用&分割，用\\換行。

3.14 分段函數

其實分段函數與方程組類似，示例如下：

$$
y=
\begin{equation}
	\left\{
		\begin{array}{lr}
		x-1 & x \leq 0
		x+1 & x>0
		\end{array}
	\end 
\end{equation}
$$

結果如下：（CSDN不支持）
KaTeX parse error: No such environment: equation at position 11: y= \begin{̲e̲q̲u̲a̲t̲i̲o̲n̲}̲ \left\{ \be…
就是在\begin{equation}前加y=即可。

四、Typora與HTML

4.1 改變字體顏色及大小

我們可以使用<font> </font>標籤來改變字體的顏色及大小，如：

<font size=3 color="red">字體顏色爲紅色，大小爲3</font>

<font size=4 color="blue">字體顏色爲藍色，大小爲4</font>

<font size=6 color="violet">字體顏色爲紫羅蘭，大小爲6</font>

結果爲：

字體顏色爲紅色，大小爲3

字體顏色爲藍色，大小爲4

字體顏色爲紫羅蘭，大小爲6

屬性size表示字體大小，color表示顏色。

4.2 改變對齊方式

我們可以改變字體的對齊方式，用標籤<p> </p>加上屬性align，如：

<p align="left">左對齊</p>
<p align="center">中間對齊</p>
<p align="right">右對齊</p>

結果爲：

左對齊

中間對齊

右對齊

4.3 插入圖像

因爲CSDN不支持使用img標籤修改圖像，所以下面的結果都不是準確的。大家可以自己在Typora中測試。
我們可以通過標籤<img src=url />來插入圖片，如：

<img src="img/1.jpg" />

結果爲：

我們可以改變<img>標籤的屬性，來改變圖片的大小。

<img src="img/1.jpg" width=100 height=100/>

將圖片的寬高均設爲100，結果爲：

也可以改變圖片的位置，如：

<img src="img/1.jpg" width=30 height=30 style="float:left"/>圖片在左邊
<img src="img/1.jpg" width=30 height=30 style="float:right"/>圖片在右邊

結果爲：

圖片在左邊
圖片在右邊

五、擴展用法

5.1 插入emoji表情

我們可以使用:emoji:的語法來插入表情，比如：

:happy:的語法爲:happy:

🦀的語法爲:crab:

🐴的語法爲:horse:

5.2 插入目錄

當我們爲使用標題將文分章節後，可以在輸入[toc]命令的地方自動根據標題生成目錄。

5.3 導出

選擇文件 --> 導出，可以選擇導出的文件格式，有pdf,html,word等格式。

5.4 文本高亮

在Typora中，可以用一對==將要高亮的文本括起來，如：

==要高亮的文本==
==背景會用黃色填充==

結果爲：

要高亮的文本
背景會用黃色填充

這個功能可在偏好設置 --> Markdown擴展語法中設置。

5.5 上下標

在Typora中，可以用一對~將下標括起來，如：H~2~O表示H₂O

同樣，我們也可以用一對^將上標括起來，如：X^2^表示X²

上下標可在偏好設置 --> Markdown擴展語法中設置。

六、參考資料

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

[2] 更多數學符號表達式：http://mohu.org/info/symbols/symbols.htm

[3] Latex 方程組表示： https://blog.csdn.net/lemolemac/article/details/9057471

[4] 菜鳥HTML教程：https://www.runoob.com/html/html-tutorial.html