Markdown简单用法和编辑器Typora

Markdown编辑器Typora

由于入职没有选择电脑,所以公司给我分配的是一台ThinkPad,虽然手感特别特别好,但是因为习惯使用MacBook了所以有点不适应。这不最近想markdown的blog,再也找不到MacDown这样顺手的Markdown Editor。搜寻半天终于发现一款特别棒Markdown Editor--Typora。免费,并且windows和linux上都可以使用。

界面

首先从界面可以看到Typora非常简洁,同时是我看到的第一个提供Outline导航栏的Editor,颜值上去了,心情自然就好。


界面.PNG

当然对于喜欢直接编辑源码的同学,也可以直接切换的源码模式,界面也是非常小清新:


源码编辑.PNG

快捷键

对于编辑者尤其是程序员,使用快捷键是非常重要的,这样可以让你双手保持在键盘上,只需要去考虑所需要编辑的内容,而不会被鼠标点击来中断自己的思路。Typora提供常用的格式化快捷键,所以从这一点,它也是很复合我的预期(但是Windows找不到类似CheatSheet这种神器帮助我记忆快捷键,真的很不爽)。

简单使用

这里就简单介绍一下官方的例子,如果没学习过markdown语法的同学可以简单看一下。

Headers

对于Header,Typora提供了H1-H5的快捷键:Ctrl+1--Ctrl+5

# This is an H1

## This is an H2

##### This is an H5

效果如下:

This is an H1

This is an H2

This is an H5

Blockquotes

之前我没用过,实际上用于记录讨论内容非常合适,快捷键是:Ctrl+Shift+Q

> A: hi, this is A's reply
> A: hi, this is second reply 
>> B: hi, this is B's reply
>>> C: hi, let's see what C said.

A: hi, this is A's reply
A: hi, this is second reply

B: hi, this is B's reply

C: hi, let's see what C said.

Lists

list同样有快捷键,un-ordered list:Ctrl+Shirft+], ordered list:Ctrl+Shirft+ [

#### 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. Blue

Task

task可以直接勾选,源码会自动修改

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

(Fenced) Code Blocks

CodeBlocks快捷键:Ctrl+Shirft+K

```go
package main
import "fmt"
func helloword() {
    fmt.Println("HelloWorld")
}
```

效果:

package main
import "fmt"
func helloword() {
    fmt.Println("HelloWorld")
}

Math Blocks

LateX的天然支持,对于算法工程师太好使了,快捷键: Ctrl + Shift + M:

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

LaTeX语法错误都能识别出来:


语法错误.png

Table

快捷键:Ctrl+T,Typora还会让你选择生成表格的行列:

image.png

源码:

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

Typora还可以让你选择对齐方式或者更新表结构操作:


表格结构操作.png

Footnotes

脚注功能,我以前没用过,但是最近发现也挺好用的:

You can create footnotes[^footnote1] like this[^footnote2].

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

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

效果:
You can create footnotes[1] like this[2].

Table of Contenets(TOC)

键入[TOC], typora还可以帮我们生成目录,简直是棒棒哒:

[TOC]
TOC.png

高级特性

Diagrams

Typora现在支持sequence, flowchart and mermaid这3中流程图工具,说实话我一点都不喜欢拖拉的方式画图,通过源码画图会让你不用考虑很多东西,同时具有逻辑性:

sequence

​```sequence
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
​```

效果:

sequence.png

flowchart

官网的例子好像有点bug,但是typora的例子可以用

​```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.png

mermaid

前面这两种画图工具是可以完全被mermaid取代的。

序列图:

​```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
​```
序列图.png

流程图:

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

甘特图:

```mermaid
%% Example with slection 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
```
甘特图.png

HTML

typora天然支持HTML语法,所以内嵌个HTML页面也没问题的:

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

总结:

typora就目前使用下来给我感觉很强大,应该是windows上最好的markdown Editor了。另外以上的内容主要参考typora的官网guide,谢谢。


  1. Here is the text of the footnote1.

  2. Here is the text of the footnote2.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容