从高二第一次接触Markdown语法到现在,也快三年了。经过了多次探索,终于能以一种舒适无痛的方式使用Markdown语法畅快编辑了,在这里记录一下,也是怕哪天重装电脑时会忘记。

Visual Studio Code

首先这里用的文本编辑器是Visual Studio Code。VSCode是由微软出品的一款强大的跨平台文本编辑器,支持GoCSSPerlSass等一大票语言,且现在也有了丰富的拓展,我们可以在这里下载VSCode.

让VSCode无痛支持Markdown还需要一些拓展的加持,下面就是我用到的拓展。

Auto-Open Markdown Preview

一款实时渲染Markdown文档,能让你在编辑时即预览的拓展,安装好以后在Markdown编辑页面右上角会出现预览按钮。而且预览窗格是通过一个CSS文件来控制字体和行列风格的,虽然不需要很大的改动,但是像我一样不喜欢默认宋体的人可以通过连接到一个CSS的方法来修改预览的风格。

我将CSS文件放在了电脑的C:/Users/Yzstr/Documents目录下,然后在设置里添加:

"Markdown.styles": 
        ["file://C:/Users/Yzstr/Documents/Markdownstyles.css"],

即可达到通过这个CSS文件控制预览层级样式的效果。这个CSS文件也很简单,只有用于控制字体的一行:

body {
    font-family: 'Microsoft Jhenghei', Tahoma, Geneva, Verdana, sans-serif;
}

你也可以添加自己喜欢的CSS,这里提供一个网站,里面有很多Markdown CSS供选择。

Markdown PDF

这个拓展可以帮助你将Markdown源文件导出为一个PDF格式文档。正如上面的实时渲染,导出文档的目标样式也可以修改。如果只要修改字体的话,甚至可以不用CSS文件,直接在设置里设置编辑器的控制字体系列:

"editor.fontFamily": "Consolas,Arial, 'Microsoft JhengHei', 'Microsoft YaHei'",

然后便可以在每次编辑完源文件以后通过Convert Markdown to PDF命令导出一份精美的PDF文件啦。

qiniu-upload-image

编写Markdown文件时需要插入图片怎么办?这个插件能瞬间将你的图片(Shift+O打开资源管理器选择图片)上传到你的七牛云空间(我正好是七牛云用户),生成链接并以Markdown格式插入。十分方便。

配置这个插件需要一些七牛控制台的一些信息:

 "qiniu.access_key": "YOUR ACCESS KEY",
    "qiniu.bucket": "YOUR BUCKET NAME",
    "qiniu.domain": "http://cdn.yzstr.com",
    "qiniu.remotePath": "${mdFileName}-${fileName}-${date}",
    "qiniu.secret_key": "YOUR SECRET KEY",
    "qiniu.enable": true,

然后就可以顺畅地插入图片了,这在写博客的时候配合Ghost的Markdown编辑器特别好用。

后记

一个调教顺手的编辑器能让自己的效率提高很多。以上这些拓展及其恰到好处的配置让我在写博客文章/文档的时候流畅自如。当然VSCode能干的不止这些,以后会写一些关于它其他强大功能的文章。

支付宝扫码打赏 微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章

Yzstr Andy's Picture
Yzstr Andy

School of Data and Computer Science, SUN YAT-SEN UNIVERSITY