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'
  3. export function activate(context: vscode.ExtensionContext) {
  4.     return {
  5.         extendMarkdownIt(md: any) {
  6.             return md.use(require('markdown-it-emoji'));
  7.         }
  8.     }
  9. }

若想配置多个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插件展示了如何使用脚本添加鱼骨图和流程图预览。在这里查看插件源码。