程序员如何用Markdown快速输出技术博客?

一、前言

最近受疫情影响宅在家里,决定重新开始写博客。做过微信公众号的朋友们知道,微信采用富文本编辑器,就像word排版,想做出绚丽的效果那是相当的难。于是想到了用 Markdown 编辑,渲染富文本的思路,这样可以添加不同的皮肤,输出我们想要的风格。

最初的选型是 Typore 这款神器, 但用着还是优点水土不服的感觉。内心更加倾向与 SegmentFault掘金 相似的风格, 思来想去还是决定用 Sublime Text 加原生的语法来写。本篇文章作为工具篇记录如何用 Markdown 编辑技术文章。

二、基础语法

1. 标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

2. 列表

有序列表

1. 有序列表
2. 有序列表

无序列表

* 无序列表
- 无序列表
+ 无序列表

注意,有序列表和无序列表中间都有一个空格。

3. 字体

*斜体*       
**加粗**      
***斜体加粗***   
~~删除线~~  

4. 图片

![图片说明, 可以不填](图片链接)

5. 超链接

[链接文字](超链接)
<https://idea360.cn>

6. 引用

> 引用内容

7. 代码

单行代码

`单行代码`

代码块

8. 表格

| h1    | h2    | h3    |
|-------|-------|-------|
| data1 | data2 | data3 |

9. 任务

- [ ] Eat
+ [x] Code

10. 目录

自动生成目录

[TOC]

手动目录

- [前言](#前言)
- [基础语法](#基础语法)
    - [标题](#一、标题)

三、上下角标

key<sub>1</sub>
key<sup>2</sup>

四、数学公式

$a_{1}$
$x^{2}$
$a^{3}_{2}$
$\log_d ((N+1)/2)$
$e^{x^2} \neq {e^x}^2$
$\sqrt{x}$
$\sqrt[3]{4}$
$\frac{x+y}{2}$
$\sum_{k=1}^n\frac{1}{k}$
$\int_a^b f(x)dx$

五、流程

横向流程图

1
2
3
4
5
6
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]

竖向流程图

1
2
3
4
5
6
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]

标准流程图

1
2
3
4
5
6
7
8
9
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

横向标准流程图

1
2
3
4
5
6
7
8
9
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

时序图

UML时序图

1
2
3
4
5
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?

UML时序图复杂样例

1
2
3
4
5
6
7
8
9
10
11
Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

UML标准时序图

1
2
3
4
5
6
7
8
9
10
11
12
13
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
sequenceDiagram
participant 张三
participant 李四
participant 王五
张三->王五: 王五你好吗?
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!

甘特图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h

UML类图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}

饼状图

1
2
3
4
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15

最后

本文到此结束,感谢阅读。如果您觉得不错,请关注公众号【当我遇上你】,您的支持是我写作的最大动力。