VeighNa量化社区
你的开源社区量化交易平台
Member
avatar
加入于:
帖子: 419
声望: 170

(贴子标题不小心打错字了,无法修改 ,抱歉!!!)

准备工作

安装Markdown插件

  • Markdown All in One
  • Markdown Paste
  • Markdown PDF
  • Markdown Preview Enhanced
  • Markdown Preview Mermaid Support

description

工作区界面

description

markdown文档的编辑和预览联动示意

description

相关的快捷键

  • Shift+Alt+F :格式化文档
  • Ctrl+Alt+V :Markdown Paste
  • Ctrl+Alt+C :Markdown Paste Code
  • Ctrl+K V :MPE:打开侧边预览
  • Ctrl+Shift+P :命令面板

鼠标右键菜单命令

  • Markdown PDF: Export (settings.json)
  • Markdown PDF: Export (pdf)
  • Markdown PDF: Export (html)
  • Markdown PDF: Export (png)
  • Markdown PDF: Export (jipeg)
  • Markdown PDF: Export (all: pdf, html, png, jpeg)

下面是一个用VSCode编写Markdown的演示文档

创建markdown文档

首先用VSCode创建新文档,把它保存为扩展名为md的文档,这就表示它是一个markdown文档了。

说明:

  • 虽然vn.py官网支持markdown语法,但是支持的还不够全面(也许是咱不熟悉),我编写的演示文档有许多地方还是不可在vn.py官网,所以我把不可以直接被显示的地方贴在显示效果之前,您可以把这些代码复制到VSCode中,在markdown相关插件齐全的情况下,是可以成功显示的。
  • 例如后面Tek数学公式可mermaid绘图语法的演示,分成实现代码和显示效果,您可以复制到VSCode中,参考示例的写法,修改成符合自己要求的各种图。

基本markdown语法的使用

无序列表

  • 一月份
  • 二月份
  • 三月份
  • 四月份

第二级标题

标题的写法:Markdown标题由 ‘#’ 开始:

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

其中侧边栏上半部分显示的是当前工作区文件夹下的文件,包括 Markdown 文件和素材。下半部分可以展开「Outline」视图,即大纲,可以根据当前正在编辑的 Markdown 文件显示其各级标题的大纲目录。

这里是引用演示:

> 1st reference
Markdown 文件和素材。下半部分可以展开「Outline」视图,即大纲,可以根据当前正在编辑的 Markdown 文件显示其各级标题的大纲目录。
>> 2nd reference
Markdown 文件和素材。下半部分可以展开「Outline」视图,即大纲,可以根据当前正在编辑的 Markdown 文件显示其各级标题的大纲目录。
>>> third level reference
Markdown 文件和素材。下半部分可以展开「Outline」视图,即大纲,可以根据当前正在编辑的 Markdown 文件显示其各级标题的大纲目录。

显示效果:

1st reference
Markdown 文件和素材。下半部分可以展开「Outline」视图,即大纲,可以根据当前正在编辑的 Markdown 文件显示其各级标题的大纲目录。

2nd reference
Markdown 文件和素材。下半部分可以展开「Outline」视图,即大纲,可以根据当前正在编辑的 Markdown 文件显示其各级标题的大纲目录。

third level reference
Markdown 文件和素材。下半部分可以展开「Outline」视图,即大纲,可以根据当前正在编辑的 Markdown 文件显示其各级标题的大纲目录。

下面是python代码示例:

python
import time

# Quick,count to ten!for i in range( 10):
# ( but not *too* quick)time.sleep(0.5)

for i in range(1,100):
    print(i)

这是行内的代码:x = this.count,它是嵌入到文字中的。

第三级标题

无序列表

  • 侧边栏
  • 编辑区域
  • 预览区域

有序列表

  1. 其中侧边栏上半部分显示的是当
  2. 前工作区文件夹下的文件,
  3. 包括 Markdown 文件和素材。
  4. 下半部分可以展开「Outline」
  5. 视图,即大纲,可以根

字体修饰(加重、斜体、删除)

加重显示 值得一提的是斜体字, VS Code 的 Markdown 预览默认渲染的是当前你正在编辑的文档,不过如果你希望将某个文档的预览渲染锁定不动,可以通过「Markdown: Toggle Preview Locking」调出一个锁定某个文档的预览界面。

LaTex 数学表达式

···
InLine math equations:$\omega = d\phi / dt$. Display math should get its own line like so:

$$I = \int \rho R^{2} dV$$
$$ 2+3 = 5 $$
$x+y=z^2$
$ax+by=cz$
$2x+3y=4z$
···
显示:

description

表格示例

  • 表格示例1
    ···
    | 源文件 | 和预览界面 | 是同步的 |
    | :----: | :--------: | :------:|
    | 即你无 | 论是在编辑 | 界面还是 |
    | 即你无 | 论是在编辑 | 界面还是 |
    | 即你无 | 论是在编辑 | 界面还是 |
    ···

description

  • 表格示例2————表格还可以如此方便
    ···
    title | 标题
    --:|:--
    dateFormat |日期格式
    section |模块
    Completed | 已经完成
    Active | 当前正在进行
    Future | 后续待处理
    crit | 关键阶段
    日期缺失 | 默认从上一项完成后
    ···
    显示:

description

图片示例

用代码插入图片示例 !

![test.jpg](images/test.jpg)

显示:

description

剪贴板图片插入示例 !

  1. 先找到自己需要的界面,将图形复制到剪贴板
  2. 在VSCode中编辑的md文档需要插入图片的位置,点击鼠标右键,选择“Markdown Paste”或者Ctrl+Alt+V快捷键,进入下面的图片命名环节,可以默认,也可以另外输入新名称。
  3. 完成上面的两步后,md文档就被自动添加了类似下面的语句:![图片插入.png](图片插入.png),当然它和手工输入是同样的显示效果。

description

超链接示例

百度搜索

  • apple
  • carrot
  • pear

下面是一些非常炫酷的Mermaid图

序列图示例1:

```mermaid
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!|
    John-->Alice:我爱你!
```

显示:

description


序列图示例2:

```mermaid
  sequenceDiagram
    Note right of A: 倒霉, 碰到B了
    A->B:   Hello B, how are you ?
    note left of B: 倒霉,碰到A了
    B-->A:  Fine, thx, and you?
    note over A,B: 快点溜,太麻烦了
    A->>B:  I'm fine too.
    note left of B: 快点打发了A
    B-->>A: Great!
    note right of A: 溜之大吉
    A-xB:   Wait a moment
    loop Look B every minute
      A->>B: look B, go?
      B->>A: let me go?
    end
    B--xA: I'm off, byte
    note right of A: 太好了, 他走了
```

description


序列图示例3:

```mermaid
  sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
  alt is sick
    Bob->>Alice:not so good :(
  else is well
    Bob->>Alice:good
  end
  opt Extra response
    Bob->>Alice:Thanks for asking
  end
```

description


序列图示例4:

```mermaid
sequenceDiagram
  # 通过设定参与者(participant)的顺序控制展示顺序
  participant B
  participant A
  Note right of A: 倒霉, 碰到B了
  A->B:   Hello B, how are you ?
  note left of B: 倒霉,碰到A了
  B-->A:  Fine, thx, and you?
  note over A,B:快点溜,太麻烦了。。。
  A->>B:  I'm fine too.
  note left of B: 快点打发了A
  B-->>A: Great!
  note right of A: 溜之大吉
  A-xB:   Wait a moment
  loop Look B every minute
    A->>B: look B, go?
    B->>A: let me go?
  end
  B--xA: I'm off, byte
  note right of A: 太好了, 他走了
```

description


序列图示例5:

```mermaid
  sequenceDiagram 
    # 通过设定参与者(participants)的顺序控制展示模块顺序
    participant Alice
    participant Bob 
    participant John 
    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: good!
```

description


甘特图示例

甘特图示例1:

```mermaid
  gantt
    dateFormat YYYY-MM-DD
    section S1
    T1: 2014-01-01, 9d
    section S2
    T2: 2014-01-11, 9d
    section S3
    T3: 2014-01-02, 9d
```

description

甘特图示例2:

```mermaid
  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
```

description


类图示例:

```mermaid
  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    
```

description

饼图示例:

```mermaid
  pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

description


实体关系图示例

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

description


旅游图示例:

```mermaid
  journey
      title My working day
      section Go to work
        Make tea: 5: Me
        Go upstairs: 3: Me
        Do work: 1: Me, Cat
      section Go home
        Go downstairs: 5: Me
        Sit down: 5: Me
```

description

总结

本文给您介绍了这些文档元素:

  • 各级标题(1~6级)
  • 文本修饰(字体、颜色、加粗、斜体、删除线...)
  • 无序列表
  • 有序列表
  • 程序代码(行内和独立)
  • 引用
  • LaTex数学表达式(行内和独立)
  • 表格(包括对齐方式)
  • 图片(手工插入和自动插入)
  • 超链接
  • 各种Mermaid图
    • 序列图
    • 流程图
    • 甘特图
    • 类图
    • 饼图
    • 实体
    • 旅游图

掌握了上述的Markdown语法,您可以轻松编写自己的Markdown文档了!

Member
avatar
加入于:
帖子: 419
声望: 170

怎么删除不了我这个跟帖?

Member
avatar
加入于:
帖子: 1448
声望: 102

学习了,这个图表很漂亮啊!

Member
avatar
加入于:
帖子: 46
声望: 1

之前习惯用typora,低版本的是免费的

© 2015-2022 上海韦纳软件科技有限公司
备案服务号:沪ICP备18006526号

沪公网安备 31011502017034号

【用户协议】
【隐私政策】
【免责条款】