Markdown使用笔记

Hexo下使用的MarkDown为Github的GFM,风格很漂亮,简洁美观大方。但是GFM 的MarkDown语法和标准 的MarkDown稍有不同,使用过程中需要注意一些

概要介绍

Markdown 是一种轻量级的「标记语言」,优点在于

  • 专注你的文字内容而不是排版样式。
  • 轻松的导出 HTML、PDF 和本身的 .md 文件。
  • 纯文本内容,兼容所有的文本编辑器与字处理软件。
  • 可读,直观。适合所有人的写作语言。

语法简明概述

  • 分段 两个回车
  • 换行 两个空格 或者 回车
  • 标题 # ~ ######,#号的个数表示几级标题,即表示一级标题到六级标题
  • 强调 **文字** , __文字__ , _文字_ , *文字* , 文字
  • 模块引用 > 注意后面紧跟个空格
  • 表格 - 和 | 分割行和列 , : 控制对其方式
  • 代码块 `四个空格 开头或, 使用三个点+代码内容+三个点
  • 链接 [文字](链接地址)
  • 图片 ![图片说明](图片地址) ,地址可以是本地路劲,也可以是网络地址
  • 列表 * , + , - , 1. ,选其中之一,注意后面紧跟个空格

内容强调

1
2
3
字体 **加粗** 显示
字体 *斜体* 显示
字体 ***加粗并斜体*** 显示

加粗、斜体
字体 加粗 显示
字体 斜体 显示
字体 加粗并斜体 显示

1
2
3
4
字体 __加粗__ 显示
字体 _斜体_ 显示
字体 ___加粗并斜体___ 显示
组合 *__加粗并斜体__* 显示

字体 加粗 显示
字体 斜体 显示
字体 加粗并斜体 显示
组合 加粗并斜体 显示

列表

无序代码:

1
2
3
4
- 文本1
* 二级文本
- 文本2
- 文本3

效果如下:

  • 文本1
    • 二级文本
  • 文本2
  • 文本3

有序代码:

1
2
3
4
5
1. 文本1
1. 2121
2. 电影
2. 文本2
3. 文本3

效果如下:

  1. 文本1
    1. 2121
    2. 电影
  2. 文本2
  3. 文本3

1
2
3
4
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |

效果如下:

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

code

两种方法:

  1. 在 Markdown 中建立代码区块很简单,只要简单地缩进 4 个空格或是 1 个制表符就可以
    当前面有-的列表语句时,此时换成两个制表符就可以了
  2. 前后加(三个点点点)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    - 填充(padding)
    元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。
    div{padding:20px 10px 15px 30px;}/*上、右、下、左(顺时针),顺序不要搞混*/
    div{
    padding-top:20px;
    padding-right:10px;
    padding-bottom:15px;
    padding-left:30px;
    }
    div{padding:10px;}/*上、右、下、左的填充都为10px;*/
    div{padding:10px 20px;}/*上下填充一样为10px,左右一样为20px*/

效果如下:

  • 填充(padding)
    元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。
    div{padding:20px 10px 15px 30px;}/*上、右、下、左(顺时针),顺序不要搞混*/
    div{
         padding-top:20px;
         padding-right:10px;
         padding-bottom:15px;
         padding-left:30px;
    }
    div{padding:10px;}/*上、右、下、左的填充都为10px;*/
    div{padding:10px 20px;}/*上下填充一样为10px,左右一样为20px*/  
    

图片

Markdown 使用一种和链接很相似的语法来标记图片,同样也允许两种样式:行内式参考式

  • 行内式的图片语法

    1
    2
    ![Alt text](/path/to/img.jpg)//方括号里面放上图片的替代文字,接着的普通括号,里面放上图片的网址,最后还可以用引号包住并加上 选择性的 'title' 文字
    ![Alt text](/path/to/img.jpg "Optional title")
  • 参考式的图片语法

    1
    2
    3
    4
    ![Alt text][id]
    //「id」是图片参考的名称,
    //图片参考的定义方式则和连结参考一样:
    [id]: url/to/image "Optional title attribute"

水平规则

1
2
3
4
5
6
7
8
9
Three or more...

---

Hyphens

***

Asterisks

效果如下:

Three or more…


Hyphens


Asterisks

反斜杠

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号
例如:如果你想要用星号加在文字旁边的方式来做出强调效果(但不用 <em> 标签),你可以在星号的前面加上反斜杠:

1
\*literal asterisks\*

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

1
2
3
4
5
6
7
8
9
10
11
12
\   反斜线`
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号

参考文章
Markdown 语法说明(简体中文版)
Markdown常用语法 | Xuan’s blog

-------------本文结束感谢您的阅读-------------