Markdown 编辑器 使用教程
详细使用指南、最佳实践与常见问题解答
使用场景
Markdown 编辑器适合写技术文档、博客文章、README、笔记、文档说明等。当你需要实时预览 Markdown 渲染效果,或需要将 Markdown 导出为 HTML 嵌入网页时,这个工具最为方便。
Use Cases
The Markdown editor is ideal for writing technical docs, blog posts, READMEs, notes, and documentation. It is most useful when you need live preview of Markdown rendering or need to export Markdown as HTML for embedding.
功能特点
- 实时预览:输入即渲染,所见即所得
- GFM 支持:表格、任务列表、删除线、自动链接
- 代码高亮:支持主流编程语言语法高亮
- 导出 HTML:一键生成可嵌入网页的完整 HTML
- 本地保存:内容自动保存到浏览器,刷新不丢失
Features
- Live preview: instant rendering as you type
- GFM support: tables, task lists, strikethrough, autolinks
- Code highlighting: syntax highlighting for major languages
- HTML export: generate complete HTML for embedding with one click
- Auto-save: content persists in your browser across refreshes
使用示例
示例 1:场景一:写 GitHub README 时,在左侧编辑 Markdown,右侧实时查看渲染效果,避免提交后才发现格式问题。
示例 2:场景二:写技术博客,用 ` ```js ` 包裹代码块获得语法高亮,用表格对比功能,用任务列表跟踪进度。
示例 3:场景三:将写好的 Markdown 导出为 HTML,直接嵌入到 CMS 或网页中。
Examples
Example 1: Scenario 1: When writing a GitHub README, edit Markdown on the left and see the rendered preview on the right to catch formatting issues before committing.
Example 2: Scenario 2: Write technical blogs using ```js fenced code blocks for syntax highlighting, tables for feature comparison, and task lists for progress tracking.
Example 3: Scenario 3: Export your Markdown as HTML and embed it directly into a CMS or webpage.
最佳实践
- 使用 GFM 扩展语法时确保目标平台支持(如表格、任务列表)
- 代码块要标明语言(如 ```python)以获得正确高亮
- 图片建议使用绝对 URL,避免相对路径在不同环境下失效
- 长文档建议分章节用 ## 标题组织结构,便于阅读
Best Practices
- Ensure the target platform supports GFM extensions (tables, task lists) before using them
- Always specify the language in fenced code blocks (```python) for proper highlighting
- Use absolute URLs for images to avoid broken links across environments
- Organize long documents with ## section headings for better readability
常见问题
支持哪些 Markdown 扩展语法?
支持 GitHub Flavored Markdown (GFM),包括表格、任务列表(- [ ])、删除线(~~text~~)、自动链接、代码块语法高亮等。
导出的 HTML 包含哪些内容?
导出的 HTML 是一个完整的独立 HTML 文档,包含内联 CSS 样式,可以直接保存为 .html 文件或在浏览器中打开。
我的内容会被保存吗?
会。编辑器内容会自动保存到浏览器 localStorage,刷新页面后内容仍在。清除浏览器数据会丢失内容,建议重要内容自行备份。
FAQ
What Markdown extensions are supported?
GitHub Flavored Markdown (GFM) is supported, including tables, task lists (- [ ]), strikethrough (~~text~~), autolinks, and syntax highlighting in code blocks.
What does the exported HTML contain?
The exported HTML is a complete standalone HTML document with inline CSS styles. You can save it as a .html file or open it directly in a browser.
Is my content saved?
Yes. The editor content is automatically saved to browser localStorage and persists across page refreshes. Clearing browser data will lose the content, so back up important content yourself.