YIXUNFE / blog

文章区
151 stars 25 forks source link

MARKDOWN语法简析 #1

Open ajccom opened 9 years ago

ajccom commented 9 years ago

MARKDOWN语法简析

在介绍Markdown之前,我们先来看一下同样是标记语言的,广为人知的,万众瞩目的HTML。

HTML的全称是超文本标记语言(Hypertext Markup Language),它以标记表示区块,可以承载文本、图片、流媒体等介质。一段普通的HTML段落,看起来是这样的:

<p>请继续往下看,千万不要<a href="http://xiaohuangwang.com" title="点点点">离开</a>哦。</p>

在非技术同学的眼里,虽然也能看得懂这段代码大致表达的意思,但是还是缺少一些可读性。所以在准备写一篇博客时,常见的是从word编写完后,将样式带进富文本编辑器中,而不是打开源码按钮直接进行编辑,因为大多数人对HTML还是觉得难以下手。面对这种情况,我们有一种更简单的方式可以推荐给这类人群,那就是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


字体样式

*一个星号包裹是斜体*
_一个下划线包裹也是斜体_
**两个星号包裹是粗体**
__两个下划线包裹也是粗体__
~~两个飘就是中划线了哦~~

你还能_混合_使用它们


列表

* 无序列表用星号
- 中划线也表示无序列表
1. 有序列表用数字+点

举个栗子:

  1. 函数算法与分析
    • 算法基础
    • 分析基础
  2. 工作流对工程架构的重要性
    • 工作流
    • 工程的核心思想
    • 工程学要点概述


链接

[链接文案](链接地址)

举个栗子:

易迅首页


图片

![图片的alt值](图片地址)

举个栗子:

易迅LOGO


代码段

使用三个回勾号包裹代码段


内嵌代码

左右一个回勾号包裹代码


代码段高亮

```javascript
function highlight () {
  var str = '```'
  str += 'javascript'
}
```

举个栗子:

function alert (arg) {
  if (arg) {
    alert(arg.toString())
  }
}


引用

> 大于号表示引用

举个栗子:

我们是红太阳的红小兵, 红太阳的话儿句句听


任务列表

- [ ] 已勾选状态
- [ ] 未勾选状态

举个栗子:


表格

列1 | 列2 | 列3
---- | ---- | ----
项1 | 项2 | 项3
项4 | 项5 | 项6

举个栗子:

姓名 身高 体重
小胖 167 80
大胖 190 200


链接到GITHUB ISSUE

#1
mojombo#1
mojombo/github-flavored-markdown#1

举个栗子:

ajccom/blog#1


表情

竟然还支持表情:sparkles:

查看表情列表


HTML

支持直接写HTML哦