【Markdown-07】编辑器与插件推荐

码路工人
302 阅读12分钟

第 7 章：编辑器与插件推荐

qrcode_for_gh_e1903e0c25a7_1280.jpg

工欲善其事，必先利其器。选择合适的 Markdown 编辑器，能让你的写作效率事半功倍。

在前面的章节中，我们已经掌握了 Markdown 的核心语法和进阶技巧。现在是时候为自己选择一款趁手的编辑器了。本章将全面对比和推荐市面上最主流的 Markdown 编辑器，从专业开发工具到在线协作平台，帮助不同需求的用户找到最适合的写作工具。

7.1 VS Code: 程序员的瑞士军刀

Visual Studio Code（简称 VS Code）是微软开发的免费开源代码编辑器，虽然主要面向程序员，但凭借其强大的扩展能力和丰富的插件生态，已经成为许多技术写作者的首选 Markdown 编辑器。

7.1.1 必备插件：Markdown All in One, Prettier, Markdown Preview Enhanced

Markdown All in One

这是 VS Code 中最受欢迎的 Markdown 插件，提供了全面的 Markdown 支持：

主要功能：

  • 快捷键支持：Ctrl+B 加粗，Ctrl+I 斜体
  • 自动生成目录：Ctrl+Shift+P 输入 "TOC" 即可插入目录
  • 实时预览：Ctrl+Shift+V 打开预览窗口
  • 表格格式化：自动对齐表格列
  • 数学公式支持：支持 KaTeX 数学公式渲染

安装方法：

  1. 打开 VS Code
  2. 按 Ctrl+Shift+X 打开扩展面板
  3. 搜索 "Markdown All in One"
  4. 点击安装

实用技巧：

<!-- 使用快捷键 Ctrl+Shift+P，输入 "TOC" 自动生成目录 -->
- [第 1 章：初识 Markdown](#第-1-章初识-markdown)
- [第 2 章：文本格式化](#第-2-章文本格式化)
- [第 3 章：链接与图片](#第-3-章链接与图片)
Prettier

Prettier 是一个代码格式化工具，支持 Markdown 文档的自动格式化：

主要功能：

  • 自动格式化：统一代码风格，保持文档整洁
  • 保存时格式化：每次保存文件时自动格式化
  • 团队协作：确保团队成员使用统一的格式规范

配置示例：

// .prettierrc 配置文件
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "proseWrap": "preserve"
}
Markdown Preview Enhanced

这个插件提供了更强大的预览功能：

主要功能：

  • 增强预览：支持 Mermaid 图表、数学公式、代码运行
  • 导出功能：可导出为 PDF、HTML、PNG 等格式
  • 自定义样式：支持自定义 CSS 样式
  • 幻灯片模式：将 Markdown 转换为演示文稿

image.png

7.1.2 配置与优化：打造专业的 Markdown 写作环境

基础配置

在 VS Code 的设置中（Ctrl+,），添加以下配置：

{
  // Markdown 相关设置
  "markdown.preview.fontSize": 14,
  "markdown.preview.lineHeight": 1.6,
  "markdown.extension.toc.levels": "1..3",
  
  // 编辑器设置
  "editor.wordWrap": "on",
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  
  // 文件关联
  "files.associations": {
    "*.md": "markdown"
  },
  
  // 自动保存
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}
工作区配置

为 Markdown 项目创建专门的工作区配置：

// .vscode/settings.json
{
  "markdown.extension.toc.updateOnSave": true,
  "markdown.extension.print.absoluteImgPath": false,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

VS Code 优势总结：

  • ✅ 完全免费，开源
  • ✅ 强大的插件生态
  • ✅ 优秀的 Git 集成
  • ✅ 支持多种文件格式
  • ✅ 高度可定制

适用人群：

  • 程序员和技术写作者
  • 需要版本控制的用户
  • 喜欢自定义和折腾的用户

7.2 语雀：现代化的在线文档协作平台

语雀是阿里巴巴推出的专业文档与知识库工具，支持 Markdown 语法，提供了从个人笔记到团队协作的完整解决方案。

7.2.1 多端同步：桌面端、Web端、移动端无缝切换

语雀最大的优势之一就是真正的多端同步体验：

桌面端应用
  • 原生体验：提供 Windows、macOS、Linux 桌面客户端
  • 离线编辑：支持离线编辑，联网后自动同步
  • 快捷操作：支持全局快捷键，随时唤起编辑器
Web 端
  • 无需安装：通过浏览器即可使用全部功能
  • 实时协作：多人同时编辑，实时看到他人修改
  • 丰富模板：提供各种文档模板，快速开始写作
移动端
  • 随时记录：支持 iOS 和 Android 应用
  • 语音输入：支持语音转文字功能
  • 图片上传：拍照即可插入文档

同步示例：

# 我的学习笔记

## 今日学习内容
- [x] 完成 Markdown 语法学习
- [ ] 整理 VS Code 插件清单
- [ ] 写作第一篇技术博客

> 在手机上记录的想法，回到电脑前立即可见！

7.2.2 语雀浏览器插件：随时随地收集和整理内容

语雀浏览器插件是一个强大的内容收集工具，让你在浏览网页时随时保存有价值的信息。

yuque_chrome_extension.png

主要功能

一键收藏

  • 保存整个网页或选中内容
  • 自动提取标题和摘要
  • 支持添加个人标签和备注

快速笔记

  • 在任何网页上快速记录想法
  • 支持 Markdown 语法
  • 自动关联当前网页链接

智能分类

  • 自动识别内容类型
  • 推荐合适的知识库
  • 支持自定义分类规则
使用场景
<!-- 收藏技术文章 -->
# React Hooks 最佳实践

**来源：** https://example.com/react-hooks-best-practices
**收藏时间：** 2024-01-15 14:30
**标签：** #React #前端开发 #最佳实践

## 核心要点
1. 使用 useCallback 优化性能
2. 自定义 Hook 的设计原则
3. 避免常见的 Hook 陷阱

> 💡 个人思考：这篇文章的第三点特别有用，解决了我之前遇到的问题。

7.2.3 团队协作与知识库管理

语雀在团队协作方面表现出色，提供了完整的知识管理解决方案。

团队空间
  • 权限管理：精细的成员权限控制
  • 协作编辑：多人实时协作，冲突自动合并
  • 评论讨论：支持文档内评论和讨论
  • 版本历史：完整的修改历史记录
知识库组织
📚 技术团队知识库
├── 📁 开发规范
│   ├── 📄 代码规范指南
│   ├── 📄 Git 工作流程
│   └── 📄 Code Review 清单
├── 📁 项目文档
│   ├── 📄 需求分析文档
│   ├── 📄 技术方案设计
│   └── 📄 API 接口文档
└── 📁 学习资料
    ├── 📄 技术分享记录
    ├── 📄 外部培训资料
    └── 📄 最佳实践总结
定价方案

yuque_pricing.png

语雀提供了灵活的定价方案：

  • 免费版：适合个人用户，每月可创建 100 篇文档
  • 专业版：¥99/年，无限制创建和更多高级功能
  • 超级会员：¥299/年，企业级功能和技术支持

语雀优势总结：

  • ✅ 真正的多端同步
  • ✅ 强大的浏览器插件
  • ✅ 优秀的团队协作功能
  • ✅ 丰富的模板和样式
  • ✅ 稳定的云端存储

适用人群：

  • 需要多端同步的用户
  • 团队协作和知识管理
  • 重视内容收集和整理的用户

7.3 Typora: 所见即所得的极致体验

Typora 是一款"所见即所得"的 Markdown 编辑器，它将编辑和预览完美融合，提供了最接近传统文字处理软件的使用体验。

7.3.1 实时预览与主题定制

实时预览特性

Typora 最大的特色是实时预览，你在编辑时看到的就是最终的渲染效果：

# 这是一级标题
## 这是二级标题

**粗体文字** 和 *斜体文字* 会立即显示效果

- 列表项目 1
- 列表项目 2
  - 嵌套列表

> 引用块也会立即渲染

在 Typora 中，上述 Markdown 代码会立即显示为格式化的文本，而不是原始的标记符号。

主题系统

Typora 提供了丰富的主题选择：

内置主题：

  • GitHub：模仿 GitHub 的渲染样式
  • Academic：适合学术写作的简洁风格
  • Newsprint：报纸风格，适合长文阅读
  • Night：深色主题，保护眼睛
  • Pixyll：现代简约风格

自定义主题：

/* 自定义主题示例 */
.md-editor {
  font-family: "Source Han Sans", "PingFang SC", sans-serif;
  line-height: 1.8;
}

h1, h2, h3 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
}

blockquote {
  border-left: 4px solid #3498db;
  background-color: #f8f9fa;
}

7.3.2 导出功能与格式转换

Typora 提供了强大的导出功能，支持多种格式：

支持的导出格式
  • PDF：保持完美的排版效果
  • HTML：可用于网页发布
  • Word (.docx)：与 Microsoft Word 兼容
  • OpenOffice (.odt)：开源办公套件格式
  • RTF：富文本格式
  • EPUB：电子书格式
  • LaTeX：学术论文格式
导出配置示例

PDF 导出设置：

# 在 Typora 中配置 PDF 导出
margin:
  top: 2cm
  bottom: 2cm
  left: 2cm
  right: 2cm

header-includes:
  - \usepackage{xeCJK}
  - \setCJKmainfont{Source Han Sans}

footer: "页码: {page}"
header: "文档标题: {title}"
批量处理

Typora 还支持命令行批量转换：

# 批量将 Markdown 文件转换为 PDF
typora --export-pdf *.md

# 转换为 HTML
typora --export-html *.md

收费说明： Typora 从 1.0 版本开始采用付费模式，价格为 $14.99（约 ¥89），支持 3 台设备使用。虽然需要付费，但其优秀的用户体验让很多用户认为物有所值。

Typora 优势总结：

  • ✅ 真正的所见即所得
  • ✅ 优雅的用户界面
  • ✅ 强大的导出功能
  • ✅ 丰富的主题选择
  • ✅ 专注的写作体验

适用人群：

  • 追求极致写作体验的用户
  • 需要频繁导出不同格式的用户
  • 不喜欢分屏预览的用户

7.4 Obsidian: 双链笔记与知识图谱

Obsidian 是一款基于本地文件的知识管理工具，它将 Markdown 文件组织成一个相互连接的知识网络，特别适合构建个人知识库。

7.4.1 双向链接与反向链接

双向链接概念

双向链接是 Obsidian 的核心功能，它允许你在文档之间建立连接关系：

# JavaScript 学习笔记

## 基础概念
[[变量声明]] 是编程的基础，需要理解 [[作用域]] 的概念。

## 进阶内容
学习 [[闭包]] 之前，建议先掌握 [[函数]] 的基本用法。

## 相关技术
- [[TypeScript]] - JavaScript 的超集
- [[Node.js]] - 服务端 JavaScript
- [[React]] - 前端框架
反向链接

当你在文档 A 中链接到文档 B 时，Obsidian 会自动在文档 B 中显示来自文档 A 的反向链接：

# 变量声明

## 基本语法
JavaScript 中有三种声明变量的方式：
- `var` - 函数作用域
- `let` - 块级作用域  
- `const` - 常量声明

---
## 反向链接
- [[JavaScript 学习笔记]]
- [[作用域详解]]
- [[ES6 新特性]]
知识图谱

Obsidian 会根据文档间的链接关系生成可视化的知识图谱：

graph TD
    A[JavaScript 学习笔记] --> B[变量声明]
    A --> C[作用域]
    A --> D[函数]
    B --> C
    D --> E[闭包]
    C --> E
    A --> F[TypeScript]
    A --> G[React]
    F --> A

7.4.2 插件生态与个性化定制

核心插件

Obsidian 提供了丰富的核心插件：

文件管理类：

  • File Explorer：文件浏览器
  • Search：全文搜索
  • Quick Switcher：快速切换文件
  • Graph View：图谱视图

编辑增强类：

  • Markdown Format Importer：格式导入器
  • Word Count：字数统计
  • Outline：大纲视图
  • Tag Pane：标签面板
社区插件

热门社区插件：

  1. Calendar：日历视图，适合日记写作
# 2024-01-15 日记

## 今日完成
- [x] 学习 Obsidian 双链功能
- [x] 整理 [[Markdown 语法]] 笔记
- [ ] 写作技术博客

## 明日计划
- [ ] 研究 [[知识图谱]] 应用
- [ ] 完善 [[个人知识库]] 结构
  1. Templater：模板系统
# 读书笔记模板

**书名：** {{title}}
**作者：** {{author}}
**阅读日期：** {{date}}
**评分：** ⭐⭐⭐⭐⭐

## 核心观点
- 

## 个人思考
- 

## 相关链接
- [[读书清单]]
- [[个人成长]]
  1. Dataview：数据查询
# 技术学习进度

```dataview
TABLE status, priority, due
FROM #学习计划
WHERE status != "完成"
SORT due ASC
自定义 CSS

Obsidian 支持自定义 CSS 样式：

/* 自定义链接样式 */
.internal-link {
  color: #3498db;
  text-decoration: none;
  border-bottom: 1px dotted #3498db;
}

.internal-link:hover {
  background-color: #ecf0f1;
  border-bottom: 1px solid #3498db;
}

/* 自定义标签样式 */
.tag {
  background-color: #e74c3c;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8em;
}

Obsidian 优势总结：

  • ✅ 强大的双向链接系统
  • ✅ 本地文件存储，数据安全
  • ✅ 丰富的插件生态
  • ✅ 可视化知识图谱
  • ✅ 高度可定制

适用人群：

  • 知识工作者和研究人员
  • 喜欢构建知识网络的用户
  • 重视数据隐私的用户

7.5 其他优秀选择：Notable、Mark Text, Zettlr, MarkdownPad

除了上述主流编辑器，还有一些优秀的 Markdown 编辑器值得关注：

Notable

特点：

  • 基于文件系统的笔记管理
  • 支持标签和文件夹双重组织
  • 内置 Markdown 编辑器和预览
  • 跨平台桌面应用（Windows、macOS、Linux）

核心优势：

1. 文件系统友好

Notable 直接使用你的文件系统存储笔记，不会锁定你的数据： 0

# 文件结构示例
Notes/
├── Projects/
│   ├── markdown-guide.md
│   └── website-redesign.md
├── Learning/
│   ├── javascript-notes.md
│   └── design-patterns.md
└── Daily/
    ├── 2024-01-15.md
    └── meeting-notes.md

2. 强大的标签系统

# 项目笔记

标签：#项目管理 #前端开发 #React

## 项目进度
- [x] 需求分析
- [ ] 原型设计
- [ ] 开发实现

## 技术栈
- React 18
- TypeScript
- Tailwind CSS

3. 多种视图模式

  • 编辑器模式：专注写作的纯文本编辑
  • 预览模式：查看渲染后的 Markdown 效果
  • 分屏模式：同时编辑和预览

4. 高级搜索功能

<!-- 支持多种搜索方式 -->
全文搜索：在所有笔记中查找关键词
标签搜索：#标签名 快速筛选
文件名搜索：按文件名快速定位
正则搜索：支持复杂的模式匹配

未来发展：

Notable 正在开发 Web 版本和移动端应用： 0

  • Web 版：将提供云同步和端到端加密功能（需订阅）
  • 移动端：iOS 和 Android 应用开发中（需订阅）
  • 桌面版：将继续免费提供，云功能为可选项

适用场景：

✅ **适合 Notable：**
- 重视数据控制权和隐私
- 喜欢基于文件系统的组织方式
- 需要强大的标签和搜索功能
- 主要在桌面端工作
- 希望与其他工具集成

📝 **典型用户：**
- 研究人员和学者
- 技术写作者
- 项目经理
- 知识工作者

Notable 优势总结：

  • ✅ 数据完全掌控，基于文件系统
  • ✅ 强大的标签和搜索功能
  • ✅ 简洁直观的用户界面
  • ✅ 跨平台桌面支持
  • ✅ 不锁定数据格式

Mark Text

特点：

  • 免费开源
  • 实时预览（类似 Typora）
  • 支持数学公式和图表
  • 跨平台支持

适用场景：

# 数学公式示例

行内公式：$E = mc^2$

块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

# Mermaid 图表
```mermaid
flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> D
```

Zettlr

特点：

  • 学术写作导向
  • 支持引用管理
  • 内置文献数据库
  • 支持 LaTeX 导出

学术写作示例：

# 研究论文标题

## 摘要
本研究探讨了... [@smith2023research; @jones2022analysis]

## 引言
根据 Smith (2023) 的研究[@smith2023research]，我们发现...

## 参考文献
[@smith2023research]: Smith, J. (2023). Research Methods in Digital Age. Academic Press.
[@jones2022analysis]: Jones, M. (2022). Data Analysis Techniques. Science Journal.

MarkdownPad (Windows)

特点：

  • Windows 原生应用
  • 双栏编辑预览
  • 支持自定义 CSS
  • 轻量级，启动快速

基本使用：

# MarkdownPad 使用示例

## 优势
- 🚀 启动速度快
- 💻 Windows 原生体验
- 🎨 自定义样式支持

## 快捷键
- `Ctrl+B`：加粗
- `Ctrl+I`：斜体
- `Ctrl+L`：插入链接
- `F5`：刷新预览

7.6 建立你的写作流：选择合适的工具组合

选择 Markdown 编辑器不是非此即彼的问题，很多用户会根据不同场景使用不同的工具。以下是一些推荐的工具组合：

场景一：个人学习笔记

推荐组合：Obsidian + 语雀浏览器插件

# 学习工作流

## 内容收集阶段
1. 使用语雀浏览器插件收集网络资料
2. 在语雀中进行初步整理和标记
3. 定期导出到本地 Markdown 文件

## 知识整理阶段
1. 在 Obsidian 中建立双向链接
2. 构建个人知识图谱
3. 定期回顾和更新连接关系

## 输出分享阶段
1. 在 Obsidian 中完成最终整理
2. 导出为 Markdown 或 PDF
3. 发布到博客或分享平台

场景二：技术文档写作

推荐组合：VS Code + Git + GitHub/Gitee

# 技术文档工作流

## 环境配置
- VS Code + Markdown All in One
- Git 版本控制
- GitHub/GitLab 托管
- Prettier 自动格式化

## 协作流程
1. 创建功能分支
2. 编写和修改文档
3. 提交 Pull Request
4. 代码审查和合并
5. 自动部署到文档站点

## 质量保证
- 使用 markdownlint 检查语法
- 配置 CI/CD 自动检查
- 定期更新和维护

场景三：团队协作写作

推荐组合：语雀 + 钉钉/飞书

# 团队协作工作流

## 项目规划
1. 在语雀中创建项目空间
2. 制定文档结构和写作规范
3. 分配写作任务和截止时间

## 协作写作
1. 多人实时编辑
2. 使用评论功能讨论
3. 版本历史追踪修改

## 审核发布
1. 指定审核人员
2. 收集反馈意见
3. 最终发布和分享

场景四：学术论文写作

推荐组合：Zettlr + Zotero + LaTeX

# 学术写作工作流

## 文献管理
1. 使用 Zotero 收集和管理文献
2. 在 Zettlr 中引用文献
3. 自动生成参考文献列表

## 论文写作
1. 使用 Markdown 编写内容
2. 插入数学公式和图表
3. 管理章节结构

## 格式转换
1. 导出为 LaTeX 格式
2. 使用期刊模板编译
3. 生成最终 PDF

最佳实践建议

1. 选择标准

在选择 Markdown 编辑器时，考虑以下因素：

  • 使用场景：个人笔记、技术文档、团队协作？
  • 平台需求：Windows、macOS、Linux、移动端？
  • 功能需求：实时预览、版本控制、导出格式？
  • 预算考虑：免费工具还是付费软件？
  • 学习成本：是否愿意投入时间学习复杂功能？

2. 避坑指南

常见问题：

  1. 过度追求功能
❌ 错误做法：安装大量插件，界面复杂混乱
✅ 正确做法：根据实际需求选择必要功能
  1. 忽视数据备份
❌ 错误做法：只在本地保存，没有备份策略
✅ 正确做法：定期备份，使用云同步或版本控制
  1. 格式不统一
❌ 错误做法：团队成员使用不同的格式规范
✅ 正确做法：制定统一的写作规范和格式标准

3. 效率提升技巧

快捷键掌握：

# 通用快捷键
- Ctrl+B：加粗
- Ctrl+I：斜体
- Ctrl+K：插入链接
- Ctrl+Shift+V：预览
- Ctrl+/：注释

# 高级技巧
- 使用代码片段（Snippets）
- 配置自动完成
- 自定义快捷键

模板使用：

# 会议纪要模板

**会议主题：** 
**参会人员：** 
**会议时间：** 
**会议地点：** 

## 议题讨论
1. 

## 决策事项
- [ ] 

## 后续行动
- [ ] 负责人：截止时间：

本章小结

在本章中，我们全面介绍了主流的 Markdown 编辑器：

  1. VS Code：程序员的首选，强大的插件生态和 Git 集成
  2. 语雀：现代化的在线协作平台，多端同步和团队协作
  3. Typora：所见即所得的极致体验，优雅的界面设计
  4. Obsidian：双链笔记和知识图谱，构建个人知识网络
  5. 其他选择：Notable、Mark Text、Zettlr、MarkdownPad 等特色工具

选择合适的编辑器是提高写作效率的关键。记住，最好的工具是最适合你需求的工具。建议你根据自己的使用场景，尝试不同的编辑器，找到最适合的工具组合。

在下一章中，我们将学习如何在 Markdown 中使用图表和公式，进一步扩展文档的表现力。

mp.weixin.qq.com\_cgi-bin\_settingpage\_t=setting\_index\&action=index\&token=2028891395\&lang=zh\_CN.png

avatar
文章
阅读
粉丝