Typora – Markdown 简介
[TOC]
- Overview
- Install Typora
- typora快捷键
- Basic usage
- Paragraph and line breaks 段落
- Headers 标题 # …
- Emphasis 斜体 … / - … -
- Strong 加粗 ... / …
- Code 行内代码 ` … `
- Strikethrough 删除线 ~~ … ~~
- Underlines 下划线 \ … \
- 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
- Table
- Diagrams
- Math
- HTML
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>Underline</u>
Underline
Subscript 下标 ~ … ~
H~2~O
X~long\ text~
H~2~O X~long\ text~
Superscript 上标 ^ … ^
X^2^
X^2^
Highlight 高亮 == … ==
==highlight高亮==
==highlight高亮==
Emoji 表情 : … :
:smile:
:eyes:
: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
# 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** # 悬停显示的内容
这个有悬停注释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
Images 图片 ![] (路径/URL)
# 拖动即可添加图片
Video 视频
<video src="xxx.mp4" />
<video src="/home/chao/Videos/变形金刚5.mp4" />
Images
插入图片方式
Write the Markdown
<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></center>to align images on exported HTML or PDF.
<center></center> # 中心对齐图片
<right></right> # 右对齐图片
<left></left> # 左对齐图片
使用 HTML
修改图片大小
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
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
Flowchart 流程图
```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
Sequence
```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
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
```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
Flowchart
```mermaid
graph LR
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```mermaid
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
```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
Math
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
\begin{XXX}
...
\end{XXX}
Chemistry Expressions 化学式
$\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
Inline HTML
This is red 漢 Ctrl+F9 Bigger HTML entities like ® ¶
HTML Entities
¼ 𝔗