如何用vscode愉快的写报告和绘图

在学习使用markdown的过程中，越来越发现，通过改造，安装vscode的插件，与markdown结合后，更大的提高了工作效率。可以在日常工作与生活中，因应不同的场景需求：

• 写研究报告
• 输入数学公式
• 绘制专业图表

写研究报告

这篇文章就是按照普通研究报告的基本格式，通过markdown写就的。markdown的妙处是实现了内容与样式的分离，内容写起来非常简洁，样式依靠CSS来设定。

内容部分操作：

• 这是斜体
• 这是粗体
• 这是删除线
• 下面是常用 Emoji & Font-Awesome，更多 请点击这里
  :smile: :scream: :thumbsup: :pray: :muscle: :tangerine: :chart_with_upwards_trend:
• 文字引用：

  明月松间照，清泉石上流

• 有序列表：
  1.有序列表项1
  2.有序列表项1
• 表格显示：

项目	价格	数量
计算机	\$1600	5
手机	\$12	12
^	\$1	234
>	ce	ce

• 代办事项
  • 2020工作计划
  • 策略回测系统

形式部分设置：

• 笔者根据普通研报的基本格式，包括标题、正文字体、字体大小、首行缩进、行间距等，配置成一个css文件，放到这个目录C:\Users\用户\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.0\node_modules\@shd101wyy\mume\styles\preview_theme下。作为vscode的markdown插件（Markdown Preview Enhanced）的默认css。注意该目录下的0.5.0是vscode的MPE插件版本号，可能因该插件更新而变化。
  

• 然后在预览文档右键弹出菜单中操作，自动生成pdf。

输入数学公式

矩阵示例

$$
\begin{matrix}
    a_{11} & a_{12} & a_{13} & \cdots & a_{1n} \\
    a_{21} & a_{22} & a_{23} & \cdots & a_{2n} \\
    \vdots & \vdots & \vdots & \ddots & \vdots \\
    a_{n1} & a_{n2} & a_{n3} & \cdots & a_{2n} \\
    \end{matrix}
$$
$$
\left[
\begin{array}{cc|c}
  1&2&3\\
  4&5&6
\end{array}
\right]
$$

方程式示例

$$
f(n) =
\begin{cases}
n/2,  & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd}
\end{cases}
$$

常用公式速查

• 
• 
• 

绘制专业图表

使用Mermaid绘制

1、流程图

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

2、序列图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John:hello John
    loop healthcheck
        John-->>John:fight against
    end
    Note right of John:rational
    
    John->>Alice:great!
    John->>Bob:how about you
    Bob->>John:good!

3、甘特图

    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

4、Class diagram

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

flow流程图

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

UML时序图

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: 没人陪我玩