[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"menus-public":3,"blog-10048":83,"blog-10048-comments":92},[4,15,43,66],{"id":5,"title":6,"link":7,"icon":8,"target":9,"sort_order":10,"is_active":11,"parent_id":12,"created_at":13,"children":14},10001,"首页","\u002F","","_blank",0,true,null,"2026-04-04T12:03:45",[],{"id":16,"title":17,"link":18,"icon":8,"target":19,"sort_order":20,"is_active":11,"parent_id":12,"created_at":21,"children":22},10038,"墨言博客","\u002Fblog","_self",1,"2026-10-30T23:08:14",[23,29,36],{"id":24,"title":25,"link":26,"icon":8,"target":19,"sort_order":20,"is_active":11,"parent_id":16,"created_at":27,"children":28},10039,"技术前沿","\u002Fblog?category=10001","2026-10-30T23:10:46",[],{"id":30,"title":31,"link":32,"icon":8,"target":19,"sort_order":33,"is_active":11,"parent_id":16,"created_at":34,"children":35},10042,"生活随笔","\u002Fblog?category=20007",2,"2026-10-30T23:55:19",[],{"id":37,"title":38,"link":39,"icon":8,"target":19,"sort_order":40,"is_active":11,"parent_id":16,"created_at":41,"children":42},10043,"旅游日记","\u002Fblog?category=20006",3,"2026-10-31T00:00:11",[],{"id":33,"title":44,"link":45,"icon":8,"target":19,"sort_order":33,"is_active":11,"parent_id":12,"created_at":46,"children":47},"新闻中心","\u002Fnews","2026-10-24T19:09:40",[48,54,60],{"id":49,"title":50,"link":51,"icon":8,"target":19,"sort_order":20,"is_active":11,"parent_id":33,"created_at":52,"children":53},10046,"产品动态","\u002Fnews?category=20010","2026-10-31T00:17:38",[],{"id":55,"title":56,"link":57,"icon":8,"target":19,"sort_order":33,"is_active":11,"parent_id":33,"created_at":58,"children":59},10047,"新闻热点","\u002Fnews?category=20009","2026-10-31T00:17:55",[],{"id":61,"title":62,"link":63,"icon":8,"target":19,"sort_order":40,"is_active":11,"parent_id":33,"created_at":64,"children":65},10045,"公司动态","\u002Fnews?category=20008","2026-10-31T00:17:11",[],{"id":67,"title":68,"link":69,"icon":8,"target":19,"sort_order":67,"is_active":11,"parent_id":12,"created_at":46,"children":70},4,"精彩视频","\u002Fvideo",[71,77],{"id":72,"title":73,"link":74,"icon":8,"target":19,"sort_order":10,"is_active":11,"parent_id":67,"created_at":75,"children":76},13,"活动记录","\u002Fvideo?category=6","2026-10-25T21:04:39",[],{"id":78,"title":79,"link":80,"icon":8,"target":19,"sort_order":20,"is_active":11,"parent_id":67,"created_at":81,"children":82},11,"产品展示","\u002Fvideo?category=5","2026-10-25T21:02:59",[],{"id":84,"category_id":5,"title":85,"author":8,"summary":86,"cover":87,"content":88,"tags":8,"seo_title":8,"seo_description":8,"seo_keywords":8,"og_image":8,"views":89,"comment_count":10,"is_top":90,"is_published":11,"created_at":91},10048,"在vscode中安装及配置markdown插件","安装及配置markdown插件","\u002Fstatic\u002Fuploads\u002Fblogs\u002F1792477022535-336041452.jpg","在 VS Code 中配置 Markdown，其实是一个从**基础编辑**到**专业写作**的渐进过程，核心思路是：先用好内置功能，再通过安装插件来补齐预览、导出、格式检查等能力。\n### 📝 第一步：启用 VS Code 内置功能（零配置）\n\nVS Code 本身就支持 Markdown 的基础编辑和预览，无需安装任何插件。\n\n- **实时预览**：打开或新建一个 `.md` 文件，按下 `Ctrl+Shift+V`（macOS: `Cmd+Shift+V`），就会在侧边打开预览窗口，编辑时内容会实时同步。\n- **分栏预览**：如果想保持编辑器和预览左右并排，可以使用快捷键 `Ctrl+K` 然后按 `V`。\n\n不过，内置预览的功能比较简单，不支持流程图、数学公式，也无法直接导出为 PDF 等格式。\n\n### 🚀 第二步：安装核心插件，解锁专业能力\n\n要实现更强大的功能，就需要安装以下几个广受推荐的插件。你可以在 VS Code 左侧的扩展面板（`Ctrl+Shift+X`）中搜索并安装它们。\n\n#### 1. Markdown All in One（编辑增强必备）\n这是一个**编辑增强神器**，几乎是所有 Markdown 用户的必装插件。\n- **自动目录**：在文档中输入 `[TOC]` 或通过命令面板（`Ctrl+Shift+P`）执行 `Create Table of Contents`，即可自动生成并更新目录。\n- **快捷键**：支持 `Ctrl+B` 加粗、`Ctrl+I` 斜体等常用格式化快捷键，并自动续写列表编号。\n- **数学公式**：配合预览插件，可以很好地支持 LaTeX 数学公式。\n\n#### 2. Markdown Preview Enhanced（预览与导出核心）\n这是功能最强大的预览与导出插件，能替代 VS Code 的默认预览。\n- **增强渲染**：原生支持 **Mermaid 流程图**、**PlantUML**、**数学公式**、时序图等复杂内容的渲染。\n- **强大的导出功能**：在预览界面右键选择 `Export`，即可将文档导出为 **PDF、HTML、PNG** 等多种格式。\n- **使用方式**：在 `.md` 文件中右键，选择 `Markdown Preview Enhanced: Open Preview to the Side`，即可打开功能更丰富的预览窗口。\n\n#### 3. markdownlint（格式规范检查）\n如果你希望文档格式保持整洁、统一，这个插件可以充当 Markdown 的“代码检查器”。它会提示你标题层级是否混乱、列表缩进是否正确、空格使用是否规范等问题。\n\n#### 4. Paste Image（图片粘贴神器）\n写技术文档时经常需要截图。安装后，你可以直接将剪贴板中的图片粘贴到 Markdown 文件中，它会**自动将图片保存到指定目录，并生成对应的 Markdown 图片链接**，省去手动保存和引用的麻烦。\n\n### ⚙️ 第三步：关键配置与进阶用法\n\n#### 配置导出 PDF 的中文排版与样式\n使用 **Markdown PDF** 插件（或 MPE 插件）导出 PDF 时，默认的中文字体排版可能不够理想。你可以通过自定义 CSS 来优化。\n\n1.  **创建 CSS 文件**：在你的项目根目录创建一个文件，例如 `markdown-style.css`，并加入中文字体优化代码：\n    ```css\n    body {\n      font-family: \"Source Han Sans SC\", \"Microsoft YaHei\", sans-serif; \u002F* 优先使用思源黑体或微软雅黑 *\u002F\n      line-height: 1.8;\n      font-size: 16px;\n    }\n    h1, h2, h3, h4, h5, h6 {\n      font-family: \"Source Han Sans SC\", \"Microsoft YaHei\", sans-serif;\n      line-height: 1.5;\n    }\n    ```\n    \n\n2.  **在 VS Code 中指定样式**：打开 VS Code 设置（`Ctrl+,`），搜索 `markdown-pdf.styles`，添加你刚才创建的 CSS 文件路径。如果使用相对路径，格式为 `\".\u002Fmarkdown-style.css\"`。\n\n#### 配置导出 PDF 的页面参数\n在设置（`settings.json`）中，你还可以调整更多 PDF 导出选项，例如：\n```json\n{\n  \"markdown-pdf.styles\": [\".\u002Fmarkdown-style.css\"],\n  \"markdown-pdf.format\": \"A4\",\n  \"markdown-pdf.margin.top\": \"25mm\",\n  \"markdown-pdf.margin.bottom\": \"25mm\",\n  \"markdown-pdf.convertOnSave\": false\n}\n```\n你可以根据需要开启 `convertOnSave`（保存时自动转换），或调整页边距等参数。\n\n#### 关于 PDF 导出的额外依赖\n- **通过 Chrome 导出（推荐）**：在 MPE 插件中导出 PDF 时，选择通过 Chrome (Puppeteer) 导出，通常效果最接近预览。这需要你的系统已安装 Chrome 浏览器。\n- **通过 Pandoc 导出**：如果你需要更复杂的格式转换（例如导出 Word），可能需要额外安装 **Pandoc** 软件，并在 MPE 的导出选项中选择 Pandoc。\n- **Princexml**：部分教程会提到使用 Princexml 作为导出引擎，但它并非必需，且配置相对繁琐，建议优先使用 Chrome 方式。\n\n### 💎 总结\n\n总的来说，一个高效的 VS Code Markdown 工作流可以这样搭建：\n\n1.  **轻量编辑**：直接使用 VS Code 内置的预览功能（`Ctrl+Shift+V`）。\n2.  **日常写作**：安装 **Markdown All in One**，获得目录生成、快捷键等便利。\n3.  **专业输出**：安装 **Markdown Preview Enhanced** 来处理图表渲染和导出 PDF\u002FHTML。同时可搭配 **markdownlint** 保持格式规范，用 **Paste Image** 简化图片处理。\n4.  **精细控制**：如果需要，通过自定义 CSS 和 `settings.json` 来优化导出文档的中文排版和页面样式。",39,false,"2026-10-20T14:39:49",{"list":93,"total":10,"page":20,"size":94},[],30]