VSCode Markdown Shiki Preview 预览

一个为 Visual Studio Code 设计的增强型 Markdown 预览扩展，旨在提供比内置预览更强大、更美观的 Markdown 渲染体验。

✨ 核心亮点

本扩展的核心是使用 Shiki 作为语法高亮引擎。Shiki 是一个功能强大的代码高亮库，它使用与 VSCode 相同的 TextMate 语法定义，因此可以像素级精准地渲染代码块，并支持海量的色彩主题。

🎨 丰富的主题选择: 内置 60+ 种流行的 Shiki 主题，可随时进行主题预览与设置。
⌨️ 实时主题预览: 交互式主题选择器，使用键盘方向键即可实时预览不同主题的效果，回车确认，Esc 取消。
🔄 双向同步滚动: 编辑器和预览窗口之间的双向同步滚动，方便长文档的阅读和编辑。
📊 扩展语法支持:
- Mermaid 图表: 在 Markdown 中直接编写 Mermaid 代码来生成流程图、序列图等。
- KaTeX 数学公式: 支持使用 KaTeX 语法渲染复杂的数学公式。
- 自定义容器: 支持类似 VuePress 的自定义容器语法（例如 :::tip），用于突出显示特定信息。
⚙️ 高度可定制: 支持自定义字体、字号、行高等，让你的预览更具个性。

🚀 安装

打开 VS Code。
按下 Ctrl+Shift+X (Windows, Linux) 或 Cmd+Shift+X (macOS) 打开扩展市场。
在搜索框中输入 vscode-markdown-shiki-preview。
找到本扩展（作者为 fxzer8888）并点击安装。

或者，直接访问 VS Code Marketplace 进行安装。

📖 使用方式

打开预览:
- 打开一个 Markdown 文件 (.md)。
- 点击编辑器右上角的插件预览图标 "Open Markdown Preview"。
- 或者使用命令面板 (Ctrl+Shift+P)，输入并执行 Open Markdown Preview 命令。
切换主题:
- 在预览窗口激活的状态下，使用命令面板 (Ctrl+Shift+P)。
- 输入并执行 Switch Theme 命令。
- 一个主题选择器将会出现，你可以：
  - 使用鼠标点击选择。
  - 使用上下方向键实时预览不同主题的效果。
  - 按下回车键应用当前选中的主题。
  - 按下Esc键取消切换。

🛠️ 技术栈

语言: TypeScript
框架: VS Code Extension API + reactive-vscode
语法高亮: Shiki
Markdown 解析: markdown-it
构建工具: tsdown
包管理: pnpm
代码风格: ESLint (@antfu/eslint-config)
测试: Vitest

🔧 配置选项

你可以在 VS Code 的 settings.json 文件中自定义以下配置：

配置项	类型	默认值	描述
`markdownPreview.currentTheme`	`string`	`"vitesse-dark"`	当前选择的主题名称
`markdownPreview.fontSize`	`number`	`14`	预览内容的字体大小 (px)
`markdownPreview.lineHeight`	`number`	`1.6`	预览内容的行高
`markdownPreview.syncScroll`	`boolean`	`true`	是否启用双向同步滚动
`markdownPreview.fontFamily`	`string`	`"system-ui"`	预览内容的字体族
`markdownPreview.documentWidth`	`string`	`"1000px"`	预览内容的容器宽度
`markdownPreview.enableMermaid`	`boolean`	`true`	是否启用 Mermaid 图表预览

📋 配置应用策略

本扩展完全遵循 VSCode 的配置优先级策略，确保配置在不同作用域下正确应用：

优先级从高到低：

工作区文件夹设置 - 仅对特定文件夹生效
工作区设置 - 对当前工作区生效
用户设置 - 全局用户设置
默认值 - 扩展内置默认值

配置作用域说明：

用户设置 (User Settings): 全局生效，影响所有工作区
工作区设置 (Workspace Settings): 仅对当前工作区生效
工作区文件夹设置 (Folder Settings): 仅对特定文件夹及其子文件夹生效

配置示例：

// 用户设置 (settings.json)
{
  "markdownPreview.currentTheme": "github-dark",
  "markdownPreview.fontSize": 16
}

// 工作区设置 (.vscode/settings.json)
{
  "markdownPreview.currentTheme": "vitesse-light",
  "markdownPreview.documentWidth": "1200px"
}

// 工作区文件夹设置 (.vscode/settings.json)
{
  "markdownPreview.fontFamily": "JetBrains Mono"
}

实时配置更新：

配置修改后会自动生效，无需重启 VSCode
支持配置变化监听，预览内容会实时更新
配置缓存机制确保性能优化

💻 源码与开发

本扩展的源码托管在 GitHub，欢迎贡献代码或提出建议！

源码位置: https://github.com/fxzer/vscode-markdown-shiki-preview

开发环境设置

前置要求:

Node.js (v18+)
pnpm

步骤:

# 1. 克隆仓库
git clone https://github.com/fxzer/vscode-markdown-shiki-preview.git

# 2. 进入项目目录
cd vscode-markdown-shiki-preview

# 3. 安装依赖
pnpm install

开发命令

# 以开发模式构建（带文件监听和 sourcemap）
pnpm run dev

# 完整构建
pnpm run build

# 运行 ESLint 代码检查
pnpm run lint

# 运行 Vitest 测试
pnpm run test

调试扩展

在 VS Code 中打开项目。
按下 F5 键或通过 Run > Start Debugging 启动一个 "扩展开发宿主" 新窗口。
在这个新窗口中，此扩展就已经被加载了。你可以打开一个 Markdown 文件来测试和调试功能。

📄 许可证

本项目基于 MIT 许可证。

VSCode Markdown Shiki Preview

fxzer8888