使用Visual studio code (VS code)写Markdown文档
Markdown 写作工具选择
候选产品
- VS Code http://code.visualstudio.com
微软出品的轻量级编辑器, 免费, 和 sublime text 属于一个流派的, 配合下面几个插件 markdown 插件写. - HBuilderX
这个软件写MD文档编辑体验非常棒, 复制图片, 复制超链接, code block 高亮都非常好, 就是不能预览网络图片. - MarkdownPad http://markdownpad.com/
实时预览做的不错, 大文档预览的同步滚动做的也不错. 但免费版限制较多.
我的选择和配置
我的选择是 VS code 毕竟是大厂的产品, 同时也是多功能的编辑器.
VS配置和插件安装
- Color Theme, 选择 Solarized light 或Quite light, 比较柔和.
- 编辑器关闭 line number, 设置较大的字体, 文本支持折行, 比较适合文档编写.
- 安装 Markdown all in one 或 Markdown Preview Enhanced, 前者性能更好, 后者Table预览支持得更好.
- 安装 Paste Image 插件(作者mushan), 支持直接在编辑器中paste图片. 快捷键为
ctrl+alt+v, 设置图片前缀为img_ - 安装 Paste URL 插件(作者kukushi), 支持直接复制 url, 需要设置一下快捷键盘, 我设的是 'ctrl+alt+b' .
- 安装 Highlight 插件(作者Fabio Spampinato), 可以让编辑区的 code block 显示出背景和语法高亮.
Highlight插件配置参考文章 - markdownlint 插件, 偶尔开启一下用于检查 markdown 写法
- Pangu-Markdown 插件, 格式化markdown原文, 比如在中文英文之间自动加空格, 将英文标点智能替换成中文标点.
直接修改vscode的配置文件
文件路径为: C:\Users\dorothy\AppData\Roaming\Code\User\settings.json
下面是内容:
{
"workbench.colorTheme": "Solarized Light",
"workbench.iconTheme": "vscode-great-icons",
"editor.matchBrackets": "always",
"breadcrumbs.enabled": true,
"editor.minimap.enabled": false,
"liveServer.settings.donotShowInfoMsg": true,
"editor.fontSize": 16,
"editor.lineNumbers": "off",
"pasteImage.namePrefix": "img_",
"editor.wordWrap": "on",
"editor.cursorBlinking": "solid",
"window.titleBarStyle": "native",
"highlight.regexes": {
"([^`])(`[^`]+?`)": {
"filterLanguageRegex": "markdown",
"regexFlags": "g",
"filterFileRegex": ".*\\.md",
"decorations": [{}, {
"backgroundColor": "rgba(0, 0, 0, 0.05)",
"border": "1px dashed rgba(0, 0, 0, 0.1)",
"borderRadius": "3px"
}, {}]
},
"(```.+?```)": {
"regexFlags": "gs",
"decorations": {
"backgroundColor": "rgba(0, 0, 0, 0.05)",
"isWholeLine": true,
},
"filterLanguageRegex": "markdown",
"filterFileRegex": ".*\\.md"
}
}
}
VS code 降低 CPU占用
在配置中修改:
- Cursor blinking 默认是 blink 模式, Error Happened 即光标总是一闪一闪的, VS code 是通过css样式实现的, 比较耗CPU, 可修改为 solid 模式.
- window.titleBarStyle 为 native
- 插件要少装, 尤其git不要激活, 不要让vsc 频繁扫描磁盘文件状态.
- 使用命令 Developer: open process explorer 查看插件的CPU/Memory使用情况, 该禁止就禁.
Markdown 几个链接的写法, 写下备忘
Markdown 中插入的图片, 我没有使用图床, 而是在自己机器上使用 mongoose 免费版搭建了一个 web server.
- 快捷 link 写法:
http://localhost:8080/ch1/img8.png - 带 alt 文字的 link 写法:
alt 文字 - 图片嵌入的写法:
