Markdown 扩展
Markdown 扩展允许你扩展和增强 Visual Studio Code 内置的 Markdown 预览。这包括改变预览的外观或添加对新 Markdown 语法的支持。
使用 CSS 改变 Markdown 预览的外观
扩展可以贡献 CSS 来改变 Markdown 预览的外观或布局。样式表通过使用扩展的 package.json
中的 markdown.previewStyles
贡献点进行注册。
"contributes": {
"markdown.previewStyles": [
"./style.css"
]
}
"markdown.previewStyles"
是一个相对于扩展根文件夹的文件列表。
贡献的样式会在内置 Markdown 预览样式之后,但在用户的 "markdown.styles"
之前添加。
Markdown Preview GitHub Styling 扩展是一个很好的示例,展示了如何使用样式表使 Markdown 预览看起来像 GitHub 渲染的 Markdown。你可以在 GitHub 上查阅该扩展的源代码。
使用 markdown-it 插件添加对新语法的支持
VS Code Markdown 预览支持 CommonMark 规范。扩展可以通过贡献 markdown-it 插件来添加对额外 Markdown 语法的支持。
要贡献一个 markdown-it 插件,首先在你的扩展的 package.json
中添加一个 "markdown.markdownItPlugins"
贡献。
"contributes": {
"markdown.markdownItPlugins": true
}
然后,在扩展的主 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'));
}
};
}
要贡献多个 markdown-it 插件,请返回多个链接在一起的 use
语句。
return md.use(require('markdown-it-emoji')).use(require('markdown-it-hashtag'));
贡献 markdown-it 插件的扩展会在 Markdown 预览首次显示时被惰性激活。
markdown-emoji 扩展展示了如何使用 markdown-it 插件为 Markdown 预览添加表情符号支持。你可以在 GitHub 上查阅该表情符号扩展的源代码。
你可能还想查阅
- 适用于 markdown-it 插件开发者的指南
- 现有 markdown-it 插件
使用脚本添加高级功能
对于高级功能,扩展可以贡献在 Markdown 预览中执行的脚本。
"contributes": {
"markdown.previewScripts": [
"./main.js"
]
}
贡献的脚本会异步加载,并在每次内容更改时重新加载。
Markdown Preview Mermaid Support 扩展展示了如何使用脚本为 Markdown 预览添加 Mermaid 图和流程图支持。你可以在 GitHub 上查阅该 Mermaid 扩展的源代码。