Visual Studio Code 配置 Markdown

场景

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

目标

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

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
    
    st@>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