Typora – Markdown 簡介

時間 2019-11-24

原文原文鏈接

Typora – Markdown 簡介

[TOC]python

Overview

What’s Markdown?

Markdown是一種可使用普通文本編輯器編寫的標記語言，經過簡單的標記語法，它可使普通文本內容具備必定的格式。Markdown的語法簡潔明瞭、易讀易寫，而且對於圖片，圖表、數學式都有支持，人們普遍使用 Markdown 來撰寫README幫助文檔或論壇博客。例如CSDN、博客園和GitHub的README及Wiki等。linux

What’s Typora?

Typora 是一款簡單、高效 Markdown 編輯器，支持即時渲染技術，提供了一種「所見即所得」的全新的 Markdown 寫做體驗。不像其餘Markdown編輯器將「編輯」和「顯示」相分離，Typora 把源碼編輯和效果預覽二者合二爲一，在輸入 Markdown 代碼的時候即時渲染生成預覽效果，使得你寫Markdown就像是寫Word文檔同樣流暢自如，這也是與其餘Markdown編輯器最顯著的區別。Typora 是目前互聯網上最受歡迎的 Markdown 編輯器之一。git

Typora 的優勢：github

實時渲染：Typora 支持即時渲染，能夠在同一個界面實時看到渲染後的效果，所見即所得；
擴展語法：Typora 支持 GitHub 風格的 Markdown 語法，還支持部分HTML語法；
LaTeX公式：支持LaTeX公式編輯；
快捷操做：Typora 對經常使用的 Markdown 語法操做都提供了快捷鍵操做，用起來很是高效；
簡單漂亮：Typora 默認支持 5 種主題，可自由切換，操做簡單，很是容易上手；
跨平臺：Typora 支持 macOS、Windows 和Linux系統；
免費：Typora 徹底免費，這點很重要。

You can get more information on the official website of typora.web

Install Typora

進入Typora官網進行下載，支持 Mac、 Windows 和 Linux ，有詳細的安裝介紹。express

Ubuntu

進入Typora官網進行下載安裝，有詳細的安裝介紹。macos

# apt-key
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys BA300B7755AFCFAE
# add Typora's repository
sudo add-apt-repository 'deb https://typora.io/linux ./'
sudo apt-get update
# install typora
sudo apt-get install typora  # typora編輯器
sudo apt-get install pandoc  # 文檔轉換import/export插件(可選)

Windowns

進入Typora官網進行下載安裝，有詳細的安裝介紹。ubuntu

MacOS

進入Typora官網進行下載安裝，有詳細的安裝介紹。ruby

typora快捷鍵

名稱	快捷鍵
源代碼模式	Ctrl +/
標題H1-H6	Ctrl + 1/2/3/4/5/6
加粗	Ctrl + B
斜體	Ctrl + I
下劃線	Ctrl + U
Table表格	Ctrl + T
超連接	Ctrl + K
複製格式	Ctrl + C
複製爲Markdown	Ctrl + Shift + C
粘貼格式	Ctrl + V
純文本粘貼	Ctrl + Shift + V
引用	Ctrl + Shift + Q
圖片	Ctrl + Shift + I
選中單詞	Ctrl + D
選中行	Ctrl + L

Basic usage

Paragraph and line breaks 段落

Enter  # 新段落
Shift + Enter  # 新行

Headers 標題 # …

# H1
## H2
### H3
#### H4
##### H5
###### H6

Emphasis 斜體 * … * / - … -

single asterisks正常
*single asterisks斜體 (推薦 \* ...\*)*
_single underscores斜體_

single asterisks正常 single asterisks斜體 (推薦 * ...*) single underscores斜體

Strong 加粗 ... / …

double asterisks正常
**double asterisks 加粗 (推薦 \** ... \**)** 
__double underscores 加粗__

double asterisks正常 double asterisks 加粗 (推薦 * ... *)** double underscores 加粗

Code 行內代碼 ` … `

Use the `print()` function.

Use the print() function.

Strikethrough 刪除線 …

~~Mistaken text~~

~~Mistaken text~~

Underlines 下劃線 <u> … </u>

<u>Underline</u>

Underline

Subscript 下標 ~ … ~

H~2~O
X~long\ text~

H₂O X_{long\ text}

Superscript 上標 ^ … ^

X^2^

X²

Highlight 高亮 == … ==

==highlight高亮==

highlight高亮

Emoji 表情 : … :

:smile:
:eyes:

😄

👀

Inline Math 行內公式 $ … $

 例如:  $\lim_{x \to \infty} \exp(-x) = 0$  will be rendered as LaTeX command.

例如: $\lim_{x \to \infty} \exp(-x) = 0$ will be rendered as LaTeX command.

無序列表 * / - / +

無序列表 : *  -  + 
- Red 
- Green 
- Blue

Red
Green
Blue

有序列表 1. 2. 3.

有序列表 : 1. 2. 3.
1. First
2. Second
3. Third

First
Second
Third

Task List 任務列表 - [x]

-[] 複選框任務項 
-[] 未勾選 
-[x] 勾選

複選框任務項
未勾選
勾選

Code Blocks 代碼塊 ``` ... ```

```python

# python
import tensorflow as tf

```

# python
import tensorflow as tf

Blockquotes 塊引用 >

> 引用塊 第一行 
> 
> 第三行

引用塊第一行

第三行

Math Blocks 數學公式塊 $$ ... $$

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

Tables 表格

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

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

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -------------:|
| :左對齊        |       :居中:     |        右對齊: |
| :左對齊        |       :居中:     |        右對齊: |

Left-Aligned	Center Aligned	Right Aligned
:左對齊	:居中:	右對齊:
:左對齊	:居中:	右對齊:

Horizontal Rules 水平線 --- / ***

*** 水平線
--- 水平線

YAML Front Matter

首行添加---

---
layout: post 
title: Blogging Like a Hacker 
---

Table of Contents 目錄 [toc]

[toc]

[TOC]

Footnotes 註釋 [^footnote]

這個有懸停註釋[^footnote]  # 定義註釋
[^footnote]: 鼠標懸停顯示**註釋footnotes**  # 懸停顯示的內容

這個有懸停註釋¹

Links 連接 [站名](網址)

[百度](http://www.baidu.com)  # 按住 Ctrl + 鼠標左鍵 跳轉至百度

百度 # 按住 Ctrl + 鼠標左鍵 跳轉至百度

本地文檔連接 [文檔](文檔路徑)

[打開文件 README.md](./README.md)  # 按住 Ctrl + 鼠標左鍵 打開文檔
[打開文件 LICENSE](./LICENSE)  # 按住 Ctrl + 鼠標左鍵 打開文檔

打開文件 README.md # 按住 Ctrl + 鼠標左鍵 打開文檔打開文件 LICENSE # 按住 Ctrl + 鼠標左鍵 打開文檔

Internal Links 內部連接 [](#標題名)

按住 Ctrl + 鼠標 [跳轉到標題Overview](#Overview)  實現文檔內部跳轉到`Overview`

按住 Ctrl + 鼠標跳轉到標題Overview 實現文檔內部跳轉到 Overview

Reference Links 參考連接 [名稱][id]

更詳細的語法說明 [Cmd Markdown 簡明語法手冊][1]
進階用戶能夠參考 [Cmd Markdown 高階語法手冊][2]
[1]: https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown
[2]: https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#cmd-markdown-高階語法手冊

更詳細的語法說明 Cmd Markdown 簡明語法手冊

進階用戶能夠參考 Cmd Markdown 高階語法手冊

This is [谷歌][googleid] reference-style link.  # [googleid]:指明參考連接
[googleid]: http://google.com/  "Optional Title"

This is 谷歌 reference-style link. # googleid:指明參考連接

This is another [百度][] reference-style link.  # [百度][]省略參考連接id,直接用內容做爲id
[百度]: http://baidu.com/

This is another 百度 reference-style link. # [百度][]省略參考連接id,直接用內容做爲id

URLs

標準URL自動連接,按住 Ctrl + 鼠標左鍵 可訪問

www.typora.io
https://www.baidu.com/  # 標準URL
www.baidu.com  # 自動連接standard URL
<www.baidu.com>  # URL

www.typora.io https://www.baidu.com/ # 標準URL www.baidu.com # 自動連接standard URL <www.baidu.com> # URL

Images 圖片 ![] (路徑/URL)

![網絡圖](http://www.shu.edu.cn/images/logo.jpg)
![image絕對路徑](/home/chao/Desktop/assets/img.jpg)
![image相對路徑](./assets/img.png)
![image](./assets/img.jpg "Optional title標題??")
![gif動圖](./assets/drag-img.gif)  
# 拖動便可添加圖片

Video 視頻

Images

Images in Typora

插入圖片方式

Write the Markdown

![網絡圖](http://www.shu.edu.cn/images/logo.jpg)
![image絕對路徑](/home/chao/Desktop/assets/img.jpg)
![image相對路徑](./assets/img.jpg)
![image](./assets/img.png "Optional title標題??")
![gif動圖](./assets/drag-img.gif)  
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" width=30% /img>
# HTML設置圖片大小

Drag & Drop

拖動圖片丟到Typora便可添加圖片

Select from local files 本地選擇

Edit → Image Tools → Insert Local Images… from

Paste images from clipboard 粘貼

複製圖片→粘貼

圖片對齊

部分HTML代碼不能即時渲染，僅當導出爲PDF或HTML時這部分HTML代碼纔有效

Currently Typora does not support image alignment. But you could use HTML code like <center>![img](src)</center>to align images on exported HTML or PDF.

<center>![img](src)</center>  # 中心對齊圖片
<right>![img](src)</right>  # 右對齊圖片
<left>![img](src)</left>  # 左對齊圖片

使用 HTML 右對齊圖片使用 HTML

中心對齊圖片

修改圖片大小

Resize Images

Typora allows to use <img /img> <img /> tag for displaying images, which can also be used to adjust the size of images.

<img src="https://www.baidu.com/img/bd_logo1.png?where=super" /img>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" width=「30%」 /img>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" height='30%' />？？
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="200px" img>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" height=100px />
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="width:200px" img>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="height:100px" />
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="zoom:50%" />

Table

Table Editing

Create Table in Typora

|First Header | Second Header| + Enter

First Header	Second Header

| First Header | Second Header |
| ------------ | ------------- |
|              |               |
|              |               | + Enter

First Header	Second Header

Add/Delete 行

Ctrl+Enter

First Header	Second Header

Add/Delete 列

First Header

文字對齊

| Default | Left左  | Right右  | Center中 |
| ------- |  :----  |  :---:  |   ----:  |
| cell1   |  cell2  |  cell3  |  cell4   |

Default	Left左	Right右	Center中
cell1	cell2	cell3	cell4

Diagrams

Draw Diagrams With Markdown

Flowchart 流程圖

flowchart.js

```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
```

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

Sequence

js-sequence

```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

Mermaid

mermaid

Sequence

```mermaid
%% Example of sequence diagram
  sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end
```

%% Example of sequence diagram sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end

Flowchart

```mermaid
graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

graph LR A[Hard edge] -->B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]

Gantt

```mermaid
%% Example with selection of syntaxes
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h
```

%% Example with selection of syntaxes gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h

Math

Math and Academic Functions

Math Block $$ $$

質能守恆公式[^LaTeX]$E=mc^2$

\[\begin{align*} y = y(x,t) &= A e^{i\theta} \\ &= A (\cos \theta + i \sin \theta) \\ &= A (\cos(kx - \omega t) + i \sin(kx - \omega t)) \\ &= A\cos(kx - \omega t) + i A\sin(kx - \omega t) \\ &= A\cos \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big) + i A\sin \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big) \\ &= A\cos \frac{2\pi}{\lambda} (x - v t) + i A\sin \frac{2\pi}{\lambda} (x - v t) \end{align*} \]

Inline Math $ $

e.g: $f = \frac{2 \pi}{T}$

TeX Commands

TeX commands

\begin{XXX} ... \end{XXX}

Chemistry Expressions 化學式

mhchem

$\ce{CH4 + 2 $\left( \ce{O2 + 79/21 N2} \right)$}$

Cross Reference

Here is a labeled equation:

\[x+1\over\sqrt{1-x^2}\label{ref1} \]

This is a referece : $\ref{ref1}$

HTML

HTML Support in Typora

Inline HTML

This is red 漢ㄏㄢˋ Ctrl+F9 Bigger HTML entities like ® ¶

HTML Entities

&frac14 &#x1D517

HTML Block

I have keys but no locks. I have space but no room. You can enter but can't leave. What am I?

A keyboard.

Media and Embedded Contents

Video

Audio

Embed Web Contents

See the Pen Fancy Animated SVG Menu by Jean Gontijo ( @jeangontijo) on CodePen.

PDF

Comments

Html 標籤

本站支持在 Markdown 語法中嵌套 Html 標籤，譬如，你能夠用 Html 寫一個縱跨兩行的表格：

<table>
    <tr>
        <th rowspan="2">值班人員</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>李強</td>
        <td>張明</td>
        <td>王平</td>
    </tr>
</table>

值班人員	星期一	星期二	星期三
值班人員	李強	張明	王平

內嵌圖標??

本站的圖標系統對外開放，在文檔中輸入

<i class="icon-weibo"></i>

即顯示微博的圖標：

替換上述 i 標籤 內的 icon-weibo 以顯示不一樣的圖標，例如：

<i class="icon-renren"></i>

即顯示人人的圖標：

更多的圖標和玩法能夠參看 font-awesome 官方網站。

更多關於 Typora 的多詳情請參閱 Support 。

Reference

Typora Support

GitHub

鼠標懸停顯示註釋footnotes↩

1. Typora---markdown
2. markdown & typora
3. Typora-Markdown工具
4. Typora Markdown 語法
5. Typora-Markdown編輯器
6. Markdown 利器: Typora + iPic
7. MarkDown編輯器-Typora
8. Markdown For Typora 翻譯
9. Typora For Markdown 語法
10. Typora ---一款簡潔的Markdown編輯器
更多相關文章...
• Scala 簡介 - Scala教程
• AJAX 簡介 - PHP教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Typora – Markdown 簡介

Typora – Markdown 簡介

Overview

What’s Markdown?

What’s Typora?

Install Typora

Ubuntu

Windowns

MacOS

typora快捷鍵

Basic usage

Paragraph and line breaks 段落

Headers 標題 # …

Emphasis 斜體 * … * / - … -

Strong 加粗 ** ... ** / __ … __

Code 行內代碼 ` … `

Strikethrough 刪除線 ~~ … ~~

Underlines 下劃線 <u> … </u>

Subscript 下標 ~ … ~

Superscript 上標 ^ … ^

Highlight 高亮 == … ==

Emoji 表情 : … :

Inline Math 行內公式 $ … $

無序列表 * / - / +

有序列表 1. 2. 3.

Task List 任務列表 - [x]

Code Blocks 代碼塊 ``` ... ```

Blockquotes 塊引用 >

Math Blocks 數學公式塊 $$ ... $$

Tables 表格

Horizontal Rules 水平線 --- / ***

YAML Front Matter

Table of Contents 目錄 [toc]

Footnotes 註釋 [^footnote]

Links 連接 [站名](網址)

本地文檔連接 [文檔](文檔路徑)

Internal Links 內部連接 [](#標題名)

Reference Links 參考連接 [名稱][id]

URLs

Images 圖片 ![] (路徑/URL)

Video 視頻

Images

插入圖片方式

Write the Markdown

Drag & Drop

Select from local files 本地選擇

Paste images from clipboard 粘貼

圖片對齊

修改圖片大小

Table

Create Table in Typora

Add/Delete 行

Add/Delete 列

文字對齊

Diagrams

Flowchart 流程圖

Sequence

Mermaid

Sequence

Flowchart

Gantt

Math

Math Block $$ $$

Inline Math $ $

TeX Commands

Chemistry Expressions 化學式

Cross Reference

HTML

Inline HTML

HTML Entities

HTML Block

Media and Embedded Contents

Video

Audio

Embed Web Contents

PDF

Comments

Html 標籤

內嵌圖標??

Reference

Strong 加粗 ... / …

Strikethrough 刪除線 …