前言Markdown 是轻量级标记语言易读易写兼容绝大多数平台GitHub、GitLab、Typora、VSCode、掘金、语雀、Notion、VuePress、Hexo 等。 分为标准基础语法通用全平台兼容扩展 GFM 语法GitHub Flavored Markdown主流平台增强高级扩展语法Typora / 文档工具专属三大部分。第一部分标准基础语法所有 Markdown 编辑器通用1. 标题6 级层级两种书写格式效果完全一致格式 1# 号标记推荐简洁# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题格式 2底线标记仅 1/2 级一级标题 二级标题 -------------一级标题二级标题规则代表一级、-代表二级数量不限至少 1 个即可。2. 段落与换行段落分隔两段文字之间空一行才会分段无空行视为同一段落。第一段文字这里是第一句话。 紧接下一行没有空行和上面是同一段。 这里空了一行是全新段落。强制软换行段落内换行行末尾加两个空格再回车第一行末尾加两个空格 第二行和第一行同段落单独换行不推荐用br属于 HTML 语法部分纯 MD 编辑器不支持。3. 文字基础格式化斜体、加粗、粗斜体语法对照表效果写法 1写法 2渲染结果斜体*文字*_文字_斜体文本加粗**文字**__文字__加粗文本粗斜体***文字***___文字___粗斜混合示例普通文字 *单独斜体*普通文字 **单独加粗*****全部加粗斜体***普通文字单独斜体普通文字单独加粗全部加粗斜体4. 引用块 用于摘抄、备注、提示文案支持多层嵌套单层引用 单行引用文本 多行引用直接换行无需重复写也可 一段引用内容 换行自动继承引用样式多层嵌套引用叠加多个实现层级区分 一级引用 二级嵌套引用 三层嵌套引用 四层嵌套引用内混合格式引用块内可以使用加粗、斜体、列表等所有 MD 语法 引用里可以**加粗**、*斜体* - 引用内无序列表 1. 引用内有序列表5. 分割线一行内至少 3 个-/*/_前后可加空格单独占一行三种写法效果完全相同--- *** ___ # 带空格也生效 - - - * * *6. 列表6.1 无序列表符号支持-*混合使用无影响缩进 2/4 空格生成子列表- 一级列表项1 - 一级列表项2 - 二级子列表缩进2空格 - 三级子列表再缩进2空格 * 切换符号不影响层级 另一种列表符号6.2 有序列表数字 . 空格序号数字可乱序渲染自动重新排序支持嵌套子列表1. 第一条 3. 第二条数字写错也自动排序 1. 子有序项1 2. 子有序项2 2. 第三条第一条第二条数字写错也自动排序子有序项 1子有序项 2第三条6.3 列表内多行内容列表项内换行保持缩进即可保持归属同一列表- 列表第一行 同一列表项第二行缩进对齐 同一列表项第三行 - 第二条列表列表第一行 同一列表项第二行缩进对齐 同一列表项第三行第二条列表7. 行内代码 缩进代码块7.1 行内单行代码反引号用于标记函数、变量、命令、关键字使用 console.log() 打印日志变量名 userId命令 npm install使用console.log()打印日志变量名userId命令npm install7.2 缩进代码块标准语法无语法高亮段落前缩进4 个空格 / 1 个 Tab整段识别为代码不支持语言高亮function test() { return 123; }function test() { return 123; }8. 链接2 种标准写法8.1 行内链接最常用格式[显示文本](链接地址 悬浮提示文字)提示文字可省略[百度](https://www.baidu.com) [掘金](https://juejin.cn 前端社区掘金)百度 掘金8.2 引用式链接长文档整理链接统一管理正文简写文末统一存放 URL适合大量链接场景前端文档[MDN][mdn] 工具网站[Can I Use][caniuse] # 文末定义区 [mdn]: https://developer.mozilla.org/zh-CN [caniuse]: https://caniuse.com前端文档MDN 工具网站Can I Use8.3 自动链接尖括号包裹 URL / 邮箱直接渲染为可点击链接无需自定义文字https://github.com demo163.comhttps://github.com demo163.com9. 图片图片语法和链接高度相似开头加!格式替代文字图片加载失败时显示的文字地址本地相对路径 / 网络图片 URL悬浮标题鼠标悬停显示可选第二部分GFM 扩展语法GitHub Flavored Markdown90% 平台支持1. 删除线双波浪线~~ ~~已废弃内容 ~~旧功能接口~~请使用新接口已废弃内容 旧功能接口请使用新接口2. 围栏代码块带语言高亮开发必备标准缩进代码无高亮GFM 引入三重反引号代码块可指定编程语言实现语法着色基础用法javascript // JS代码示例 const name Markdown; console.log(Hello ${name});### 支持语言标识 常见语言java python html css sql bash vue go c# json markdown json { name: demo, version: 1.0.0 }无语言则纯文本渲染 markdown纯文本无代码高亮 多行内容3. 表格原生标准 MD 无表格GFM 扩展管道符|分隔单元格横线---区分表头与内容基础表格| 姓名 | 年龄 | 城市 | | ---- | ---- | ---- | | 张三 | 23 | 杭州 | | 李四 | 26 | 上海 |姓名年龄城市张三23杭州李四26上海单元格对齐控制冒号:控制对齐方式:---左对齐:---:居中对齐---:右对齐| 左对齐文本 | 居中对齐 | 右对齐数字 | | :--------- | :------: | ---------: | | 内容1 | 内容2 | 100 | | 长文本内容 | 中间文字 | 9999 |左对齐文本居中对齐右对齐数字内容 1内容 2100长文本内容中间文字99994. 任务清单复选框待办列表无序列表基础上增加[ ]/[x]多用于项目、文档 TODO 清单## 本周任务 - [x] 完成Markdown手册编写 - [ ] 学习Vue3源码 - [ ] 整理前端面试题 - [ ] JS基础 - [ ] 浏览器原理本周任务完成 Markdown 手册编写学习 Vue3 源码整理前端面试题JS 基础浏览器原理5. Emoji 表情通过:表情名称:渲染图标GitHub、Typora、语雀全部支持 常用示例:rocket: 开发上线 :white_check_mark: 完成 :x: 失败 :warning: 警告 :bulb: 提示 :memo: 笔记 :smile: :heart: 开发上线 ✅ 失败 ❌ ⚠️ 警告 提示 笔记 ❤️第三部分高级扩展语法Typora / 专业文档工具专属部分平台不兼容1. 文本高亮双等号包裹文字重点内容 需要高亮标注普通文字无效果重点内容 需要高亮标注 普通文字无效果2. 下划线原生 MD 无下划线依赖 HTML 标签u带下划线的文本内容/u带下划线的文本内容3. 脚注文档注释正文插入标记[^标记名]文末统一写注释内容自动生成跳转Markdown语法简单易学[^intro]广泛用于技术文档。 [^intro]: Markdown由John Gruber于2004年发布目标实现易读易写的纯文本标记。Markdown 语法简单易学 [^intro]广泛用于技术文档。[^intro]: Markdown 由 John Gruber 于 2004 年发布目标实现易读易写的纯文本标记。4. 目录 TOC自动扫描页面所有标题生成目录Typora、GitBook、VuePress 支持[TOC][TOC]5. LaTeX 数学公式行内公式嵌入段落单个美元符号$公式$质能方程$Emc^2$一元二次求根公式 $x\frac{-b\pm\sqrt{b^2-4ac}}{2a}$质能方程Emc2一元二次求根公式 x2a−b±b2−4ac块级独立公式双美元符号包裹单独成行居中$$ \sum_{n1}^{\infty} \frac{1}{n^2} \frac{\pi^2}{6} $$∑n1∞n216π26. HTML 内嵌所有 MD 兼容可拓展样式Markdown 支持直接嵌入 HTML 标签实现 MD 无法完成的自定义样式、布局文字颜色、字号、排版span stylecolor:red; font-size:18px;红色大号文字/span div stylebackground:#eee; padding:10px;灰色背景提示框/div br 强制换行 hr 分割线等价于---红色大号文字div stylebackground:#eee; padding:10px;灰色背景提示框/div br hr图片尺寸控制MD 原生无法设置宽高HTML 解决img srchttps://picsum.photos/200 width100 height50img srchttps://picsum.photos/200 width100 height507. 注释仅源码可见渲染隐藏HTML 注释通用!-- 这段注释网页/预览不会显示仅源代码可见 -- 正文正常内容Typora 专用折叠注释%% 仅Typora支持的隐藏注释其他编辑器会直接显示文本 %%第四部分进阶实用技巧 平台兼容说明1. 转义字符让特殊符号原样显示\反斜杠转义 MD 关键字# * [] ! - ~ 示例\# 不识别为标题原样输出# \* 普通星号不生成斜体 \ 反引号原样展示 \[文本\] 不识别链接# 不识别为标题原样输出 # * 普通星号不生成斜体 反引号原样展示 文本 不识别链接2. 各类平台语法支持差异GitHub / Gitee标准 MD 全部 GFM 语法不支持高亮、公式、TOC、HTML 复杂样式Typora全量支持公式、高亮、脚注、HTML、图表、TOC 完美渲染本地写作首选掘金 / 知乎 / CSDN仅基础 MD 表格 代码块不支持任务清单、脚注、公式、Emoji 少量缺失VSCode Markdown 插件基础 GFM安装插件可开启公式、目录Notion / 语雀自定义扩展支持卡片、流程图原生 MD 语法全部兼容3. 避坑指南标题#和文字之间必须加空格#标题不会识别为标题需# 标题列表符号-/1.后方必须空格否则不生效代码块 前后单独一行不能和文字同行表格竖线|可省略首尾但建议完整书写保证所有编辑器兼容本地图片路径使用相对路径./img/demo.png不要使用系统绝对路径第五部分完整速查表可复制保存功能分类语法写法渲染效果说明一级标题# 标题最大字号标题斜体*文字*倾斜文本加粗**文字**加粗文本删除线~~文字~~文字中间划线行内代码code灰色代码标记代码块js ...带语法高亮多行代码引用 内容侧边灰色提示块无序列表- 条目圆点列表有序列表1. 条目数字序号列表待办清单- [ ] 任务复选框链接[文字](url)可点击超链接图片插入图片表格| 单元格 |多行列表格分割线---水平分割横线Emoji:rocket:表情图标脚注[^标记]页面底部注释行内公式$Emc^2$小段数学公式块公式$$ 公式 $$独立居中公式文本高亮文字黄色高亮背景转义符号\# \* \[特殊符号原样输出Markdown 编辑工具使用场景最优工具补充备选新手日常写文档、公众号、论文TyporaMarkText免费程序员写代码 接口 READMEVS CodeTypora个人知识库、读书笔记、双链关联ObsidianZettlr国内企业多人协作文档、团队 Wiki语雀Notion海外临时在线编辑、无电脑应急DillingerStackEdit多人实时共同编辑 MDHackMD / 语雀Notion开源项目生成官方文档网站VitePressDocusaurus手机随时随地记笔记Obsidian 移动端 / 幕布iA Writer完全免费无广告、替代 TyporaMarkTextVS Code其他小工具Mermaid Live Editor在线画流程图、时序图直接复制代码进 MDPandoc万能格式转换MD ↔ Word/PDF/EPUB跨工具互通文档PicGo图床工具一键上传截图生成网络链接适配所有 MD 编辑器
