在vscode中使用markdown-it工具编译markdown文件的方法

用markdown-it工具编译markdown文件

我的上篇博文整理了如何在vscode中使用markdown PDF插件来编译sample.md文件方法，后来发现，markdown PDF插件不支持markdown math扩展，因此，这两天我在vscode的documentation中看到了类似于markdown PDF的插件的markdown-it，索性照上面的方法，试着编译了sample.md文件。下面来介绍我使用markdown-it编译sample.md文件的详细过程。

一、工具准备

1、vscode
2、node.js运行时库（里面包含npm工具）
3、markdown-it
其中node.js及npm工具的安装过程见：https://www.runoob.com/nodejs/nodejs-install-setup.html
下面来介绍markdown-it的安装过程，由于markdown-it目前没有出现在vscode的marketplace中，所以不能在vscode中的应用商店下载，只能借助于npm工具下载。

打开windows的命令行工具（cmd）,键入命令：（其中-g表示在你的电脑上全局安装）

npm install -g markdown-it

安装完成后输入命令：

markdown-it -v

若能正确显示版本号，则表明安装成功。

二、创建tasks.json文件

在vscode的工作文件夹sample下建立sample.md文件，具体内容如下：

# Hello Markdown in VS Code!

This is a simple introduction to compiling Markdown in VS Code.

Things you'll need:

* [node](https://nodejs.org)
* [markdown-it](https://www.npmjs.com/package/markdown-it)
* [tasks.json](/docs/editor/tasks)

## Section Title

> This block quote is here for your information.

配置sample.md文件的tasks.json文件,Tasks > Configure Tasks并且点击 Create tasks.json file from templates。然后，VS Code会显示一个可能的tasks.json模板列表供您选择。 选择Others，因为我们要运行外部命令。这会在工作区.vscode文件夹中生成tasks.json文件，其中包含以下内容：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo Hello"
        }
    ]
}

要使用markdown-it编译Markdown文件，请按如下所示更改内容：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Compile Markdown",
            "type": "shell",
            "command": "markdown-it sample.md -o sample.html",
            "group": "build"
        }
    ]
}

三、编译sample.md文件

选择Tasks > Run Build Task或者快捷键Ctrl+Shift+B。 由于我们只想将Markdown文件转换为HTML，因此选择“Never scan the build output from the presented list”。
此时，您应该会在文件列表看到sample.html文件。