跟我来,用Visual Studio Code
打造一个适合你的Markdown
编辑工具
作为一个喜欢使用markdown
来记录自己学习笔记的人,一个好的markdown
工具无疑能给自己带来更好的书写体验。
我对编辑器有下面几个要求:
- 最好使用
java
语言开发,这样我能够根据自己的需求定制化实现功能。 - 支持
IntelliJ IDEA
的快捷键或者可以自定义快捷键,因为作为一个javaer
,我在编辑文本时会很自然的使用IntelliJ IDEA
的快捷键,但是有些时候这种习惯会严重影响我的编辑体验,比如在IntelliJ IDEA
中ctrl+w
组合键的作用是扩散选词,而在其他编辑工具中,ctrl+w
的效果可能是关闭当前编辑窗口,那种写着写着笔记,突然把编辑器关掉的感觉,相信我,你绝对不想体验第二次。
这是什么人间疾苦 - 支持
plantuml
,LaTex
等语法,这些扩展语法对我来说相对比较重要,因为我需要借助于他们来更好的记录我的想法。 - 良好的预览体验,良好的预览体验是指实时同步无卡顿的预览,最好是局部或者流式渲染布局效果,因为如果每次输入都重新渲染整个预览界面的话,在有大量表达式和图片等资源的时候,预览的卡顿会非常影响使用体验。
-
支持列编辑,列编辑是一个很细节的功能,很多编辑器不具备这个功能,但是在某些时候,却又格外有用。
说真的 - 最好支持图床,在
markdown
添加图片是一个相对比较麻烦的事,所以我的要求是最好支持图床,直接粘贴即可的那种,不需要做额外太多操作,这一点很重要,但是因为我自己开发了一个截图工具,可以完美的提供截图并上传到云端还能将访问地址以markdown语法的格式回填剪切板的体验,所以,图床只是一个可选的功能。
我可真优秀 - 最好是开源或者免费的
抱着对上面的要求,我调研和使用了市面上非常多的markdown
编辑器,但是这些编辑器或多或少有令我感到不合适的地方,为此,我甚至自己去开发了一款markdown
编辑器。
-
Markdown编辑工具,支持主流的Plantuml
二次开发的Markdown编辑工具
但是,功能的实现不是一蹴而就的,很多功能的实现都需要我去用大量的时间来完成。
而且,因为是借助于其他开源项目做的二次开发,因此在设计上和自己的思路有些不同之处,如果想完全实现自己的需求,无疑要费很大的功夫和很长的时间。
而我恰恰缺少的就是时间,因此,我需要考虑能不能去找一个能够满足我绝大多数需求的工具。
最后,在放弃了使用
java
语言开发这一条件之后,经过各种对比,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
这款主题,因为我喜欢熊猫。
安装Markdown Preview Enhanced
Markdown Preview Enhanced
提供了很多额外的特性,这一点很赞!
这是他们家的文档,通过文档,可以更好的了解这个插件的特性,建议通读一遍。
这个插件的确提供了很多有意思的功能,比如文件格式转换,图床之类的功能:
有些许不足之处是,在文章中包含大量图片引用时,滚动编辑窗口,有些时候预览窗口会快速闪过,体验会受到一丝影响:
仔细看,左侧编辑窗口顶部由47
行滚动到49
行,但是预览窗口快速滚动到了底部,这不算是bug
,应该是同步策略的问题,美中不足吧~
虽然有些小瑕疵,但是其余功能还是很棒的,所以安装一个吧~
使用快键键ctrl+shift+x
打开应用商店搜索Markdown Preview Enhanced
或者直接点击Markdown Preview Enhanced。
安装Markdown Shortcuts插件
Markdown Shortcuts
插件为常规的markdown
语法提供了快捷键支持。
使用快键键ctrl+shift+x
打开应用商店搜索Markdown Shortcuts
或者直接点击Markdown Shortcuts安装该插件。
安装PlantUMl插件,使原生的预览视图支持PlantUml
语法
PlantUMl
插件不仅能够为我们的markdown
原生预览视图提供PlantUml
语法支持,他还支持*.wsd,*.pu,*.puml,*.plantuml,*.iuml
后缀的文件。
使用快键键ctrl+shift+x
打开应用商店搜索PlantUML
或者直接点击PlantUML安装该插件。
安装完成后,针对PlantUMl
插件进行简单的配置。
PlantUMl
插件有两种渲染方式,一种是本地渲染,一种是通过远程服务器渲染。
本地渲染需要本地安装java
运行环境和Graphviz
应用程序,点击查看本地渲染文档,这里建议使用远程服务器渲染的方式,比较简单。
远程服务器渲染比较简单,点击访问远程渲染文档:
使用ctrl+shift+p
快捷键打开命令窗口,输入Open Settings(JSON)
,选择首选项:打开设置(json)
:
在打开的settings.json
文件中输入远程服务器配置:
代码:
"plantuml.server": "http://www.plantuml.com/plantuml"
安装Markdown Preview Mermaid Support插件
安装Markdown Preview Mermaid Support
插件让markdown
支持流程图和Mermaid
图。
使用快键键ctrl+shift+x
打开应用商店搜索Markdown Preview Mermaid Support
或者直接点击Markdown Preview Mermaid Support安装该插件。
安装IntelliJ IDEA Keybindings插件
安装IntelliJ IDEA Keybindings
插件让Visual Studio Code
支持IntelliJ IDEA
的快捷键。
使用快键键ctrl+shift+x
打开应用商店搜索IntelliJ IDEA Keybindings
或者直接点击IntelliJ IDEA Keybindings安装该插件。
在该页面中包含了详细的快捷键列表。
安装VSC Netease Music插件,编写代码边听歌
VSC Netease Music
是Visual Studio Code
中的网易云音乐插件。
使用快键键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
文件:
复制其中的ffmpeg.dll
文件替换Visual Studio Code
安装目录下的ffmpeg.dll
文件:
点击替换目标中的文件按钮:
完成替换:
重启Visual Studio Code
,使用ctrl+shift+p
打开命令输入窗口,输入并执行NeteaseMusic:Start
命令:
不要关闭Visual Studio Code
打开的NeteaseMuisc
窗口:
使用ctrl+shift+p
打开命令输入窗口,输入并执行NeteaseMusic:Search
命令:
选择你喜欢的音乐,尽情享受吧~
值得一提的是,展示在状态栏的歌曲操作工具栏和歌词提示是真的香。
以前听歌想看歌词就得开启桌面歌词,但是桌面歌词放在哪都会影响到自己的编辑体验,现在歌词放在状态栏,一低头就能看到,是真的让人感到特别精致。
安利一款markdown截图上传工具
截图上传工具,支持一键将截图上传到云端,并将访问地址以指定格式,回填到剪切板中
-
JPanda Snapshot
支持将截图上传到多种不同的环境中。目前包括:
阿里云
,京东云
,七牛云
,GITHUB
,GITEE
,OSCHINA
,简书
,imgurl图床
,SM图床
以及本地
和不存储
。
图床 -
JPanda Snapshot
在完成图片上传之后,允许将图片或图片地址处理成不同的数据类型。目前包括:
MARKDOWN语法
,真实访问地址
,图片本身
。
剪切板 -
相对完善的图片编辑功能。
目前支持:
绘制圆形
、绘制矩形
、绘制箭头
、自由画笔
、文字
、马赛克
图片编辑功能 -
图钉功能-允许将截图固定在屏幕窗口,且允许为该截图添加简单描述,并提供了丰富的快捷键支持。
图钉功能 其他功能
为了保存访问云环境的相关数据,支持启用密码。
失败任务列表,允许重新上传处理失败的图片。
-
提供图钉管理界面,管理图钉
熊猫截图
使用体验:
写在最后
关于使用Visual Studio Code
的使用体验,截止到目前我最新的mybatis源码之美
系列文章就是使用它来完成编写过程的。
除了代码和语法提示稍有不足之外,其余的暂时都能满足我的需求,甚至在很多地方,超出了我的预期。
很棒!