Markdown插件

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

用CSS改变Mark预览样式


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

  1. "contributes": {
  2. "markdown.previewStyles": [
  3. "./style.css"
  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"

  1. "contributes": {
  2. "markdown.markdownItPlugins": true
  3. }

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

  1. import * as vscode from 'vscode'
  2. export function activate(context: vscode.ExtensionContext) {
  3. return {
  4. extendMarkdownIt(md: any) {
  5. return md.use(require('markdown-it-emoji'));
  6. }
  7. }
  8. }

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

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

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

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

你可能还想了解:

用脚本添加进阶功能


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

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

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

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