跟我来,用Visual Studio Code打造一个适合你的Markdown编辑工具

跟我来,用Visual Studio Code打造一个适合你的Markdown编辑工具

作为一个喜欢使用markdown来记录自己学习笔记的人,一个好的markdown工具无疑能给自己带来更好的书写体验。

我对编辑器有下面几个要求:

  • 最好使用java语言开发,这样我能够根据自己的需求定制化实现功能。
  • 支持IntelliJ IDEA的快捷键或者可以自定义快捷键,因为作为一个javaer,我在编辑文本时会很自然的使用IntelliJ IDEA的快捷键,但是有些时候这种习惯会严重影响我的编辑体验,比如在IntelliJ IDEActrl+w组合键的作用是扩散选词,而在其他编辑工具中,ctrl+w的效果可能是关闭当前编辑窗口,那种写着写着笔记,突然把编辑器关掉的感觉,相信我,你绝对不想体验第二次。
    这是什么人间疾苦
  • 支持plantumlLaTex等语法,这些扩展语法对我来说相对比较重要,因为我需要借助于他们来更好的记录我的想法。
  • 良好的预览体验,良好的预览体验是指实时同步无卡顿的预览,最好是局部或者流式渲染布局效果,因为如果每次输入都重新渲染整个预览界面的话,在有大量表达式和图片等资源的时候,预览的卡顿会非常影响使用体验。
  • 支持列编辑,列编辑是一个很细节的功能,很多编辑器不具备这个功能,但是在某些时候,却又格外有用。


    说真的
  • 最好支持图床,在markdown添加图片是一个相对比较麻烦的事,所以我的要求是最好支持图床,直接粘贴即可的那种,不需要做额外太多操作,这一点很重要,但是因为我自己开发了一个截图工具,可以完美的提供截图并上传到云端还能将访问地址以markdown语法的格式回填剪切板的体验,所以,图床只是一个可选的功能。
    我可真优秀
  • 最好是开源或者免费的

抱着对上面的要求,我调研和使用了市面上非常多的markdown编辑器,但是这些编辑器或多或少有令我感到不合适的地方,为此,我甚至自己去开发了一款markdown编辑器。

但是,功能的实现不是一蹴而就的,很多功能的实现都需要我去用大量的时间来完成。

而且,因为是借助于其他开源项目做的二次开发,因此在设计上和自己的思路有些不同之处,如果想完全实现自己的需求,无疑要费很大的功夫和很长的时间。

而我恰恰缺少的就是时间,因此,我需要考虑能不能去找一个能够满足我绝大多数需求的工具。

沮丧

最后,在放弃了使用java语言开发这一条件之后,经过各种对比,Visual Studio Code这一款编辑器进入了我的视线并在抉择中胜出。

Visual Studio Code良好的插件机制以及社区,基本上提供了我所需的绝大多数功能,甚至在某些地方超出了我的预期。

点击访问Visual Studio Code官网

Visual Studio Code官网

安装Visual Studio Code

点击直接下载Visual Studio Code 1.43.2

获取到Visual Studio Code的安装包之后,双击安装包,进入Visual Studio Code的安装流程。

安装

同意协议,点击下一步:

请输入图片描述

点击下一步:

请输入图片描述

点击完成:

请输入图片描述

安装简体中文语言包

Visual Studio Code默认使用的英文:

英文菜单

但是我们可以通过安装简体中文语言包来进行汉化工作:

使用快键键ctrl+shift+x打开应用商店搜索Chinese (Simplified) Language Pack for Visual Studio Code或者直接点击Chinese (Simplified) Language Pack for Visual Studio Code

安装界面

点击安装按钮,安装中文语言支持包,安装完成后,Visual Studio Code会在右下角弹出提示框。

重启提示

点击Restart Now按钮,等待Visual Studio Code重启后,完成汉化工作。

汉化后

安装主题插件

使用快键键ctrl+shift+x打开应用商店搜索Community Material Theme或者直接点击Community Material Theme

点击Install按钮:

点击安装

如果是浏览器打开还需要再次确认:


允许打开

安装完插件后,点击设置颜色主题按钮:

设置颜色主题

选择ommunity Material Theme Lighter High Contrast主题:

选择主题

这款纯白色的主题,能够放松我的心情:


纯白色

除了这款白色的主题,还有一个暗黑系主题插件要推荐Panda Theme

使用快键键ctrl+shift+x打开应用商店搜索Panda Theme或者直接点击Panda Theme

Panda Theme

暗黑系的主题效果:


暗黑系

别问我为什么推荐Panda Theme这款主题,因为我喜欢熊猫。

无辜

安装Markdown Preview Enhanced

Markdown Preview Enhanced提供了很多额外的特性,这一点很赞!

特性

这是他们家的文档,通过文档,可以更好的了解这个插件的特性,建议通读一遍。

这个插件的确提供了很多有意思的功能,比如文件格式转换图床之类的功能:

预览窗口的右键菜单

有些许不足之处是,在文章中包含大量图片引用时,滚动编辑窗口,有些时候预览窗口会快速闪过,体验会受到一丝影响:

杠精

仔细看,左侧编辑窗口顶部由47行滚动到49行,但是预览窗口快速滚动到了底部,这不算是bug,应该是同步策略的问题,美中不足吧~

滚动预览.gif

虽然有些小瑕疵,但是其余功能还是很棒的,所以安装一个吧~

使用快键键ctrl+shift+x打开应用商店搜索Markdown Preview Enhanced或者直接点击Markdown Preview Enhanced

安装Markdown Shortcuts插件

Markdown Shortcuts插件为常规的markdown语法提供了快捷键支持。

Markdown Shortcuts插件

使用快键键ctrl+shift+x打开应用商店搜索Markdown Shortcuts或者直接点击Markdown Shortcuts安装该插件。

快键键列表

安装PlantUMl插件,使原生的预览视图支持PlantUml语法

PlantUMl插件不仅能够为我们的markdown原生预览视图提供PlantUml语法支持,他还支持*.wsd,*.pu,*.puml,*.plantuml,*.iuml后缀的文件。

PlantUMl插件

使用快键键ctrl+shift+x打开应用商店搜索PlantUML或者直接点击PlantUML安装该插件。

安装完成后,针对PlantUMl插件进行简单的配置。

PlantUMl插件有两种渲染方式,一种是本地渲染,一种是通过远程服务器渲染。

本地渲染需要本地安装java运行环境和Graphviz应用程序,点击查看本地渲染文档,这里建议使用远程服务器渲染的方式,比较简单。

远程服务器渲染比较简单,点击访问远程渲染文档

使用ctrl+shift+p快捷键打开命令窗口,输入Open Settings(JSON),选择首选项:打开设置(json):

首选项:打开设置(json)

在打开的settings.json文件中输入远程服务器配置:

settings.json

代码:

"plantuml.server": "http://www.plantuml.com/plantuml"

安装Markdown Preview Mermaid Support插件

安装Markdown Preview Mermaid Support插件让markdown支持流程图和Mermaid图。

Markdown Preview Mermaid Support插件

使用快键键ctrl+shift+x打开应用商店搜索Markdown Preview Mermaid Support或者直接点击Markdown Preview Mermaid Support安装该插件。

安装IntelliJ IDEA Keybindings插件

安装IntelliJ IDEA Keybindings插件让Visual Studio Code支持IntelliJ IDEA的快捷键。

IntelliJ IDEA Keybindings插件

使用快键键ctrl+shift+x打开应用商店搜索IntelliJ IDEA Keybindings或者直接点击IntelliJ IDEA Keybindings安装该插件。

该页面中包含了详细的快捷键列表。

安装VSC Netease Music插件,编写代码边听歌

VSC Netease MusicVisual Studio Code中的网易云音乐插件。

VSC Netease Music插件

使用快键键ctrl+shift+x打开应用商店搜索VSC Netease Music或者直接点击VSC Netease Music安装该插件。

使用该插件需要替换Visual Studio Code安装目录下的ffmpeg.dll文件:

安装目录

点击下载electron-v7.1.11-win32-x64.zip

或者访问https://npm.taobao.org/mirrors/electron/获取自己需要的版本。

解压得到的electron文件:

electron压缩包

复制其中的ffmpeg.dll文件替换Visual Studio Code安装目录下的ffmpeg.dll文件:

请输入图片描述

点击替换目标中的文件按钮:

提示

完成替换:

替换后

重启Visual Studio Code,使用ctrl+shift+p打开命令输入窗口,输入并执行NeteaseMusic:Start命令:

NeteaseMusic:Start

不要关闭Visual Studio Code打开的NeteaseMuisc窗口:

NeteaseMuisc

使用ctrl+shift+p打开命令输入窗口,输入并执行NeteaseMusic:Search命令:
选择你喜欢的音乐,尽情享受吧~

歌曲搜索列表

值得一提的是,展示在状态栏的歌曲操作工具栏和歌词提示是真的香。

状态栏的歌词

以前听歌想看歌词就得开启桌面歌词,但是桌面歌词放在哪都会影响到自己的编辑体验,现在歌词放在状态栏,一低头就能看到,是真的让人感到特别精致。

真香

安利一款markdown截图上传工具

截图上传工具,支持一键将截图上传到云端,并将访问地址以指定格式,回填到剪切板中

  • JPanda Snapshot支持将截图上传到多种不同的环境中。

    目前包括: 阿里云,京东云,七牛云,GITHUB,GITEE,OSCHINA,简书,imgurl图床,SM图床以及本地不存储

    图床

  • JPanda Snapshot在完成图片上传之后,允许将图片或图片地址处理成不同的数据类型。

    目前包括: MARKDOWN语法真实访问地址,图片本身

    剪切板

  • 相对完善的图片编辑功能。

    目前支持: 绘制圆形绘制矩形绘制箭头自由画笔文字马赛克

    图片编辑功能

  • 图钉功能-允许将截图固定在屏幕窗口,且允许为该截图添加简单描述,并提供了丰富的快捷键支持。


    图钉功能
  • 其他功能

  • 为了保存访问云环境的相关数据,支持启用密码。

  • 失败任务列表,允许重新上传处理失败的图片。

  • 提供图钉管理界面,管理图钉


    熊猫截图

使用体验:


使用体验

写在最后

关于使用Visual Studio Code的使用体验,截止到目前我最新的mybatis源码之美系列文章就是使用它来完成编写过程的。

除了代码和语法提示稍有不足之外,其余的暂时都能满足我的需求,甚至在很多地方,超出了我的预期。

很棒!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容