Typora官方Markdown教程翻譯


Typora官方Markdown教程翻譯

概述

Markdown語法是由 Daring Fireball創立;原始版本的使用指南可以在這里找到。然而,它的語法會因語法分析程序或編輯器的不同而有差異。Typora使用的是GitHub Flavored Markdown語法規則。

塊級元素

段落和換行符

段落是簡單的一行或多行連續的文本。在markdown的源代碼中,段落由兩個或兩個以上的空行分隔開。在Typora中,你只需要一個空行(按一次回車鍵)就可以創建一個新的段落。

按下Shift + 回車創建一個簡單換行符。大多數其他的markdown語法分析程序會無視簡單換行符。 為了讓其他的markdown語法分析程序也能識別你的換行符,你可以在段落末尾留下兩個空格或者插入<br/>

標題

標題通過在段落開頭插入1-6個井字符(#)實現,不同數量的井字符分別代表1-6級標題。例如:

# 這是一級標題

## 這是二級標題

###### 這是六級標題

在Typora中,在標題前鍵入相應數量的“#”,然后按下回車鍵就可以創建一個標題。

引文區塊

Markdown使用電子郵件風格的“>”符號來表示引文區塊。它們這樣表示:

> 這是一個包含兩個段落的引文區塊,這里是第一段。
>
> 這里是第二段。Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.



> 這是另外一個只有一個段落的引文區塊。相鄰的引文區塊之間由三個空行分隔開來。

在Typora中,在你引用的內容前輸入“>”就會生成一個引文區塊。Typora會替你插入一個合適的“>”或分隔符。相互通過增加多一級的“>”來表示相互嵌套的引文區塊(在一個引文區塊中還有另一個引文區塊)。

列表

輸入* 列表項目 1 會創建一個無序列表 - *符號可以由+或者-代替。

輸入1. 列表項目 1會創建一個有序列表 - 它們的markdown源代碼如下所示:

## 無序列表
*   紅
*   綠
*   藍

## 有序列表
1.  紅
2. 	綠
3.	藍

任務列表

任務列表由[ ]或[x]表示(未完成或已完成)。例如:

- [ ] 一個任務列表項目
- [ ] 需要列表語法
- [ ] 正常的 **有格式的**,@提及的,#1234 引用的
- [ ] 未完成的
- [x] 已完成的

你可以通過點擊項目前面的復選框來改變它的完成/未完成狀態。

(隔絕的)代碼區塊

Typora僅支持GitHub風格的Markdown隔絕區塊,不支持Markdown中原始的代碼區塊。

插入隔絕區塊非常容易:輸入```,然后按下回車鍵即可。在```后面插入支持的編程語言標識符,相應的語法強調就會自動顯示出來:

這有一個例子:

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

語法強調:
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

數學區塊

通過使用MathJax,你可以實現LaTeX數學表達式。

輸入$$並按下回車鍵即可創建數學表達式。這將會觸發一個可以識別Tex/LaTex源代碼的輸入區。例如:
$$
\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源文件中,數學區塊是一個被一對$$符號包裹的LaTeX表達式:

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

你可以從這里找到更多細節。

表格

輸入| 第一個標題 | 第二個標題 |然后按下回車鍵,就創建出一個兩列的表格。

標題 標題

表格創建好以后,你就會發現表格上面會出現一個工具欄。你可以用它對表格進行調整大小,對其或者刪除表格的操作。你可以可使用右鍵菜單對單個的行/列進行復制、增加和刪除等操作。

創建表格的完整語法在下面標識出來了。但是沒有必要記住這個愈發的細節,因為在Typora中,表格的markdown源代碼已經被自動創建好了。

表格的markdown源代碼長這個樣子:

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

把冒號放在最左邊表示這一列左對齊;冒號放在最右邊表示這一列右對齊;把兩邊都加上冒號表示這一列居中對齊。

腳注

你可以像這樣創建腳注[^腳注].

[^腳注]: 這里是 **腳注**的*文本*.

will produce:

你可以創建這樣的腳注[1].

把鼠標懸停在“腳注”的上角標上就能看到腳注的描述內容了。

水平線

在空白行中輸入 ***--- 然后按下 回車 會自動生成一條水平線。


YAML 前言

Typora 如今支持YAMLFront Matter。在文本的最頂端輸入---並按下回車來引入一個元數據塊。除此之外,你也可以從Typora的菜單欄中,依次點擊段落YAML Front Matter插入YAML Front Matter元數據塊。

目錄

輸入[toc]並按下回車鍵創建目錄。目錄會提取文檔中所有的標題。當你在文檔中增加內容時,目錄也會自動更新。

行內元素

行內元素會在輸入完成后立刻被語法分析並相應。把鼠標光標點擊到這些行內元素的中部會讓它們展開為markdown源代碼。下面是每一個行內元素的語法介紹。

鏈接

Markdown支持兩種類型的鏈接:行內鏈接和引用鏈接。

這兩種連接的文本都裝在[方括號]中。

在連接文本封閉的方括號后面直接使用一個圓括號就可以創建一個行內鏈接。把你想要指向的鏈接放到圓括號中。鏈接可以選擇性地附加title屬性,title內容用引號標記。例如:

這是一個[行內鏈接](http://example.com/ "Title")的例子。

[這個鏈接](http://example.net/)沒有title屬性。

運行出來的結果就是:

這是一個行內鏈接的例子。(<p>這是一個<a href="http://example.com/" title="Title">)

這個鏈接沒有title屬性。(<p><a href="http://example.net/">這個鏈接</a> 沒有)

行內鏈接

你可以把標題設置成為鏈接,這樣的話當你點擊連接之后就可以直接跳到標記位置。例如:

Command(在Windows中:Ctrl)+ 點擊這個鏈接就會直接跳到塊級元素。想知道這是怎么實現的,請把鼠標光標點擊到鏈接上面,展開源代碼。

引用鏈接

引用風格的鏈接把你選擇的標簽放到另一個方括號中來識別鏈接:

這是[引用鏈接][id]的一個例子。

然后,在文檔中的任何一個位置,你可以把你的鏈接標記成這個樣子:

[id]: http://example.com/  "可以在這里輸入Title屬性"

在Typora中,他們先是出來的結果是這個樣子的:

這是引用鏈接的一個例子。

內置的鏈接名快捷方式允許你省略連接名稱。在這種情況下,連接文本本身被用作為鏈接名。只需要使用一對空的方括號——例如,把詞語“谷歌”連接到google.com網站,你是需要簡單地寫下下面的這幾行代碼:

[Google][]
然后定義鏈接:

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

在Typora中,點擊鏈接會展開為可編輯形式,ctrl + 鼠標左鍵(Mac中為 command + 鼠標左鍵)會在你的瀏覽器中打開超鏈接。

URLs

Typora允許你把URL(統一資源定位器,也就是網址)插入為連接形式,只需把鏈接裝到<尖括號>里面。

<i@typora.io>就會顯示成i@typora.io>.

Typora也會自動把標准的URL轉化為鏈接,比如:www.google.com。

圖片

圖片的語法格式和鏈接非常相似,只是它們需要在鏈接起始的地方加一個!字符。插入圖片的語法長這樣:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

你也能通過拖拽的方式把文件或者網頁中的圖片插入進來。點擊圖片之后,你就能修改它的markdown源代碼。如果你拖拽的圖片在你正在編輯的文件的同一級或次一級目錄中,將會使用相對路徑。

如果你正在使用markdown搭建網站,你需要在最開頭的YAML Front Matters中加入typora-root-url屬性,聲明一個在你的本地電腦中預覽圖片的URL前綴。比如,在YAML Front Matters中輸入typora-root-url:/User/Abner/Website/typora.io/,那么![alt](/blog/img/test.png)在Typora中就會被識別為![alt](file:///User/Abner/Website/typora.io/blog/img/test.png)

你可以在這里找到更多細節。

強調

Markdown把星號(*)和下划線(_)識別為強調的標志。被一對*_包裹的文本會被HTML的<em>標簽包裹。例如:

*single asterisks*

_single underscores_

輸出:

single asterisks

single underscores

GFM會忽略文字中的下划線,這種情況在代碼和名字中非常常見,就像這樣:

wow_great_stuff

do_this_and_do_that_and_another_thing.

要想在可能會被視為強調定義符的位置生成一個能顯示的星號或下划線,你可以用反斜杠來避免:

\*這段文字處在可以顯示的星號中\*

Typora建議使用*符號表示強調。

加粗

兩個*_能讓包裹其中的內容包裹在一個HTML <strong> 標簽中。例如:

**double asterisks**

__double underscores__

輸出:

double asterisks

double underscores

Typora建議使用**符號。

代碼

若想在行內顯示代碼,直接把它放在一對反引號(`)中。跟預先格式化的代碼塊不同的是,行內代碼會顯示在一個普通的段落中。例如:

使用`printf()`函數。

結果是這個樣子的:

使用printf()函數。

刪除線

GFM增加了帶有刪除線文本的語法,這個功能在標准的Markdown中是沒有的。

~~錯誤的文本~~成為了錯誤的文本

下划線

Underline由HTML語言實現。

<u>下划線</u>就成了下划線.

Emoji 😄

使用語法:smile:輸入Emoji小表情。

用戶可以通過按ESA鍵觸發emoji的自動補全建議,也可以通過設置偏好設置來自動觸發建議。同時,也可以在菜單欄中的編輯->Emoji & Symbols直接插入UTF-8字符(僅限於macOS)。

行內Math公式

如果想要使用這個特性,請先在偏好設置->markdown標簽中啟用它。然后,使用一對$包裹一個TeX命令。例如:$\lim_{x \to \infty} \exp(-x) = 0$就會被轉換成LaTeX命令。

若想在編輯過程中預覽行內數學:輸入“$”,然后按下ESC鍵,接着輸入TeX命令。

你可以在這里找到更多細節。

下標

如果想要使用這個特性,請先在偏好設置->markdown標簽中啟用它。然后,使用一對~包裹一個TeX命令。例如:H~2~O, X~long\ text~/

上標

如果想要使用這個特性,請先在偏好設置->markdown標簽中啟用它。然后,使用一對^包裹一個TeX命令。例如:X^2^.

Highlight

如果想要使用這個特性,請先在偏好設置->markdown標簽中啟用它。然后,使用一對==包裹一個TeX命令。例如:==highlight==.

HTML

你可以使用一些原版Markdown不支持的HTML樣式內容。比如,使用<span style="color:red">this text is red</span>設置文本為紅色。

嵌套內容

一些網站提供的基於iframe的嵌套代碼你也可以直接粘貼到Typora中。例如:

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

視頻

你可以用HTML標簽<video>來嵌入視頻。例如:

<video src="xxx.mp4" />

其他的HTML支持

你可以在這里找到更多細節


  1. 這里是 腳注文本. ↩︎


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM