Markdown学习之二基础语法

Markdown学习之二基础语法

语法基本规则

  1. Markdown语法完全由标点符号组成
  2. 语法标点符号与内容之间要有空格
  3. Markdown中可直接使用html标签

编辑器

支持Markdown的编辑器非常多,搜一下会出来很多,Atom、MarkdownPan2、Typora、Vscode等等,选一个自己喜欢的就可以了,毕竟我们是用它来快速排版编写内容用的,只要快速了解一下基础语法,就可以开始我们的工作。

本文编写使用的编辑器是Typora,之前使用MarkdownPan2但是它突然不能渲染页面于是放弃。

写作本文时,未测试其他编辑器对基础语法的支持以及解析结果是否相同,也未整理各编辑器在基础语法之上另开发的额外功能。了解各编辑器的额外功能请参考各自的文档。

基础语法

最基础的语法整理自创始人约翰·格鲁伯发布的内容,参考地址:https://daringfireball.net/projects/markdown/syntax

块元素 block elements

标题 Headers

标题有两种格式,一种是Setext,一种是atx。

Setext,是用至少两个等号(=)在文字下面一行,标记一级标题,等价一个#;用至少两个减号(-)在文字下面一行,标记二级标题,等价两个#。

注:有的编辑器一个=号能正常显示,有的不行,为了保险起见至少两个。

atx,是用#号的个数标记几级标题,一个就是一级标题,两个就是二级标题,最多六个,空格加标题内容。

注:标记符号后边一定要有空格,至少一个。

以下是示例:

Setext格式

一级标题

这里是一级标题
=

显示效果:

这里是一级标题

二级标题

这里是二级标题
--

显示效果:

这是里二级标题

atx格式

一级标题

# 这里是一级标题

显示效果:

这里是一级标题

二级标题

## 这里是二级标题

显示效果:

这里是二级标题

文本块引用 Blockquotes

格式语法

> 这里是引用的文本块
> > 再次引用的文本块

显示效果

这里是引用的文本块

再次引用的文本块

多行的文本块,可以在段首写>,也可以每行行首写。

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

显示效果

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

显示效果

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

引用的文本块中,还支持其他Markdown标签,包括标题、列表和程序代码块。

> ## This is a header.
> 
> 1.   This is the first list item.
> 2.   This is the second list item.
> 
> Here's some example code:
> 
>     return shell_exec("echo $input | $markdown_script");

显示效果

This is a header.

  1. This is the first list item.
  2. This is the second list item.

Here's some example code:

return shell_exec("echo $input | $markdown_script");

列表 Lists

Markdown支持无序列表和有序列表。

无序列表使用*、+、-任意其中一个标识,标识时使用一个字符。

* 无序列表1
+ 无序列表2
- 无序列表3

显示效果

  • 无序列表1
  • 无序列表2
  • 无序列表3

无序列表分级,下一级标识符前面加两个空格或者一个tab

* 列表1级1
  * 列表2级1
  * 列表2级2
* 列表1级2

显示效果

  • 列表1级1
    • 列表2级1
    • 列表2级2
  • 列表1级2

列表内容会自动顶格对齐,不需要手动进行调整,下面两段代码显示效果一致。

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing.
*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing.

显示效果是一样的

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
  • Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing.

一条列表内容,如果有多个段落,需要在段落开始增加4个空格或者一个tab。

1.  This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

2.  Suspendisse id sem consectetuer libero luctus adipiscing.

显示效果:

  1. This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

  2. Suspendisse id sem consectetuer libero luctus adipiscing.

如果段落开始不够4个空格或者没有1个tab,显示效果如下:

  1. This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.

  1. Suspendisse id sem consectetuer libero luctus adipiscing.

列表中引文文本,引用符号 > 必须要相对列表符号右缩进4个空格或者1个tab。文本引用的标签规则同样生效,文本内容不用手动每一行对齐,会自动对齐。

* this is list level 1
    > this is level 1 blockquotes
    next new line 
* this is list levle 1 
    * this is list level 2
        > this is level 2 blockquotes
    * this is list level 2
> this is levle 2 blockquotes , no tab

显示效果

  • this is list level 1

    this is level 1 blockquotes
    next new line

  • this is list levle 1
    • this is list level 2

      this is level 2 blockquotes
      * this is list level 2

this is levle 2 blockquotes , no tab

列表中引用Markdown其他标签,需注意符号的缩进,对齐一级,4个空格或1个tab;对齐二级,8个空格或2个tab,以此类推,不再赘述。

上面主要说明了无序列表。有序列表开始标识符号不一样,其他规则与无序列表相同。

有序列表,英文数字加英文句号(.)。

1. 有序列表1
    1.有序列表下一级
2. 有序列表2
3. 有序列表3

显示效果:

  1. 有序列表1
    1.有序列表下一级
  2. 有序列表2
  3. 有序列表3

代码块 Code Blocks

代码块引用有两种方式,一种是tab或4个空格,一种是三个`号可以标识是哪种语言。创始人约翰·格鲁伯在发布语法时只有tab或4个空格一种。

tab或4个空格格式很简单,代码开始行首加至少一个tab或4个空格,根据缩进关系可以加多个,一个tab相当4个空格,空格需要是4的倍数。

    function test (){
        console.log('this is log');
    }

显示效果

function test (){
    console.log('this is log');
}

三个`号标识开发语言的写法,javascript与前面符号之间的空格可有可无,建议不写。

​```javascript
function test (){
    console.log('this is log');
}
​```

显示效果

function test (){
    console.log('this is log');
}

水平分割线 Horizontal Rules

html中的水平分割线


,可以通过使用同一行上至少3个同一字符来实现,字符间可以有空格,这个字符包括3个分别是星号*、减号-和下划线_。

* * *
***
*******
---
_ _ _ _ _ _ _

显示效果






行元素 span elements

首先说明“行元素”这是个翻译词,是根据本部分包括的内容而来,区别于“inline element”,编写此处时暂时没想到更好更合适的词所以暂用“行元素”翻译,如果各位网友有更好的词,可以留言给我。

链接 Links

链接有两种格式,一种是行内,一种是引用。

行内的格式如下:

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

[about](/about/index.html 'about')

中括号内是链接显示的内容,也就是a标签的text,小括号(圆括号)中写链接地址(相当a的href)和链接标题(相当a的title),链接地址可以是绝对地址也可以相对地址,标题用单引号或者双引号包围。

显示效果

This is an example inline link.

This link has no title attribute.

about

链接引用的格式如下:

This is [kkxiazai][id] reference-style link.
This is [kkxiazai][ID] reference-style link.
This is [kkxiazai] [ID] reference-style link.

[id]: http://www.kkxiazai.com/  "Optional Title Here"
[id]: <http://www.kkxiazai.com/>  "Optional Title Here"
[ID]: http://www.kkxiazai.com/  'Optional Title Here'
[id]: http://www.kkxiazai.com/  (Optional Title Here)
[id]: http://www.kkxiazai.com/  
(Optional Title Here)
[kkxiazai]: http://www.kkxiazai.com 'kkxiazai'

链接引用注意以下几点:

  1. 引用时两个中括号之间不可以有空格,有空格将会各自解析
  2. id 不区分大小写
  3. 被引用的内容冒号后面要有至少有一个空格,[id]: 冒号后边要有空格
  4. 链接标题可写也可不写
  5. 链接标题可以换行
  6. 链接地址和标题中间要有空格
  7. 标题必须用单引号、双引号、小括号其中一种包围
  8. 链接地址可以用尖括号包围

额外说明:链接引用目前的语法和初始语法有些不同,但是目前的语法兼容初始语法,看下例:

初始的语法
this is [kkxiazai][] reference-style link.

目前的语法
this is [kkxiazai] reference-style link.

[kkxiazai]: http:/www.kkxiazai.com 'kkxiazai'

强调文本 Emphasis

强调文本使用星号(*)和下划线(_),单个字符包围的相当<em>,两个字符包围的相当<strong>。

*single asterisks*

_single underscores_

显示效果

single asterisks

single underscores

如果要显示文本内容中的星号(*)或者下划线(_),可以使用反斜线进行转义。

\*this text is surrounded by literal asterisks\*
\_this text is surrounded by literal asterisks\_

显示效果

*this text is surrounded by literal asterisks*

_this text is surrounded by literal asterisks_

两个字符Strong

**double asterisks**

__double underscores__

显示效果

double asterisks

double underscores

代码 Code

不同于代码块(Code Blocks)整段落引用代码,这里是指在文本内容引用的小段代码。例如:

这里我们调用了 `printf()` 函数。

显示效果:

这里我们调用了 printf() 函数。

如果引用的代码里面含有反引号`符号,引用代码开始和结束的符号可以使用两个反引号`.

``There is a literal backtick (`) here.``

显示效果:

There is a literal backtick (`) here.

如果引用的代码也包含反引号开始和结束,可以使用两个反引号加空格中间放引用的代码,如下:

A backtick-delimited string in a code span: `` `foo` ``

引用的代码foo两边也有反引号,因此在引用时使用双反引号,但是两个反引号不能和引用代码的反引号连到一起,加空格隔开就可以,显示效果:

A backtick-delimited string in a code span: `foo`

图片 Images

图片的调用格式与链接相似,也是两种,行内和引用。

行内

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

与链接不同的是要以英文感叹号开始,中括号中放的是img的alt。

引用

![Alt text][id]

[id]: url/to/image  "Optional title attribute"

Markdown中的标签没有用于指定图像尺寸的语法,如果要想指定图片大小,可以直接使用html<img>标签。

其他 miscellaneous

字符转义 Backslash Escapes

Markdown中允许使用反斜杠进行字符转义。支持转义的字符如下:

\   backslash 反斜杠
`   backtick 反引号
*   asterisk 星号
_   underscore 下划线
{}  curly braces 大括号 花括号
[]  square brackets 中括号 方括号
()  parentheses 小括号 圆括号
#   hash mark 井号
+   plus sign 加号
-   minus sign (hyphen) 减号
.   dot 点号
!   exclamation mark 叹号

自动生成链接 Automatic Links

创始人给出的语法,生成链接:

<https://www.kkxiazai.com>
<support@kkxiazai.com>

显示效果:

https://www.kkxiazai.com
support@kkxiazai.com

但是测试发现直接写地址也可以,不要两边的尖括号。

后记

时间有限,查阅了力所能及的资料,可能有理解不当之处,看到的网友如有发现与我留言或者私信,我会进行修改。谢谢。大家共同学习进步。

前一篇:
Markdown学习之一理解Markdown

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335