# 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'));
1

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

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

你可能还想了解:

# 用脚本添加进阶功能


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

"contributes": {
    "markdown.previewScripts": [
        "./main.js"
    ]
}
1
2
3
4
5

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

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