Visual Studio Code 配置 Markdown

Posted 2020-10-16 FireCuckoo

场景

需要现代的编辑器记录下代码、笔记和思考。

目标

• [x] .md格式，纯文本。
• [x] 主要操作有其对应快捷键
• [x] 编辑器应当经常更新以适应飞速发展的世界
• [x] 支持画图
• [x] 可视化的文章结构，用来导航

Extensions插件

• Markdown All in One:
  • Ctrl b: 加粗
  • Ctrl i: 斜体
  • Ctrl Shift ]: 标题升级
  • Ctrl Shift [: 标题降级
    
  • ToC: 内容概览
  • Tab&Backspace: 缩进向前、向后
  • Alt c: 任务完成与否（双击该行后使用快捷键）
  • 表格的格式化
  • 大纲预览
• Markdown Preview Enhanced:

  • 流程图

    st=>start: 开始
    op=>operation: 处理
    cond=>condition: 条件
    e=>end: 结束
    
    st->op->cond
    cond(yes)->e
    cond(no)->op

  • 时序图

    Title: 这里是标题
    Participant 我叫做A as A
    A->B: 实开头，同步
    B-->C: 虚线
    C->>D: 异步
    D-->>A: 返回
    Note left of A: A左边\n做笔记
    Note right of A: A右边
    Note over A: 在A的生命线上
    Note over A,B: 跨越A与B的生命线

  • Gantt

    gantt
        title 项目开发流程
        section 项目确定
            需求分析       :a1, 2016-06-22, 3d
            可行性报告     :after a1, 5d
            概念验证       : 5d
        section 项目实施
            概要设计      :2016-07-05  , 5d
            详细设计      :2016-07-08, 10d
            编码          :2016-07-15, 10d
            测试          :2016-07-22, 5d
        section 发布验收
            发布: 2d
            验收: 3dmaid

  • 更多样式的flowchart

    st=>start: 带链接的开始|past:>http://www.google.com[blank]
    e=>end: 带链接的结束:>http://www.google.com
    op1=>operation: 处理 |past
    op2=>operation: 事物 |current
    sub1=>subroutine: 子|invalid
    cond=>condition: Yes
    or No?|approved:>http://www.google.com
    c2=>condition: Good idea|rejected
    io=>inputoutput: catch something...|request
    
    st->op1(right)->cond
    cond(yes, right)->c2
    cond(no)->sub1(left)->op1 
    c2(yes)->io->e
    c2(no)->op2->e
    
    [email protected]>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})

• 更多画法参考：
  • mermaidjs
  • flowjs