這篇文章簡單介紹Typora這款Markdown語法編輯器蹋绽，以及精講它支持的Markdown語法芭毙。

Typora

Typora的官網(wǎng)是https://www.typora.io/，里面有詳盡的介紹和展示卸耘，下面我摘取一些片段介紹一下該編輯器的特性退敦。

用它進(jìn)行Markdown文件的閱讀和寫作可以用“美”字來形容，具體體現(xiàn)在三大體驗(yàn)感中：

• 自由隨心
• 實(shí)時無縫預(yù)覽
• 所見即所得

喜歡它蚣抗，因?yàn)樗喖s又強(qiáng)大苛聘。下面看下它的一些特性——

插入圖片

Images

生成標(biāo)題

Headers

生成列表

Lists

表格

Tables

代碼塊

Code Fences

數(shù)學(xué)公式

Math

圖解

Diagrams

行內(nèi)樣式

Inline Style

除此之外，它可以方便地管理md文件忠聚，在文章標(biāo)題間快速跳轉(zhuǎn)设哗，支持YAML頭信息，導(dǎo)入和輸出成通用的文件格式两蟀。

管理文件

導(dǎo)入和導(dǎo)出

還有大量我完全沒用過的特性网梢，像支持其他插件進(jìn)行擴(kuò)展、修改主題赂毯、自動匹配等等战虏。關(guān)鍵是開發(fā)團(tuán)隊(duì)還在不斷地維護(hù)和開發(fā)這個軟件，并且我們可以免費(fèi)使用它党涕。我之前也用過不少的Markdown語法編輯器烦感，這個是我一用上就離不開的，無論是在Windows上還是Ubuntu上膛堤，我都可以用它進(jìn)行快速流暢的文檔創(chuàng)作（當(dāng)然它也支持Mac）手趣。

它對英文字體支持非常棒，看起來很舒服肥荔÷淘可惜在Windows上對中文字體的顯示不太友好，看起來有點(diǎn)丑燕耿。好像可以更換字體中符，不過沒有嘗試過。

Markdown

之前推薦過Markdwon的語法介紹誉帅，像我在Github上fork的https://github.com/ShixiangWang/README淀散。當(dāng)然百度也能搜出大量的該語法介紹。這里我想根據(jù)Typora官方提供的Markdown參考精講一下它支持的語法特性蚜锨。

塊元素

段落和換行符

在Markdown源碼中需要多個空行才能重啟一段档插，Typora中只需要按下Enter鍵即可。

按下Shift+Enter鍵會創(chuàng)建一個單個換行符踏志，但是大多數(shù)Markdown語法解析器都會忽略它阀捅。我們可以通過在一行的末尾加兩個空格鍵胀瞪，或者插入<br/>针余。

標(biāo)題

在一行的開始加1-6個井號鍵饲鄙，對應(yīng)著文章的1-6級標(biāo)題。

# 這是一級標(biāo)題

## 這是二級標(biāo)題

###### 這是六級標(biāo)題

一般建議標(biāo)題不要超過三級圆雁，不然可能層級太多影響閱讀忍级。

引用

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 a blockquote with two paragraphs. This is first paragraph.

This is second pragraph.Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

列表

*和+伪朽，-三種字符都能用來創(chuàng)建無序列表轴咱，但最好不要混用。有序列表用數(shù)字加.號即可創(chuàng)建烈涮。

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

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

un-ordered list

• Red
• Green
• Blue

ordered list

1. Red
2. Green
3. 3.Blue

任務(wù)列表

任務(wù)列表用[]或[x]標(biāo)記（未完成或完成）朴肺。、

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

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

在Typora中直接可以點(diǎn)擊來修改任務(wù)完成的狀態(tài)坚洽。

代碼塊

Typora只支持Github的Markdown語法戈稿，對源代碼塊（Markdown有不同的種類，所以有些地方不太一樣）不支持讶舰。

Typora中只需要鍵入```并按下Enter鍵就可以輸入代碼塊了鞍盗。在```后面可以加上你使用的語言名。Typora會自動進(jìn)行語法高亮跳昼。

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
?```

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

語法高亮:

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

數(shù)學(xué)公式塊

我們可以使用MathJax語法輸入LaTex數(shù)學(xué)公式般甲。

用一個$開始和結(jié)尾會生成行內(nèi)公式。而用$$開始和結(jié)尾并單獨(dú)生成公式塊鹅颊。

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

比如我們?nèi)绻扇缟瞎椒蟠妫枰斎?/p>

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

表格

輸入 | First Header | Second Header | 并按下 Enter 鍵會返回兩列的表。

一旦表格生成堪伍，我們可以像使用Excel一樣對表格進(jìn)行對齊历帚、添加、修改杠娱、刪除操作挽牢。

本身的源代碼是這樣的：

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

看看效果:

可以用:符號進(jìn)行對齊操作。

比如：

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

它將顯示成：

腳注

You can create footnotes like this[^footnote].

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

第一行是文本摊求，第二行是對標(biāo)記字符進(jìn)行解釋禽拔。當(dāng)把鼠標(biāo)指向腳注時，會看到解釋內(nèi)容室叉。

You can create footnotes like this^[1].

水平線

有時候我們想要水平線來進(jìn)行文本內(nèi)容分割睹栖，可以在空白行上使用***或者---然后按下回車鍵即可。

YAML頭信息

Typora支持YAML頭信息茧痕，一般網(wǎng)頁需要寫這個野来。在文檔的開始鍵入---然后按下回車鍵就會生成一個獨(dú)立的區(qū)塊可以寫入YAML頭信息。

目錄

輸入[toc]并按下回車鍵會自動生成文章目錄（這個在Github和簡書上好像都不支持）踪旷。

圖解

不翻譯了曼氛，拷貝豁辉。

Typora supports, sequence, flowchart and mermaid, after this feature is enabled from preference panel.

See this document for detail.

Span元素

鏈接

Markdown支持兩種格式的鏈接：行內(nèi)鏈接和參考鏈接。

兩種鏈接中舀患，文本信息都用[]限定徽级。

常用的就是行內(nèi)鏈接了，平常我們點(diǎn)擊網(wǎng)址聊浅，然后瀏覽器會自動跳轉(zhuǎn)并打開就屬于這種餐抢。

它又分為有標(biāo)題的和沒標(biāo)題的：

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

This is an example inline link.

This link has no title attribute.

內(nèi)部鏈接

我們可以把鏈接指向文本的某個標(biāo)題，這樣就能夠?qū)崿F(xiàn)文章內(nèi)部的跳轉(zhuǎn)低匙，像書簽一樣旷痕。

這個功能我沒太摸清楚，參考的markdown文章中是能用的顽冶。有興趣的可以看下苦蒿，在下方留評。

參考鏈接

兩個[]渗稍，第一個寫文本信息佩迟，第二個寫鏈接ID。

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"

This is an example reference-style link.

Then, anywhere in the document, you define your link label like this, on a line by itself:

這就像寫文章的參考文獻(xiàn)一樣竿屹。

有趣的是第二個方括號內(nèi)內(nèi)容可以省略报强，第一個方括號內(nèi)內(nèi)容會當(dāng)作ID使用。

[Google][]
And then define the link:

[Google]: http://google.com/

Google
And then define the link:

URLs

直接用<>可以插入網(wǎng)址拱燃。

<i@typora.io> becomes i@typora.io.

圖片

插入圖片與插入鏈接相似秉溉，不過要在最前面加!做區(qū)別。

![](/path/to/img.jpg)
# 左邊是圖片標(biāo)題碗誉，右邊是地址召嘶，可以是url，也可以是本地的圖片地址（注意絕對路徑和相對路徑的區(qū)別哮缺，可以在Typora中設(shè)定）
![](/path/to/img.jpg "Optional title")

比如我在文章最前面插的那些圖片：

![Images](http://upload-images.jianshu.io/upload_images/3884693-785fb767b4bead65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果就是

Images

強(qiáng)調(diào)

有時候我們需要對文本進(jìn)行強(qiáng)調(diào)弄跌，方式是斜體〕⑽可以用*或_分隔要強(qiáng)調(diào)的文本铛只。

*single asterisks*

_single underscores_

輸出:

single asterisks

single underscores

它們是可以和引用，以及后面講的加粗連用的糠溜。

如果我們需要輸出*鍵淳玩，可以用\進(jìn)行轉(zhuǎn)義。

加粗

強(qiáng)調(diào)用一個符號非竿，加粗用兩個蜕着。

**double asterisks**

__double underscores__

double asterisks

double underscores

Markdown一般都推薦使用*作為分隔符。

代碼

加入行內(nèi)代碼红柱，只需要用`分隔即可承匣。

Use the `printf()` function.

Use the printf() function.

刪除線

文本前后用兩個~符號：

~~Mistaken text.~~ becomes Mistaken text.

下劃線

跟HTML語法一樣蓖乘。

<u>Underline</u> becomes <u>Underline</u>.

表情:happy:

插入笑臉用:smile，得到:smile:

還有其他一些標(biāo)簽悄雅，鍵入:會根據(jù)后面的英文字符查找相關(guān)表情。

比如:cry:铁蹈，:cry:

遵循這樣的規(guī)則使用即可宽闲。

HTML

Typora只支持有限的HTML語法，如下握牧，我就不翻譯了容诬。

Typora cannot render html fragments. But typora can parse and render very limited HTML fragments, as an extension of Markdown, including:

• Underline: <u>underline</u>
• Image: ![](http://www.w3.org/html/logo/img/mark-word-icon.png) (And width, height attribute in HTML tag, and width, height, zoom style in style attribute will be applied.)
• Comments: ``
• Hyperlink: <a target="_blank">link</a>.

Most of their attributes, styles, or classes will be ignored. For other tags, typora will render them as raw HTML snippets.

But those HTML will be exported on print or export.

行內(nèi)數(shù)學(xué)公式

前面提到了，這里舉個例子沿腰。

$\lim_{x\to\infty}\exp(-x)=0$

$\lim_{x\to\infty}\exp(-x)=0$

同樣的公式览徒，我用$$分隔就會變成：

$$
\lim_{x\to\infty}\exp(-x)=0
$$

可以看到顯示效果的不同哈。

下標(biāo)

用一個~颂龙，如果要寫水分子习蓬，我們可以使用H~2~O，它就會變成H₂O.

這個功能默認(rèn)沒打開措嵌，To use this feature, first, please enable it in Preference Panel -> Markdown Tab.

現(xiàn)在看看H₂O躲叼。

上標(biāo)

用一個^前后分隔。

X的平方可以表示為X^2^企巢，即X² 枫慷。

高亮

用兩個==在前后分隔對文本高亮。

==highlight==會變成

==highlight==

最后的話

因?yàn)閭€人能力有限浪规，翻譯和講解不可能盡善盡美或听，望諒解。

關(guān)于Typora的使用除了查看本文檔外笋婿，還需要大家自己多摸索誉裆。用Ctrl加逗號鍵可以打開Typora的選項(xiàng)設(shè)定，有的功能沒有激活缸濒，需要我們手動設(shè)定下找御，也可以看看有其他什么有趣有用的功能。歡迎留言評論绍填。

最后說明霎桅，因?yàn)镸arkdown編輯器不同，簡書或者博客上查閱可能有一些小問題讨永。以Typora編輯器為準(zhǔn)滔驶。為保證文章目錄正常，去掉了一些實(shí)例顯示卿闹。

博文鏈接

1. Here is the text of the footnote. ?