https://my-blog-p39q.vercel.app/tags/markdown/ Recent content in Markdown on huluhuluu Hugo -- gohugo.io zh Thu, 14 May 2026 22:20:00 +0800 https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/ Thu, 14 May 2026 18:20:00 +0800 https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/ <h1 id="vscode-预览插件">VSCode 预览插件 </h1><p>这里整理几个在 VSCode 里比较常用的预览相关插件。</p> <ul> <li><code>Live Preview</code>: 在浏览器里实时预览 Markdown 和 HTML</li> <li><code>Markdown Preview Enhanced</code>: 增强 Markdown 预览，支持公式、Mermaid等</li> <li><code>Markdown All in One</code>: 增强 Markdown 编辑体验，支持列表、目录、快捷键等</li> </ul> <h2 id="1-live-preview">1. Live Preview </h2><p><a class="link" href="https://github.com/microsoft/vscode-livepreview" target="_blank" rel="noopener" >Live Preview</a> 适合在 VSCode 里快速起一个预览服务，通过<code>ctrl+shift+p</code>打开<code>Vscode</code>命令面板，输入<code>Live Preview: Start Server</code>进行启动 <img alt="VSCode 命令面板里启动 Live Preview 服务" class="gallery-image" data-flex-basis="1026px" data-flex-grow="427" height="243" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/live-preview-start-server.png" srcset="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/live-preview-start-server_hu_ae4a9766478231f4.png 800w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/live-preview-start-server.png 1039w" width="1039"> 随后可以直接打开服务器上部署的网页地址，例如 <img alt="浏览器里查看 Live Preview 页面效果" class="gallery-image" data-flex-basis="1199px" data-flex-grow="499" height="572" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/live-preview-browser-view.png" srcset="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/live-preview-browser-view_hu_5dddb82c2787797f.png 800w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/live-preview-browser-view_hu_95ad323c10ca4365.png 1600w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/live-preview-browser-view_hu_704a2ab8f6c62ae6.png 2400w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/live-preview-browser-view.png 2859w" width="2859"> </p> <h2 id="2-markdown-相关插件">2. Markdown 相关插件 </h2><p>直接在<code>Vscode</code> 插件商店里搜索<code>markdown</code>安装 <img alt="VSCode 插件商店里搜索 Markdown 相关插件" class="gallery-image" data-flex-basis="391px" data-flex-grow="163" height="572" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-extension-search.png" srcset="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-extension-search_hu_206473a415d9b191.png 800w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-extension-search.png 934w" width="934"> </p> <ul> <li><a class="link" href="https://github.com/shd101wyy/markdown-preview-enhanced" target="_blank" rel="noopener" >Markdown Preview Enhanced</a> 加强 Markdown 预览，点击<code>markdown</code>文件的右上角可以预览，在预览界面可以刷新/显示标题大纲。 <img alt="Markdown Preview Enhanced 的预览界面" class="gallery-image" data-flex-basis="764px" data-flex-grow="318" height="914" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-preview-enhanced-view.png" srcset="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-preview-enhanced-view_hu_3c2c1ac402f8068e.png 800w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-preview-enhanced-view_hu_aa14e8342655ca94.png 1600w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-preview-enhanced-view_hu_6a766e756809a44d.png 2400w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-preview-enhanced-view.png 2912w" width="2912"> </li> <li><a class="link" href="https://github.com/yzhang-gh/vscode-markdown" target="_blank" rel="noopener" >Markdown All in One</a> 有更强的“编辑体验”， 通过<code>ctrl + shift + p</code>调出Vscode控制面板, 搜索<code>Markdown All in One</code> 可以看到它提供的功能列表，比较实用的有：创建目录等，并且提供了快捷键：加粗、斜体、等功能的快捷键。 <img alt="Markdown All in One 提供的命令列表" class="gallery-image" data-flex-basis="281px" data-flex-grow="117" height="866" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-all-in-one-commands.png" srcset="https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-all-in-one-commands_hu_e41179ab1f73866a.png 800w, https://my-blog-p39q.vercel.app/p/vscode-markdown-preview/png/markdown-all-in-one-commands.png 1016w" width="1016"> </li> </ul> <h2 id="参考链接">参考链接 </h2><ul> <li><a class="link" href="https://github.com/microsoft/vscode-livepreview" target="_blank" rel="noopener" >Live Preview GitHub</a></li> <li><a class="link" href="https://github.com/shd101wyy/markdown-preview-enhanced" target="_blank" rel="noopener" >Markdown Preview Enhanced</a></li> <li><a class="link" href="https://github.com/yzhang-gh/vscode-markdown" target="_blank" rel="noopener" >Markdown All in One</a></li> </ul>