【原】无脑操作：Markdown可以这样玩

一、背景：

Markdown是一种纯文本格式的标记语言。通过简单的标记语法,可以使普通文本内容具有一定的格式。因为语法简单明了、功能又比纯文本强大，所以很适合作为开发人员的书写工具。
Markdown的编辑器很多，常用的有：MarkdownPad、Typora、MarkdownEditor等。不过在最近的尝试中，发现了一个比较适合开发人员使用的书写工具VSCode。

二、安装：

在VSCode官网：https://code.visualstudio.com/#alt-downloads进行下载，根据自己的操作系统版本选择对应的安装版本。VSCode的安装很简单，选择安装路径一路回车安装就好了。

注意：VSCode默认的自定义插件位置在C:\Users\用户名\.vscode\extensions

三、配置：

VSCode好用的插件很多，列了如下这几个，其中Markdown工具和Markdown转PDF工具是搭建Markdown书写环境所必需的。

1、Chinese中文语言支持插件（安装后需要重启VSCode）

2、Material Theme主题插件

3、Material Icon Theme主题图标插件

4、Markdown Preview Enhanced插件

5、Markdown PDF插件

四、使用：

常用的Markdown语法

 # 01、注释

 - 通用写法、使用HTML注释

 ```html

 <!-- HTML的注释 -->

 ```

 <!-- 这是HTML注释，看不见吧 -->

 ---

 # 02、标题

 # 级别1

 ## 级别2

 ### 级别3

 #### 级别4

 ##### 级别5

 ###### 级别6

 ---

 # 03、引用

 > 常常用来引用其他的资料

 > 曹植.《洛神赋》

 > 彷佛兮若轻云之蔽月，飘飘兮若流风之回雪

 ---

 # 04、粗体斜体

 *这会是 斜体 的文字*

 _这会是 斜体 的文字_

 **这会是 粗体 的文字**

 __这会是 粗体 的文字__

 _可以 **组合** 使用粗体 和 斜体符号_

 ~~文字将会被横线删除~~

 ---

 # 05、列表

 ## 1、无序列表

 * 安徽省

     * 合肥市

     * 铜陵市

     * 淮南市

 - 江苏省

     + 南京市

     + 苏州市

 ## 2、有序列表

 1. 浙江省

     1.1. 杭州市

     1.2. 宁波市

 2. 湖北省

     2.1. 武汉市

     2.2. 荆州市

 ---

 # 06、分隔线

 ***

 ___

 ---

 # 07、代码块

 ```java

 class Person {

     public void static main() {

         System.out.println("小前端也会服务端编程");

     }

 }

 ```

 <!-- highlight   语法高亮 -->

 ```javascript{highlight=2-6}

 var programmer = {

     name : '尤JJ',

     gender : '女',

     work: function() {

         console.log('废寝忘食');

     }

 }

 ```

 ---

 # 08、链接

 [百度](https://www.baidu.com)

 ---

 # 09、任务列表

 - [x] 吃饭

 - [ ] 睡觉

 - [x] 搬砖

 ---

 # 10、表格

 <!--

     :---:   居中

     :-----  居左

     ------: 居右

 -->

 |序号   |姓名   |性别   |薪资   |

 |:---:|:-----|:---:|------:|

 |1      |武JC   |男     |987.65|

 |2      |尤JJ   |女     |123.45|

 ---

Markdown中也可以绘制图表，以绘制流程图和序列图为例

# 01、绘制流程图

<!-- 基于flowchart.js绘制 -->

```flow

start=>start: 项目启动

end=>end: 项目结束

opt1=>operation: 需求分析

condition=>condition: 需求评审

opt3=>operation: 编码实现

start->opt1(right)->condition

condition(yes,right)->opt3

condition(no)->end

opt3->end

```

---

# 02、绘制序列图

<!-- 基于js-sequence-diagrams绘制 -->

```sequence

Title: 日常交流

Boy->Girl: 钥匙、伞、早饭

Note right of Girl: 心烦意乱...

Girl-->Boy: 不关你事儿

Boy->>Girl: 别久坐，多喝水

```

---

巴特西

【原】无脑操作：Markdown可以这样玩

最新文章

热门文章