Typora – Markdown 简介

[TOC]

Overview

What’s Markdown?

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown的语法简洁明了、易读易写，并且对于图片，图表、数学式都有支持，人们广泛使用 Markdown 来撰写README帮助文档或论坛博客。例如CSDN、博客园和GitHub的README及Wiki等。

What’s Typora?

Typora 是一款简单、高效 Markdown 编辑器，支持即时渲染技术，提供了一种“所见即所得”的全新的 Markdown 写作体验。不像其他Markdown编辑器将「编辑」和「显示」相分离，Typora 把源码编辑和效果预览两者合二为一，在输入 Markdown 代码的时候即时渲染生成预览效果，使得你写Markdown就像是写Word文档一样流畅自如，这也是与其他Markdown编辑器最显著的区别。Typora 是目前互联网上最受欢迎的 Markdown 编辑器之一。

Typora 的优点：

实时渲染：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.

Install Typora

进入Typora官网进行下载，支持 Mac、 Windows 和 Linux ，有详细的安装介绍。

Ubuntu

进入Typora官网进行下载安装，有详细的安装介绍。

# 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官网进行下载安装，有详细的安装介绍。

MacOS

进入Typora官网进行下载安装，有详细的安装介绍。

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即可添加图片

gif-image

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 image相对路径右对齐图片使用 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↩

来源：https://www.cnblogs.com/robotchaoX/p/10890788.html

标签

typora

Markdown

markdown编辑器

html语言

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 删除线 …