{"id":44335916,"url":"https://github.com/fxzer/vscode-shiki-markdown-preview","last_synced_at":"2026-02-11T11:19:11.188Z","repository":{"id":315610656,"uuid":"1056862418","full_name":"fxzer/vscode-shiki-markdown-preview","owner":"fxzer","description":"一个功能强大的 VS Code 扩展，提供基于 Shiki 的 Markdown 预览功能，支持 60+ 种语法高亮主题","archived":false,"fork":false,"pushed_at":"2026-02-06T16:51:12.000Z","size":9929,"stargazers_count":6,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-07T00:46:12.300Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fxzer.png","metadata":{"files":{"readme":"README-ZH.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-15T00:14:11.000Z","updated_at":"2026-02-06T16:51:16.000Z","dependencies_parsed_at":"2025-09-21T17:35:52.229Z","dependency_job_id":null,"html_url":"https://github.com/fxzer/vscode-shiki-markdown-preview","commit_stats":null,"previous_names":["fxzer/shiki-markdown-preview","fxzer/vscode-shiki-markdown-preview"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/fxzer/vscode-shiki-markdown-preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fvscode-shiki-markdown-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fvscode-shiki-markdown-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fvscode-shiki-markdown-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fvscode-shiki-markdown-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fxzer","download_url":"https://codeload.github.com/fxzer/vscode-shiki-markdown-preview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fvscode-shiki-markdown-preview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29332377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T06:13:03.264Z","status":"ssl_error","status_checked_at":"2026-02-11T06:12:55.843Z","response_time":97,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-11T11:19:07.512Z","updated_at":"2026-02-11T11:19:11.181Z","avatar_url":"https://github.com/fxzer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shiki Markdown Preview\n\n[![VS Code Marketplace](https://img.shields.io/badge/VS%20Code-Marketplace-blue?logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=fxzer8888.shiki-markdown-preview)\n[![Version](https://img.shields.io/badge/version-1.1.4-green)](https://marketplace.visualstudio.com/items?itemName=fxzer8888.shiki-markdown-preview)\n[![Downloads](https://img.shields.io/badge/downloads-0+-orange)](https://marketplace.visualstudio.com/items?itemName=fxzer8888.shiki-markdown-preview)\n\n[English Documentation](README.md) | [中文文档](README-ZH.md)\n\n一个功能强大的 VS Code 扩展，提供基于 Shiki 的 Markdown 预览功能，支持 60+ 种语法高亮主题。\n\n## ✨ 功能特性\n\n- 🎨 **丰富的主题选择**: 支持 [60+ 种 Shiki 主题](https://shiki.style/themes)，包括浅色和深色主题\n- ⌨️ **交互式主题选择器**: 使用键盘方向键实时预览不同主题效果\n- 📝 **代码语法高亮**: 集成 [Shiki 全部编程语言](https://shiki.style/languages)的语法高亮，支持代码复制\n- 🔗 **双向同步滚动**: 编辑器与预览区实时滚动同步\n- 📱 **响应式设计**: 适配不同屏幕尺寸的自适应布局\n- 🎯 **目录自动生成**: 自动生成 Notion 风格的目录\n- 🖼️ **图片懒加载**: 优化的图片加载，提升性能\n- 📊 **Mermaid 支持**: 支持 Mermaid 图表渲染\n- 🧮 **数学公式**: 基于 KaTeX 的数学公式渲染\n\n## 📸 截图\n\n\u003cdiv align=\"center\"\u003e\n\n![](examples/example1.png)\n\n![](examples/example2.png)\n\n![](examples/example3.png)\n\n![](examples/example4.png)\n\n![](examples/example5.png)\n\n\u003c/div\u003e\n\n## 🚀 快速开始\n\n### 版本支持\n\n`vscode \u003e= 1.100.0`\n\n### 安装\n\n1. 打开 VS Code\n2. 进入扩展页面 (Ctrl+Shift+X / Cmd+Shift+X)\n3. 搜索 \"Shiki Markdown Preview\"\n4. 点击安装\n\n### 使用方法\n\n#### 方法一：命令面板\n\n1. 打开一个 Markdown 文件\n2. 按 `Ctrl+Shift+P` (Mac 用户按 `Cmd+Shift+P`)\n3. 输入 \"Shiki Markdown Preview\"\n4. 选择 \"Open Markdown Preview Slide\" 或 \"Open Markdown Preview Full\"\n\n#### 方法二：快捷键\n\n- **侧边预览**: `Ctrl+Shift+V` (Windows/Linux) 或 `Cmd+Shift+V` (Mac)\n- **全屏预览**: `Ctrl+K V` (Windows/Linux) 或 `Cmd+K V` (Mac)\n- **主题选择**: `Ctrl+Shift+T` (Windows/Linux) 或 `Cmd+Shift+T` (Mac)\n\n## 🎨 主题选择\n\n扩展支持 60+ 种精美主题。您可以通过以下方式切换主题：\n\n### 交互式主题选择器\n\n1. 使用 `Ctrl+Shift+T` (Mac 用户按 `Cmd+Shift+T`) 打开主题选择器\n2. 使用方向键浏览不同主题\n3. 按 Enter 键选择主题\n\n## ⚙️ 配置\n\n### 设置\n\n您可以通过 VS Code 设置自定义扩展行为：\n\n```json\n{\n  \"shikiMarkdownPreview.currentTheme\": \"vitesse-dark\",\n  \"shikiMarkdownPreview.documentWidth\": \"800px\",\n  \"shikiMarkdownPreview.fontFamily\": \"inherit\",\n  \"shikiMarkdownPreview.enableScrollSync\": true\n}\n```\n\n#### 配置选项\n\n| 设置项                                    | 类型    | 默认值           | 描述                      |\n| ----------------------------------------- | ------- | ---------------- | ------------------------- |\n| `shikiMarkdownPreview.currentTheme`       | string  | `\"vitesse-dark\"` | Markdown 预览的当前主题   |\n| `shikiMarkdownPreview.documentWidth`      | string  | `\"800px\"`        | 文档宽度（支持 CSS 单位） |\n| `shikiMarkdownPreview.fontFamily`         | string  | `\"inherit\"`      | 预览字体设置              |\n| `shikiMarkdownPreview.enableScrollSync  ` | boolean | `true`           | 是否开启同步滚动设置      |\n\n## 🛠️ 开发\n\n### 前置要求\n\n- Node.js 18+\n- VS Code 1.100.0+\n- TypeScript 5.9.2+\n\n### 构建\n\n```bash\nnpm install\nnpm run compile\n```\n\n### 脚本命令\n\n- `npm run compile` - 编译 TypeScript\n- `npm run watch` - 开发模式监听\n- `npm run lint` - 运行 ESLint\n- `npm run lint:fix` - 修复 ESLint 问题\n- `npm run ext:package` - 打包扩展\n\n### 项目结构\n\n```\nsrc/\n├── index.ts                 # 主扩展入口点\n├── services/                # 核心服务\n│   ├── config/             # 配置管理\n│   ├── renderer/           # Markdown 渲染\n│   ├── scroll-sync/        # 滚动同步\n│   ├── state/             # 状态管理\n│   └── theme/              # 主题管理\n├── types/                  # TypeScript 类型定义\n├── utils/                  # 工具函数\n└── webview/                # Webview 组件\n```\n\n### 如何贡献\n\n1. Fork 仓库\n2. 创建功能分支\n3. 进行您的修改\n4. 如适用，添加测试\n5. 提交 Pull Request\n\n## 📝 许可证\n\n本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。\n\n## 🙏 致谢\n\n- [Shiki](https://github.com/shikijs/shiki) - 美观的语法高亮器\n- [VS Code](https://code.visualstudio.com/) - 出色的编辑器\n- [Markdown-it](https://github.com/markdown-it/markdown-it) - Markdown 解析器\n- 所有主题作者和贡献者\n\n## 📞 支持\n\n- 🐛 [报告问题](https://github.com/fxzer/shiki-markdown-preview/issues)\n- 💡 [功能请求](https://github.com/fxzer/shiki-markdown-preview/issues)\n- 📖 [文档](https://github.com/fxzer/shiki-markdown-preview/wiki)\n\n---\n\n**为 VS Code 社区用心制作 ❤️**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxzer%2Fvscode-shiki-markdown-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffxzer%2Fvscode-shiki-markdown-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxzer%2Fvscode-shiki-markdown-preview/lists"}