Loading...
墨滴

季布编程

2021/06/11  阅读:201  主题:默认主题

VScode中MarkDown编辑器的配置

VSCode软件设置成一个可以用MarkDown写作的写作软件


  VSCode是一个微软公司开发的一个编程软件,但是通过适当的配置我们可以把它当成一个写作软件来使用,比用Word写文章还方便。

图1 VSCode的Logo
图1 VSCode的Logo

  可以使用MarkDown语言写作的软件有很多,它们各有特色,本文要介绍的是如何将VSCode设置成一个可以用MarkDown语言来写作的软件。

  在VSCode中用MarkDown写作的文章,排版非常漂亮,看起来很舒服,很有美感。可以看看下图直观感受一下效果。虽然设置的过程有点儿复杂,但是我还是坚持设置好了,因为再复杂,一次搞好,以后可以一直使用,为了好看的效果麻烦一次也值得嘛。

图2 VSCode中用MarkDown写的文章
图2 VSCode中用MarkDown写的文章

  具体的设置步骤我在下面一步一步说明,对步骤中的复杂问题,我会做妥善的解释。在下面内容中,我先简单介绍VSCode的安装和MarkDown语言,这是简略的介绍,这篇文章我想重点介绍的是后面两部分内容,就是配置MarkDown的部分。

一、VSCode的下载安装

  VSCode软件是一个典型的Windows应用软件,下载安装方法和一般的Windows应用软件的下载安装方法是非常类似的。

  下载可以从它的官方网站(https://code.visualstudio.com/)下载,下载之后,会得到一个安装程序VSCodeUserSetup-x64-1.53.2.exe。双击后一路next就可以完成安装了。

图3 VSCode官方网站
图3 VSCode官方网站

二、MarkDown语言的简单介绍

  MarkDown是一种用来在网页上写文章的标记语言,用它标记一篇文章的一些字之后,这些字可以变成标题,也可以变成表格等。总之,它可以让普通的文字在网页上显示的时候,产生各种特殊的格式效果。

图4 MarkDown的Log
图4 MarkDown的Log

  最精彩的功能是,它可以标记数学公式、表格、图片等复杂的东西。上面的图2就是用MarkDown写的一篇文章,下面图4也是一篇用MarkDown标记的文章。许多网站都支持使用Markdown来撰写文章,比如知乎、简书、微信公众号等都可以用MarkDown来写文章。

图5 MarkDown的标记效果
图5 MarkDown的标记效果

  详细的MarkDown用法,可以在设置好VSCode之后,再通过自己用MarkDown写一篇文章来学习。网上有很多MarkDown的教程,可以参考看一看,比如可以学习一下这篇教程(https://www.runoob.com/markdown/md-tutorial.html),看的时候跟着教程写一篇文章也就学会使用MarkDown了。我的这篇文章就是用MarkDown来写的。

三、VSCode中自带的MarkDown功能

  VSCode中本来就自带MarkDown文件编辑功能。但是,这个自带的编辑功能不太适合写作文章,因为它默认是为写代码的程序员而设置的。所以,有必要做一些设置,使它适合写作。

1、界面语言设置

  安装完成后,默认的界面语言是英语。对中文区的人来说,看起来确实有一点不是很顺畅,所以,首先将它的界面语言从英文切换成中文。

图6 VSCode默认界面
图6 VSCode默认界面

  方法是:安装VSCode的中文语言包扩展,然后重启VSCode。

  什么是扩展呢?扩展(extension)指的是VSCode软件的插件,VSCode这个软件为了给增强它的功能留出空间,所以允许其他人为VSCode开发插件,这些插件就是VSCode的扩展。

  在下图中,点击绿色方框,弹出Extension MarketPlace界面,输入Chinese搜索出来的第一个点击Install,稍等片刻,然后重启,就完成了界面语言切换了。

图7 安装中文语言包扩展
图7 安装中文语言包扩展

  重启后,发现界面上显示的已经是中文了。

图8 切换成中文界面之后的VSCode
图8 切换成中文界面之后的VSCode

  这就是切换界面显示语言的方法。

2、颜色主题(Color Theme)

  默认情况下,VSCode的界面颜色主题是“深色+(默认深色)”,看起来黑乎乎的,像上面的图6、7、8都是默认的颜色主题,也许程序员们在写代码的时候比较喜欢黑色界面,但是在写文章的时候,看着黑黑的界面实在难受,所以就有必要切换一下颜色主题。

  切换方法:文件->首选项->颜色主题->选择“Quiet Light”。切换后效果如下。

图9 切换颜色主题后的VSCode
图9 切换颜色主题后的VSCode

  这样的界面看起来是不是就亲和多了呢?

3、预览的字体大小(Preview:Font Size)、行高(Preview:Line Height)、字体(Preview: Font Family)

  默认的MarkDown编辑器包括左右两个区域,下图是我的MarkDown界面截图。

图10 左边是编辑器右边是预览区
图10 左边是编辑器右边是预览区

  预览区的字体、字体大小和行高默认情况下都是不合适的,比较费眼睛,所以要做设置。

  文件->首选项->扩展->MarkDown

图11 设置预览区字体、字体大小和行高
图11 设置预览区字体、字体大小和行高

4、编辑器中的字体和字体大小

  默认的编辑器中字体和字体大小对文字工作者也是不太舒服的,可以这样设置。

  文件->首选项->用户->文本编辑器->字体

图12 编辑器中的字体、字体大小
图12 编辑器中的字体、字体大小

四、VSCode中MarkDown相关插件的使用方法

  VSCode中的MarkDown插件有很多,比较实用而且好用的是MarkDown Preview Enhanced。

  它的功能很丰富,官方网站是https://shd101wyy.github.io/markdown-preview-enhanced/#/

  功能太多了,只要记住安装了这个插件以后,在MarkDown中可以用标记画流程图,可以用标记写数学公式,可以将预览区的内容导出为pdf文档、jpg图片等。

  这个插件给VSCode中的MarkDown增加了如下的功能:

  自动编辑器及预览滑动同步
  导入外部文件
  Code Chunk
  Pandoc
  Prince
  电子书
  幻灯片
  可扩展性
  LaTeX 数学
  导出 PDF, PNG, 以及 JPEG   导出漂亮的 HTML(移动端支持)
  编译到 GitHub Flavored Markdown
  自定义预览 CSS
  TOC 生成
  流程图/时序图 以及各种其他种类的图形
  嵌入 LaTeX, 渲染 TikZ, Chemfig 等图形
  Task List (Github Flavored)
  图片助手
  脚注
  Front Matter
  以及更多。。。

图13 MarkDown Preview Enhanced支持的画图功能
图13 MarkDown Preview Enhanced支持的画图功能

五、总结

  在网上写文章主要是为了将自己优质的文章让更多的读者读到,真正帮助到读者,所以文章的内容很重要。但同时要注意,文章的排版的也很重要,文章的排版是文章的外表,良好排版的文章会更受读者欢迎、更容易吸引读者阅读。毕竟,在现在这个信息泛滥的时代,“没有人愿意透过你邋遢的外表去了解你丰富的内心”。所以,花点时间学习一下MarkDown也是很值得的一件事情。

MarkDown太棒了
MarkDown太棒了

   欢迎关注同名公众号"季布编程"

季布编程

2021/06/11  阅读:201  主题:默认主题

作者介绍

季布编程

欢迎关注同名公众号"季布编程"