# Markdown插件

Markdown插件可以帮你扩展和加强VS Code内置的Markdown预览，包括改变预览的样式、添加新的Markdown语法。

# 用CSS改变Mark预览样式

配置CSS可以改变mark预览的布局和样式，在你的插件pacakge.json中注册markdown.previewStyles即可：

"contributes": {
    "markdown.previewStyles": [
        "./style.css"
    ]
}

1
2
3
4
5

markdown.previewStyles类型是插件根目录下的文件列表。

配置的样式会在用户的"markdown.styles"之前，内置Markdown预览样式之后加载。

Markdown Preview GitHub Styling是一个如何将Markdown预览变成像GitHub渲染风格的好例子，在GitHub上去查看源码吧

# 使用markdown-it插件添加新语法

VS Code Markdown预览支持CommonMark规格，插件可以通过一个markdown-it插件添加新的Markdown语法。

首先，在你的插件package.json中配置"markdown.markdownItPlugins"：

"contributes": {
    "markdown.markdownItPlugins": true
}

1
2
3

然后在插件的主activation函数中，返回一个包含名extendMarkdownIt函数的对象。这个函数接收一个markdown-it实例，然后必须返回出新的markdown-it实例：

import * as vscode from 'vscode'

export function activate(context: vscode.ExtensionContext) {
    return {
        extendMarkdownIt(md: any) {
            return md.use(require('markdown-it-emoji'));
        }
    }
}

1
2
3
4
5
6
7
8
9

若想配置多个markdown-it插件，只需多次链式调用use声明即可。

return md.use(require('markdown-it-emoji')).use(require('markdown-it-hashtag'));

Markdown预览第一次显示时，配置了markdown-it的插件会变成懒加载激活。

markdown-emoji插件展示了如何使用markdown-it添加emoji支持，你可以在GitHub上查看Emoji插件的源码。

你可能还想了解：

markdown-it插件开发者指南
现成的markdown-it插件

# 用脚本添加进阶功能

对于进阶特性，在插件中配置可运行的脚本：

"contributes": {
    "markdown.previewScripts": [
        "./main.js"
    ]
}

1
2
3
4
5

配置的脚本是异步加载的，每次内容变动还会重载。

Markdown Preview Mermaid Support插件展示了如何使用脚本添加鱼骨图和流程图预览。在这里查看插件源码。

← VS Code中的源控制