跟我来,用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源码之美系列文章就是使用它来完成编写过程的。

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

很棒!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,682评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,277评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,083评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,763评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,785评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,624评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,358评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,261评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,722评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,900评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,030评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,737评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,360评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,941评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,057评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,237评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,976评论 2 355

推荐阅读更多精彩内容