如何为VSCode Markdown预览添加围栏代码块新语法高亮？

一、通过自定义VSCode扩展实现（官方机制） #

如果想基于VSCode原生预览引擎修改，按以下步骤操作：

1. 确认目标语言有对应的语法包：优先选择Shiki（VSCode默认预览引擎）或Highlight.js的语法模块。
2. 创建一个空的VSCode扩展项目：
   • 用yo code生成基础扩展结构，选择「New Extension (JavaScript)」。
   • 在扩展目录下安装依赖：如果用Highlight.js，执行npm install highlight.js highlight.js/lib/languages/[你的语言名]；如果用Shiki，执行npm install shiki @shikijs/langs。
3. 修改package.json，添加预览脚本贡献：

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

4. 在main.js中注册语法：
   • 若用Highlight.js：

     const hljs = require('highlight.js');
     const yourLang = require('highlight.js/lib/languages/[你的语言名]');
     
     hljs.registerLanguage('[你的语言别名]', yourLang);
     

   • 若用Shiki：

     const { getHighlighter } = require('shiki');
     
     (async () => {
       const highlighter = await getHighlighter({
         langs: ['[你的语言名]'],
         theme: 'vscode-dark'
       });
       // 替换预览引擎的高亮逻辑（需适配Shiki与VSCode预览的集成）
     })();
     

5. 按F5启动扩展调试，打开Markdown文件预览，测试自定义语言的代码块高亮。

二、用现成扩展快速解决（推荐） #

方案1：Markdown Preview Enhanced #

这个扩展自带丰富的语法高亮支持，且支持自定义扩展：

1. 安装该扩展后，在Markdown代码块中直接指定语言别名：

   ```[你的语言别名]
   # 你的代码示例
   

2. 如果扩展默认不支持目标语言，在~/.mume/script.js中添加语法注册（以Highlight.js为例）：

   const hljs = require('highlight.js');
   const yourLang = require('highlight.js/lib/languages/[你的语言名]');
   hljs.registerLanguage('[你的语言别名]', yourLang);
   

3. 重启扩展后，预览即可生效。

方案2：Markdown Preview Shiki #

该扩展基于Shiki引擎，完全匹配VSCode编辑器的语法高亮风格：

1. 安装扩展后，在设置中找到「Markdown Preview Shiki: Languages」，添加目标语言的语法包路径（可从npm下载@shikijs/langs中的对应模块）。
2. 在Markdown代码块中指定语言名，预览即可自动应用高亮。

三、关键注意点 #

• 编辑器内的代码高亮由VSCode的语言服务提供，和预览引擎是独立的，所以编辑器正常不代表预览会自动支持。
• 无论是自定义扩展还是现成工具，核心都是让预览引擎加载并注册目标语言的语法定义文件。

内容的提问来源于stack exchange，提问作者geguze