Open mengtuifrontend opened 5 years ago
在介绍 Markdown 之前,我们先来看一下同样是标记语言的,广为人知的,万众瞩目的 HTML。
HTML 的全称是超文本标记语言 (Hypertext Markup Language),它以标记表示区块,可以承载文本、图片、流媒体等介质。一段普通的 HTML 段落,看起来是这样的:
<p>请继续往下看,千万不要<a href="http://xiaohuangwang.com" >离开</a>哦。</p>
在非技术同学的眼里,虽然也能看得懂这段代码大致表达的意思,但是还是缺少一些可读性。所以在准备写一篇博客时,常见的是从 word 编写完后,将样式带进富文本编辑器中,而不是打开源码按钮直接进行编辑,因为大多数人对 HTML 还是觉得难以下手。针对这种情况,有一种更简单的方式可以推荐给这类人群,那就是 Markdown。同样实现上面的段落,Markdown 的语法看起来是这样的:
源码
Markdown
请继续往下看,千万不要[离开](http://xiaohuangwang.com)哦。
Markdown 就是这么简洁!通常我们在 Github 上写 issue、readme、comment 等时也都会用到 Markdown,下面我们来学习一下它的语法。
Markdown 的衍生版本众多,这里我们仅介绍 Github 中使用的语法 :bowtie: 。
# This is an <h1> tag ## This is an <h2> tag ###### This is an <h6> tag
效果 This is an \<h1> tag This is an \<h2> tag This is an \<h6> tag
效果
*一个星号包裹是斜体* _一个下划线包裹也是斜体_ **两个星号包裹是粗体** __两个下划线包裹也是粗体__ ~~两个飘就是中划线了哦~~
效果 一个星号包裹是斜体 一个下划线包裹也是斜体 两个星号包裹是粗体 两个下划线包裹也是粗体 两个飘就是中划线了哦
你还可以混合使用它们,
_~~__斜体加粗中划线__~~_
效果 斜体加粗中划线
可以使用 *, - 或 数字+点 表示列表。
*
-
数字+点
* 无序列表用星号 - 中划线也表示无序列表 1. 有序列表用数字+点
效果 无序列表项 1 无序列表项 2 无序列表项 3 有序列表项 1 有序列表项 2 有序列表项 3
链接以成对的方括号和圆括号组成。
[链接文案](链接地址)
效果 萌推大前端
类似链接,图片由感叹号、方括号和圆括号组成。
![图片的alt值](图片地址)
使用前后成对的 3 个回勾号 (```) 包裹代码段,并且可以指定一些语言名称用以高亮显示代码内容,增加阅读体验
let block = 'JS 语法高亮'
.code { /* CSS 语法高亮 */ display: none; }
Github 下的 Markdown 支持的语法高亮列表,请查收
使用大于号+空格表示引用
效果 引用的展示效果
不同于代码块,使用 2 个回勾号 (`) 包裹内容,例如 `code`
效果 行内代码的展示效果
代码
- [x] 选中状态的项 - [ ] 未选中状态的项
效果 [x] 选中状态的项 [ ] 未选中状态的项
表头1 | 表头2 | 表头3 ---- | ---- | ---- 项1 | 项2 | 项3 项4 | 项5 | 项6
:[emoji name]:
效果 :car: :trollface: :o:
emoji 图鉴
认识 Markdown 语法
在介绍 Markdown 之前,我们先来看一下同样是标记语言的,广为人知的,万众瞩目的 HTML。
HTML 的全称是超文本标记语言 (Hypertext Markup Language),它以标记表示区块,可以承载文本、图片、流媒体等介质。一段普通的 HTML 段落,看起来是这样的:
在非技术同学的眼里,虽然也能看得懂这段代码大致表达的意思,但是还是缺少一些可读性。所以在准备写一篇博客时,常见的是从 word 编写完后,将样式带进富文本编辑器中,而不是打开
源码
按钮直接进行编辑,因为大多数人对 HTML 还是觉得难以下手。针对这种情况,有一种更简单的方式可以推荐给这类人群,那就是Markdown
。同样实现上面的段落,Markdown 的语法看起来是这样的:Markdown 就是这么简洁!通常我们在 Github 上写 issue、readme、comment 等时也都会用到 Markdown,下面我们来学习一下它的语法。
语法
Markdown 的衍生版本众多,这里我们仅介绍 Github 中使用的语法 :bowtie: 。
标题
字体样式
你还可以混合使用它们,
列表
可以使用
*
,-
或数字+点
表示列表。链接
链接以成对的方括号和圆括号组成。
图片
类似链接,图片由感叹号、方括号和圆括号组成。
代码段
Github 下的 Markdown 支持的语法高亮列表,请查收
引用
行内代码
任务列表
表格
EMOJI
emoji 图鉴
Thanks