markdown的瑞士军刀

1,780 阅读2分钟

两分钟提高vscode的markdown书写体验

对于程序员来说,时常温故知新,写博客是十分有益的,markdown成为众多程序员写作的新宠,不仅简洁,而且优雅,这里推荐一些提高markdown书写效率,并且美化排版的工具.

虽然说是两分钟,也可以30s解决啦,直接看下面.

文中插件

插件名 作用 测试版本
Markdown Theme Kit 支持自定义markdown预览样式 0.1.4
Markdown Preview Github Styling 以github风格预览markdown 0.1.6
markdown-formatter 支持格式化和快捷输入 0.4.0
Markdown+Math 支持LaTex数学公式 2.3.9

vscode Setting.json 推荐配置:

"[markdown]": {
  // 保存自动格式化
  "editor.formatOnSave": true,
  // 显示空白字符
  "editor.renderWhitespace": "all",
  // 快速补全
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.snippetSuggestions": "top",
  "editor.tabCompletion": "on",
  "editor.acceptSuggestionOnEnter": "on"
}

或者花点时间看这里.

vscode插件推荐

原生支持

作为一个代码编辑器, 原生支持markdown显示. 只需要 command(ctrl)+shift+p, 输入 Markdown Priview to the side , 就可以预览.

img

可以定制化的预览样式

可以自由地导入markdown展示样式, 也可以通过 Markdown Theme Kit 这样的插件来快速更改修改风格. 这里推荐一款 Markdown Preview Github Styling 插件, 可以将预览模式变成github的样式

img

拥有快速格式化工具

推荐一下 markdown-formatter 插件, 可以快速格式化代码.

例如这样的内容

img

按一下command+shift+f 就可以快速格式化为

img

是不是很方便?(标题并没有被删掉, 只是没截下来)

支持快捷输入

img

enter以后, 生成表格

img

也可以插入代码

img

img

支持LaTex语法

安装 Markdown+Math 插件, 就可以愉快预览LaTex数学公式了, 此处 艾特 掘金官方, 他们的文档也支持LaTex哦

这样的代码

$ f(x, y) = \frac{x^2}{y^3} $

在掘金里

f(x, y) = \frac{x^2}{y^3}

本地预览截图

img

更多功能

在Setting.json中可以进行更多设置来开启更多功能

img

img

例如可以针对markdown设置保存自动格式化,显示空白字符等等

"[markdown]": {
  // 保存自动格式化
  "editor.formatOnSave": true,
  // 显示空白字符
  "editor.renderWhitespace": "all",
  // 快速补全
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.snippetSuggestions": "top",
  "editor.tabCompletion": "on",
  "editor.acceptSuggestionOnEnter": "on"
}

好的, 本期节目到这里就结束了, 喜欢的观众请点个关注, 并长按视频下方的大拇指一键三连支持下up主.

拜托啦这对我真的很重要.