typora

常用快捷键

File

Edit

Paragraph

Format

View

图床方案

通过使用 PicGo + Gitee 的方式实现图床方案。

PicGo

• PicGo 官方网站
• 相关插件
  • gitee ： 支持 gitee 图床配置
  • super-prefix： 支持自定义上传路径规则
  • 更多插件：Awesome-PicGo

Gitee

• 使用 Gitee 的公开仓库作为图片存储位置
• 注意：单个图片大小不要超过 1M 。

Markdown 文档规范

Google

文档布局

# 文档标题

简短介绍.

[TOC]

## 主题

内容.

## 参考文档

* https://link-to-more-info

1. 文档标题：第一个标题应该是一级标题，理想情况下应该与文件名相同或几乎相同。第一级标题用作页面 <title> 。
2. 简短介绍：用 1 ~ 3 句话介绍一下文档的主题。
3. TOC: 如果您使用支持目录的托管，请在简短介绍后放置 [TOC]。

字符行限制

尾随空格

不要使用尾随空格，用尾随的反斜杠代替。

标题

ATX 风格的标题。

在 # 后加空格，并和上下文保持间隔。

列表

• 对长列表使用懒人编号法。
• 嵌套列表间距
  • 嵌套列表时，对数字开头的列表和星号开头的列表都使用四个空格的缩进

代码

• 单行代码
• 代码块
  • 代码超过一行时，请使用代码块
  • 语言声明
  • 缩进代码
  • 避免换行
  • 列表内嵌套代码块
    • 使用缩进来确保它不会破坏列表

超链接

尽可能缩短你的链接。使用具有提示性的超链接标题。

图片

少用图片，纯文本可以使用户更快地进行交流，较少读者的分心和作者的拖延。但是，有时图片利于表达。

List 优于 Tables

Markdown 优于 HTML

使用 Markdown 画图

Sequence

该图形绘制是基于 js-sequence 。

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Flowcharts

该图形绘制是基于 flowchart.js 。

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

Mermaid

该特性是基于 mermaid 实现。

流程图

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

时序图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

甘特图

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

类图

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Meramid 支持很多其他类型的图，可以通过官网了解其语法规则。

参考文档

• Google Markdown 文档风格指南
• Markdown 编写规范
• 使用 Markdown 绘图