当前位置 : 首页 » 文章分类 :  开发  »  MarkDown语法简介

MarkDown语法简介

[TOC]


我是一级标题

我是二级标题

我是三级标题

我是四级标题

我是五级标题
我是六级标题

基本语法

Markdown简介

  • 一种纯文本标记语言,轻量级
  • 专注于写作,简单书写,丰富呈现

引用

>开始一段引用

这是被引用的一个段落
你是干什么工作的? - 我专门杀僵尸 - 但是僵尸根本不存在啊 - 你见过哪怕一只吗? - 没见过 - 那你觉得他们是被谁干掉的?

代码区块

  • 要在 Markdown 中建立代码区块很简单,只要简单地缩进 4 个空格或是 1 个制表符就可以,码区块会一直持续到没有缩进的那一行(或是文件结尾)
  • 行内小段代码用反引号(和波浪线同一键下面的)引住printf
  • 三个半角反引号后加语言类型加回车,最后再以三个半角反引号加回车结束,可嵌入指定语言代码(经常不好用),例如:
    #include<stdio.h>
    
  • 支持的语言类型
    https://github.com/github/linguist/blob/master/lib/linguist/languages.yml

列表

  • 无序列表使用星号*、加号+或是减号-后跟一空格作为列表标记

    • 无序列表1
    • 无序列表2
    • 无序列表3
  • 有序列表则使用数字接着一个英文句点后跟一空格,列表标记上的数字与最终输出无关

    1. 有序列表
    2. 有序列表
    3. 有序列表

多级列表

  1. 一级列表
    • 二级列表
    • 二级列表
    • 二级列表
  2. 一级列表
  3. 一级列表

注:为知笔记中多级列表只支持2层,在标记符前多加一个空格即可成为二级列表


html实现文本居中

<div id="jump-center" style="text-align:center;"><strong>用于人体检测的方向梯度直方图</strong><br/>
Navneet Dalal,Bill Triggs
</div>
用于人体检测的方向梯度直方图

Navneet Dalal,Bill Triggs

链接

行内链接

链接语法为[链接文字](地址 "提示语"),例如:
这是个[链接](masikkk.com "提示语")
这是个链接

参考链接

参考链接就是将链接地址集中定义在一起,语法为链接文字用方括号括住,后面跟方括号括住的链接id,而此id是在别处定义的,如:

[链接文字][id1]
[id1]: http://masikkk.com "提示语"

[链接文字][id1]
[id1]: http://masikkk.com “提示语”
链接id的定义方式为:[链接id]: 地址 "提示语",网址定义只有在产生链接的时候用到,并不会直接出现在文件之中。

html实现页内锚点跳转

首先在想要跳转到的html元素标签上加锚,即定义标签的id,可以是任意标签,如文本、图片、段落、span,div等等,我在本文档的“html实现文本居中”,“通过CSS设置背景色”,“通过max-width属性设定图片最大宽度示例”处都加上了id。然后使用行内链接语法即可跳转到此锚点,只不过链接地址改为#锚点id,例如:
[跳转到通过CSS设置背景色](#jump-bg)
跳转到通过CSS设置背景色

可以向后跳转,也可以跳转到前面定义好的锚点:
[向前跳转到html实现文本居中](#jump-center)
向前跳转到html实现文本居中

或者直接使用html标签<a href="#锚点id">书写也可以:
<a href="#jump-img">跳转到通过max-width属性设定图片最大宽度示例</a>
跳转到通过max-width属性设定图片最大宽度示例


强调:加粗与斜体

  • 双星号(或下划线)引住**加粗**是粗体:加粗
  • 单星号(或下划线)引住*斜体*是斜体:斜体

如果你的*_两边都有空白的话,它们就只会被当成普通的符号,如果要在文字前后直接插入普通的星号或底线,你可以用反斜线转义\*\_
注:我的博客中为了和MathJax兼容,修改了MarkDown渲染引擎,将下划线_的加粗解释取消了,以后都要习惯用星号加粗。

通过html设定字体颜色或背景色

  • 通过html标签<font color="red">红色字体</font>来设置字体颜色:红色字体
  • 通过CSS样式表<span style="color:red">红色字体</span>来设置字体颜色:红色字体
  • 通过CSS样式表<span style="color:red;font-weight:bold">粗体红色</span>来设置红色粗体:粗体红色
  • 通过双星号引住CSS样式表**<span style="color:red">粗体红色</span>**来设置红色粗体:粗体红色
  • 通过CSS样式表<span id="jump-bg" style="background-color: rgb(255, 104, 32);">背景色</span>设置背景色:背景色

分割线

在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。

通过html标签hr书写自定义分割线样式

<hr style="height:2px;border:none;border-top:2px dotted #185598;" />


<hr style="height:1px;border:none;border-top:2px solid #660000;" />


<hr style="height:3px;border:none;border-top:3px double red;" />


<hr style="height:5px;border:none;border-top:5px ridge green;" />


<hr style="height:10px;border:none;border-top:10px groove skyblue;" />



MarkDown语法插入图片

![文字描述](图片链接 "提示语")
Markdown Logo
注:我一般不用MarkDown语法直接插入图片,都是通过html标签<img>插入图片,方便设定图片宽度。

通过html标签img插入图片并排版

通过float属性横排展示图片

<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" style="margin-bottom:0px; width:100%;" alt="提示语"><br/>Markdown Logo</div>
<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" style="margin-bottom:0px; width:100%;" alt="提示语"><br/>Markdown Logo</div>
<div style="clear:both;"></div>
提示语
Markdown Logo

提示语
Markdown Logo

注意:使用完float:left后必须<div style="clear:both;"></div>来清除float,否则后续的内容还会继续浮动到前一行。

通过width属性设定图片宽度

主要是为了解决图片太宽超出正文宽度。
<img>标签的style中增加width属性,设为100%,即其父容器宽度的100%,而其父容器div肯定在正文宽度之内。
因为如果提供了一个百分比形式的width值而忽略了height,那么不管是放大还是缩小,浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化,图像也就不会发生扭曲。
示例如下,改变页面宽度来查看效果
<div style="text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" style="margin-bottom:0px; width:100%;" alt=""><br/>MarkDown</div>


MarkDown

<div style="text-align:center;"><img src="http://7xt40n.com1.z0.glb.clouddn.com/domain-analysis.png" style="margin-bottom:0px; width:100%;" alt=""><br/>我的域名解析配置</div>

我的域名解析配置

通过max-width属性设定图片最大宽度

通过将<img src="..." style="width:100%;">设定图片宽度的缺点是:任何时候图片都会被等比缩放到宽度等于父容器宽度,当图片宽度小于父容器宽度时会被拉伸导致失真,很不爽。插入图片时还要考虑图片本身大小和正文宽度,小于正文宽度的不加此属性,大于正文宽度的加上此属性,很费事。并且考虑了这些还不够,因为正文宽度在不同大小屏幕上本身就是会变化的。
通过给<img>标签的style中增加max-width属性,设定为100%,可完美解决此问题,即<img src="..." style="max-width:100%;">,当图片宽度小于正文宽度时不会被缩放,当图片宽度大于正文宽度时会被等比缩放到宽度等于父容器宽度,并且在任何通过html的img标签插入图片的地方都可以无所顾忌的加上此属性,完美。
示例如下,改变页面宽度来查看效果
<div id="jump-img" style="text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" style="margin-bottom:0px; max-width:100%;" alt=""><br/>MarkDown</div>


MarkDown

<div style="text-align:center;"><img src="http://7xt40n.com1.z0.glb.clouddn.com/domain-analysis.png" style="margin-bottom:0px; max-width:100%;" alt=""><br/>我的域名解析配置</div>

我的域名解析配置

表格

语法说明:

  • 1、第一行为表头,第二行用一个或多个”-“分隔表头和主体部分,第三行开始每一行代表一个表格行;
  • 2、列与列之间用管道符号”|”隔开,原生方式的表格每一行的两边也要有管道符。
  • 3、可在第二行指定不同列单元格内容的对齐方式,默认为左对齐,在”-“右边加上”:”为右对齐,在”-“两侧同时加上”:”为居中对齐。
表头A|表头B
---|-
数据A|数据B
数据C|数据D
表头A 表头B
数据A 数据B
数据C 数据D
| Item      |    Value | Qty  |
| :-------- | --------:| :--: |
| Computer  | 1600 USD |  5   |
| Phone     |   12 USD |  12  |
| Pipe      |    1 USD | 234  |
Item Value Qty
Computer 1600 USD 5
Phone 12 USD 12
Pipe 1 USD 234

MarkDown表格内换行

使用html换行标签<br><br/>实现markdown表格内换行。

操作符 | 说明 | 举例
--- | --- | ---
-b file | 检测文件是否是块设备文件,如果是,则返回 true。 | `[ -b $file ]` 返回 false。
-c file | 检测文件是否是字符设备文件,如果是,则返回 true。 | `[ -c $file ]` 返回 false。
-d file | 检测文件是否是目录,如果是,则返回 true。 | `[ -d $file ]` 返回 false。
-f file | 检测文件是否是普通文件(既不是目录,也不是设备文件),<br/>如果是,则返回 true。 | `[ -f $file ]` 返回 true。
-p file | 检测文件是否是有名管道,如果是,则返回 true。 | `[ -p $file ]` 返回 false。
-r file | 检测文件是否可读,如果是,则返回 true。 | `[ -r $file ]` 返回 true。
-w file | 检测文件是否可写,如果是,则返回 true。 | `[ -w $file ]` 返回 true。
-x file | 检测文件是否可执行,如果是,则返回 true。 | `[ -x $file ]` 返回 true。
-s file | 检测文件是否为空(文件大小是否大于0),不为空返回 true。 | `[ -s $file ]` 返回 true。
-e file | 检测文件(包括目录)是否存在,如果是,则返回 true。 | `[ -e $file ]` 返回 true。
操作符 说明 举例
-b file 检测文件是否是块设备文件,如果是,则返回 true。 [ -b $file ] 返回 false。
-c file 检测文件是否是字符设备文件,如果是,则返回 true。 [ -c $file ] 返回 false。
-d file 检测文件是否是目录,如果是,则返回 true。 [ -d $file ] 返回 false。
-f file 检测文件是否是普通文件(既不是目录,也不是设备文件),
如果是,则返回 true。
[ -f $file ] 返回 true。
-p file 检测文件是否是有名管道,如果是,则返回 true。 [ -p $file ] 返回 false。
-r file 检测文件是否可读,如果是,则返回 true。 [ -r $file ] 返回 true。
-w file 检测文件是否可写,如果是,则返回 true。 [ -w $file ] 返回 true。
-x file 检测文件是否可执行,如果是,则返回 true。 [ -x $file ] 返回 true。
-s file 检测文件是否为空(文件大小是否大于0),不为空返回 true。 [ -s $file ] 返回 true。
-e file 检测文件(包括目录)是否存在,如果是,则返回 true。 [ -e $file ] 返回 true。

通过html标签table插入表格

  • <table>增加样式,变成<table class="table table-bordered table-striped table-condensed">
    • table-bordered:带圆角边框和竖线
    • table-striped:奇偶行颜色不同
    • table-condensed:压缩行距
  • 将table的宽度设置为屏幕的百分比,例如95%,<table width="95%">
  • 设置单元格排列属性align为left,right或center,例如<td aligh="center">
  • 如果表格内文需要换行,可以在要换行的内容后加入<br/>,后面的内容就会跑到下一行。
  • <style>标签可以定义到<table>标签中
<table width="95%" class="table table-bordered table-striped table-condensed" border="1">

<style type="text/css">
    .bgblue{background-color: rgb(51, 102, 255);}
    .bggreen{background-color: rgb(0, 255, 0);}
    .bgorange{background-color: rgb(255, 104, 32);}
    .bggrey{background-color: rgb(127, 127, 127);}
    .bgyellow{background-color: rgb(255, 255, 0);}
    .bold{font-weight:bold;}
</style>

<tr>
    <th>日期时间</th>
    <th>体重</th>
    <th>运动与备注</th>
</tr>
<tr>
    <td align="center">2016.03.07(一)21:20</td>
    <td align="center">73.9</td>
    <td>
    <ul>
        <li>胸</li>
        <ul>
            <li>平板哑铃卧推,左右各17.5公斤,10*4;<span class="bggreen">(重量增加15kg->17.5kg)</span></li>
            <li>平板杠铃卧推,35公斤,10*4;</li>
            <li>pec fly夹胸机,30公斤级,10*4;</li>
            <li>chest press坐姿推胸,45公斤级,10*4;</li>
            <li>平板哑铃仰卧飞鸟,左右各7.5公斤,10*4;</li>
        </ul>
        <li>腿</li>
        <ul>
            <li>史密斯架杠铃深蹲,30公斤,15*4;</li>
        </ul>
    </ul>
    <span class="bold">总结:</span><br/>
1 二头三头一直疼到今天,到下午才好点儿。<br/>
2 背部酸,看来前天练背练得还可以,好像第一次背部有这么强烈的延迟性酸痛。<br/>
3 终于可以推17.5kg的哑铃卧推了。<br/>
4 今天练腿了,强度还行,可预见接下来几天大腿会很疼。<br/>
5 小腿疼,很疼,肯定跟用前脚掌着地跑步有关,膝盖受压迫少了,小腿开始了。<br/>
    </td>
</tr>
<tr>
    <td align="center">2016.03.07(一)21:20</td>
    <td align="center">73.9</td>
    <td>
    <ul>
        <li><span class="bgblue">背</span></li>
        <ul>
            <li>俯身单臂哑铃划船,15公斤,左右各10*4;</li>
            <li>俯立杠铃划船,30公斤,10*6;</li>
            <li>正手宽距助力引体向上,30公斤助力,10*4;</li>
            <li>龙门架绳索划船,30公斤,10*5;</li>
            <li>seated horizontal pully水平坐拉,25公斤级,10*4;</li>
        </ul>
        <li><span class="bgblue">日常</span></li>
        <ul>
            <li>宽距俯卧撑,20*2;</li>
        </ul>
        <li><span class="bgblue">腿</span></li>
        <ul>
            <li>史密斯架杠铃深蹲,30公斤,15*2;</li>
        </ul>   
        <li><span class="bgblue">有氧</span></li>
        <ul>
            <li>40分钟慢跑,5.87公里,381千卡;速度:9公里每小时,中间累了可休息1-3次,每次1-2分钟;</li>
        </ul> 
    </ul>
    </td>
</tr>
<tr>
    <td align="center">2016.03.07(一)21:20</td>
    <td align="center">73.9</td>
    <td>
    <ul>
        <li>项目</li>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <li>项目</li>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <li>项目</li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </ul>
    </td>
</tr>
</table>
























日期时间 体重 运动与备注
2016.03.07(一)21:20 73.9



    • 平板哑铃卧推,左右各17.5公斤,104;(重量增加15kg->17.5kg)

    • 平板杠铃卧推,35公斤,104;

    • pec fly夹胸机,30公斤级,104;

    • chest press坐姿推胸,45公斤级,104;

    • 平板哑铃仰卧飞鸟,左右各7.5公斤,104;




    • 史密斯架杠铃深蹲,30公斤,154;



总结:

1 二头三头一直疼到今天,到下午才好点儿。

2 背部酸,看来前天练背练得还可以,好像第一次背部有这么强烈的延迟性酸痛。

3 终于可以推17.5kg的哑铃卧推了。

4 今天练腿了,强度还行,可预见接下来几天大腿会很疼。

5 小腿疼,很疼,肯定跟用前脚掌着地跑步有关,膝盖受压迫少了,小腿开始了。

2016.03.07(一)21:20 73.9



    • 俯身单臂哑铃划船,15公斤,左右各104;

    • 俯立杠铃划船,30公斤,106;

    • 正手宽距助力引体向上,30公斤助力,104;

    • 龙门架绳索划船,30公斤,105;

    • seated horizontal pully水平坐拉,25公斤级,104;


  • 日常


    • 宽距俯卧撑,202;




    • 史密斯架杠铃深蹲,30公斤,15*2;


  • 有氧


    • 40分钟慢跑,5.87公里,381千卡;速度:9公里每小时,中间累了可休息1-3次,每次1-2分钟;



2016.03.07(一)21:20 73.9

  • 项目





  • 项目





  • 项目







增强语法

Markdown与HTML

  • 单标签可任意使用
  • 成对标签使用时,必须在前后加上空行与其它内容区隔开
  • 如果要引用html标签代码,用反引号括住,否则会被解析为html标签
  • 转义字符&<
    • 版权符号&copy:©,小于号<,小于号&lt;:<,与&,与&amp:&
    • AT&T

目录TOC

[TOC],在任意位置插入根据标题自动生成的文档目录(Table of Contents)
注:有些markdown编辑器不支持此语法

流程图

元数据标识: grammar_flow

提供流程图语法扩展功能,语法格式为:

\`\`\`flow
st=>start: 开始
e=>end: 结束
op=>operation: 操作步骤
cond=>condition: 是 或者 否?
st->op->cond
cond(yes)->e
cond(no)->op
\`\`\`
st=>start: 开始
e=>end: 结束
op=>operation: 操作步骤
cond=>condition: 是 或者 否?
st->op->cond
cond(yes)->e
cond(no)->op

序列图

元数据标识: grammar_sequence

\`\`\`sequence
小明->小李: 你好 小李, 最近怎么样?
Note right of 小李: 小李想了想
小李-->小明: 还是老样子
\`\`\`

提供序列图语法扩展功能,语法格式为:

小明->小李: 你好 小李, 最近怎么样?
Note right of 小李: 小李想了想
小李-->小明: 还是老样子

MathJax公式

$符引住的是行内公式,双$符引住的是行间公式。
含下划线_的公式$x_mu$:$x_mu$
希腊字符$\sigma$:$\sigma$
\\公式内换行:

$$
f(n) =
\begin{cases}
n/2,  & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd}
\end{cases}
$$

$$
f(n) =
\begin{cases}
n/2, & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd}
\end{cases}
$$

行内公式$y=ax+b$:$y=ax+b$
行内公式$\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta$:$\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta$

行间公式$$ \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} $$
$$ \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} $$
行间公式$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

GFM(GitHub Flavored Markdown)


优缺点与应用

缺点

  • 有些编辑器不支持一些特殊语法
  • 解析样式由编辑器定,自己修改样式不方便
  • 对比word,Excel,latex等富文本编辑器,无复杂排版

应用


资料与工具


上一篇 2017年第三季度运动记录

下一篇 Python科学计算环境配置