• {{article.mytitle}}
  • vscode是最理想的markdown编辑器吗?

    1. 白漂户的渴求

    markdown格式众多, 应该优选一个会成为未来主流的一个编辑器, 这样可以保证自己的 md文件更具有通用性.

    对于大部分白漂用户来说, 都希望自己用的软件能满足下面特点:

    • 可商用免费开源跨平台(零元买断, 无限账号)
    • 兼容稳定不卡顿(耐抗)
    • 支持多语言(国际化)
    • 可离线使用也可以自己部署(方便省心)
    • 文档健全, 有问题可快速找到答案, 容易上手, 且学习成本低(简单好用)
    • 项目还在维护更新且用户多(有活力也有未来)

    2. vscode写markdown的基本特点

    除了满足上述提及的白漂户渴求之外, vscode还具有诸多优秀功能, 可根据需求安装插件. 如果不是重度使用者, 只需安装vscode即可使用markdown, 无需任何插件

    2.1. 文件方面

    • 不仅可以写md还可写代码以及LaTex

    • 可设置自动保存, 配置代码为:

      "files.autoSave": "afterDelay", 
      "files.autoSaveDelay": 15000,
      
    • 可自动同步, 一键发布插件 niudai.vscode-zhihu,插件 natizyskunk.sftp自行脚本

    • 速度快大文件不卡顿

    • git和历史版本

    • 方便查找替换,Ctrl+F,Ctrl+H

    • 相对链接站内跳转文件, 导入其它文件, 例如导入其它markdown文件 @import xxx.md

    • 一键转doc,pdf,html,png... pandoc +插件 dougfinke.vscode-pandoc

    • md批量转html,

      • 打开并登陆 https://github.com/codespaces

      • Ctrl +~打开终端, 在终端依次输入下面代码, 可自动把当前所有的 md文件转为 html文件, 默认是转换 mume项目中的文件, 可根据自行修改 md2html.js文件第10行的 const dir参数

        npm install -g @shd101wyy/mume       // 安装mume
        wget https://kz16.top/md/md2html.js  // 下载md2html.js 
        node md2html.js                      // 运行md2html.js 
        

        最后可用命令 python3 -m http.server 8080 通过网页查看效果

    • 支持预览和导出幻灯片插件 evilz.vscode-reveal

    • 导出的html文件可离线也可在线, 支持html左侧目录树, 电脑和手机查看都挺舒适. 插件 shd101wyy.markdown-preview-enhanced 配置代码为

      "markdown-preview-enhanced.enableScriptExecution": true,
      
    • 可在浏览器中预览html文件, 预览效果和导出的html文件效果一致

    • 可选择文件头部注释: 日期, 作者等信息插件 obkoro1.korofileheader

    • 可在文件目录中删除,移动和重命名文件

    • 可对比文件插件 diff

    • 可导出文件树插件 shinotatwu-ds.file-tree-generator

    • 花样文件类型图标插件 file-icons.file-icons

    2.2. 主要功能

    • 自定义配置可同步(迁移方便), 可用 Ctrl +,打开配置, 选择代码模式

    • 默认样式好看, 方便自定义css, 插件 shd101wyy.markdown-preview-enhanced

    • 同步滚动与可见可得, 支持两者同时存在, 插件 zaaack.markdown-editor, 或 插件 typora

    • 支持 toc目录及预览, 自动目录排序 插件 charleswan.markdown-toc

    • 支持公式, 且有公式提示和英文提示 插件 yzhang.markdown-all-in-one 以及 插件 yzhang.dictionary-completion

    • 粘贴图片很方便, 支持图床, 并支持流程图饼图等, 方便svg画图 插件 mushan.vscode-paste-image Ctrl +Alt +v, 插件 zhaouv.vscode-markdown-draw, 插件 hediet.vscode-drawio, https://kz16.top/png2base64.html

    • 支持从excel中粘贴表格, 且支持表格合并, 插件 csholmq.excel-to-markdown-table Shift +Alt +v, 插件 clover.md-table-editor做表格比较方便, 支持表格合并的配置代码为:

      "markdown-preview-enhanced.enableExtendedTableSyntax": true,
      
    • 支持代码折叠, 智能换行 Alt +z

    • 支持运行代码, 配置代码为:

      "markdown-preview-enhanced.enableScriptExecution": true,
      
      ```python {cmd=python3 hide=true}
      print(1+2)
      ```
      
      ```python {cmd=python3 matplotlib=true}
      import matplotlib.pyplot as plt
      plt.plot([1,2])
      plt.show() # show figure
      ```
      
      ```bash {cmd=true}
      ls -l
      ```
      
      ```python {cmd=true id="001"}
      x = 1
      ```
      
      ```python {cmd=true id="002"}
      x = 2
      ```
      
      ```python {cmd=true continue=true}
      print(x) # 2
      ```
      
      ```python {cmd=true continue="001" id="003"}
      print(x)  # 1
      ```
      
    • 可直接查看和运行jupyter文件, 插件 ms-toolsai.jupyter

    • 支持html标签: 视频, 动画, 富文本... https://kz16.top/ckeditor/

    2.3. 其它功能

    • 代码块可选择是否添加行号, https://kz16.top/md/

    • 编辑栏可高亮, 可自定义光标等, 我的配置代码如下:

      // "editor.fontSize": 17,
      "window.zoomLevel": 1,
      "files.eol": "\n",
      "editor.wordWrap": "on",
      "editor.cursorBlinking": "solid",
      "editor.wordWrapColumn": 80,
      "editor.wrappingIndent": "same",
      "editor.renderControlCharacters": true,
      "editor.minimap.enabled": false,
      "editor.renderWhitespace": "all",
      "workbench.colorCustomizations": {
        // 设置光标颜色
        "editorCursor.foreground": "#FF0000",
        "editor.lineHighlightBackground": "#e9eeee3d", 
        // "editor.lineHighlightBorder": "#a8a6a630",
        // "editorWhitespace.foreground": "#7e5f5f70",
      },
      
    • 格式化文本, 右键即可

    • 自动(邮箱)链接

    • 多行编辑, Shift + Alt + 鼠标左键

    • vim, 以及打字机专注模式, Ctrl + K Z, 两次 Esc退出

    • 炫酷输入 插件 Power Mode

    • Emoji表情, 😄

    • 背景图片 插件 shalldie.background

    • 字数统计 插件 Word Count CJK

    • 朗读 插件 bierner.speech

    • 翻译 插件 preflower.vscode-translation

    • LaTex数学符号计算 插件 orangex4.latex-sympy-calculator

    • 五线谱 插件 lhl2617.VSLilyPond插件 zaaack.markdown-editor

      X: 24   
      T: Clouds Thicken   
      C: Paul Rosen   
      S: Copyright 2005, Paul Rosen   
      M: 6/8   
      L: 1/8   
      Q: 3/8=116   
      R: Creepy Jig   
      K: Em   
      |:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\   
      "C7"_B2A "B7"=B3|"Em"EEE E2G|   
      "C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\   
      1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|   
      "G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\   
      "G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|   
      

    3. 参考