码迷,mamicode.com
首页 > 其他好文 > 详细

CSDN-markdown基本的语法说明

时间:2017-07-11 15:59:49      阅读:2446      评论:0      收藏:0      [点我收藏+]

标签:cti   文件夹   扩展   缩进   public   amp   cut   滚动   编辑器   

文件夹


概述

简介Markdown

Markdown 是一种轻量级标记语言,它同意人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的HTML页面。 —— 来自[维基百科]

简单的来说,Markdown就是用“标记符号”表示“格式”

Markdown语法标签与HTML语法标签是一一相应的,比方Markdown的二级标题标签##就相应着HTML中的<h2>...</h2>标记,并且Markdown是兼容HTML语法的。假设你比較喜欢 HTML 的 <a><img> 标签,能够直接在Markdown文档中使用这些标记,而不用 Markdown 提供的链接或是图像标签语法。

CSDN Markdown的功能支持

CSDN Markdown编辑器是使用StackEdit改动而来的,但在StackEdit的基础上做了一些细节优化,使得体验更加友好,CSDN Markdown支持的功能非常多:

  • 实时效果预览并自己主动滚动定位到编辑处(所见即所得)
  • 支持 Markdown Extra / GitHub Flavored Markdown 扩展语法
  • 支持代码语法高亮
  • 支持 LaTeX 数学公式(基于 MathJax)
  • 支持UML序列图和流程图
  • 在线或离线管理多份 MarkDown 文档
  • 支持离线编辑
  • 支持导入在线和本地Markdown文档进行编辑
  • 能够将编辑内容导出为 Markdown,HTML文件
  • 管理已公布的文档

在这篇文章。我先介绍CSDN Markdown的基本的语法,我会从Markdown语法说明、样例、与其相应的HTML语法、样例效果、注意事项这几个方面进行具体介绍。

后面会继续介绍怎样插入图片、CSDN Markdown的扩展语法、怎样写数学公式和绘图等相关的内容。


标题

Markdown 支持两种形式的标题语法:Setext形式atx形式

Setext 形式

Markdown语法说明:

Setext 形式是採用底线的方式。利用若干个 = (最高阶标题)和 - (第二阶标题)完毕。

样例:

这是标题1
=============

这是标题2
-------------

相应的HTML语法:

<h1>这是标题1</h1>

<h2>这是标题2</h2>

效果:

这是标题1

这是标题2


注意事项:

这里#-的数目是随意的,既能够写一个也能够写多个。

atx形式

Markdown语法说明:

atx 形式则是在行首插入 1 到 6 个 # ,分别相应到标题 1 到 6 阶。

样例:

# 这是标题1

## 这是标题2

### 这是标题3

#### 这是标题4

##### 这是标题5

###### 这是标题6

转化为HTML后分别相应<h1>...<h6>这6个标记。

效果:

这是标题1

这是标题2

这是标题3

这是标题4

这是标题5
这是标题6


注意事项:

  • Setext形式的标题仅仅能表示标题1和标题2这两阶,而atx形式的标题能够表示标题1~标题6共6阶。
  • 上面#与文本之间的空格没必要的。不加也能够。但加上是个好的习惯。

  • 你能够选择性地「闭合」atx样式的标题,这纯粹仅仅是美观用的,若是觉得这样看起来比較舒适。你就能够在行尾加上 #,而行尾的 # 数量也不用和开头一样(行首的#数量决定标题的阶数)。

区块引用

Markdown语法说明:

Markdown标记区块引用是使用 > 标记。一个段落既能够仅仅用一个 >标记(放在段首,属偷懒做法),也能够在一个段落的每一行前面加上 >

样例:

> 这是一个区块引用。
与上面文本属于一个段落,因此这一行前面能够不加`>`标记。

> 因为上面空了一行。因此这是还有一个不同的段落,前面的 `>`必须加入。

> 尽管这也是还有一个不同的段落,但上面空行加了 `>`,因此这里段落之前的 `>`也能够省略。相当于上面空行的 `>`属于这个段落。

相应的HTML语法:

<blockquote>
    <p>这是一个区块引用。
    与上面文本属于一个段落,因此这一行前面能够不加`>`标记。</p>
    <p>因为上面空了一行,因此这是还有一个不同的段落,前面的 `>`必须   加入。</p>
    <p>尽管这也是还有一个不同的段落,但上面空行加了 `>`,因此这里段落之前的 `>`也能够省略,相当于上面空行的 `>`属于这个段落。

</p> </blockquote>

效果:

这是一个区块引用。
与上面文本属于一个段落,因此这一行前面能够不加>标记。

因为上面空了一行,因此这是还有一个不同的段落,前面的 >必须加入。

尽管这也是还有一个不同的段落。但上面空行加了 >,因此这里段落之前的 >也能够省略。相当于上面空行的 >属于这个段落。

注意事项:

区块引用能够嵌套使用,即引用内的引用,仅仅要依据层次加上不同数量的 > 就可以。比方两层就须要两个>

> 这是区块引用的第一层。
>
> > 这是嵌套引用,属于第二层。因此须要再加一个`>`。两个`>`之间的空格没必要的。

> > 回到区块引用的第一层。

效果为:

这是区块引用的第一层。

这是嵌套引用,属于第二层,因此须要再加一个>,两个>之间的空格没必要的。

回到区块引用的第一层。

引用的区块内也能够使用其它的Markdown语法,包括标题、列表、代码块等:

> ## 这是一个标题。

> > 1. 这是第一个列表项。 > 2. 这是第二个列表项。 > > 这是一个代码样例: > > printf("Hello, Minmin!\n"); return 0;

效果为:

这是一个标题。

  1. 这是第一个列表项。
  2. 这是第二个列表项。

这是一个代码样例:

printf("Hello, Minmin!\n"); return 0;

分隔线

Markdown语法说明:

你能够在一行中用三个或以上的星号*、减号-、底线_来建立一个分隔线,行内不能有其它东西。你也能够在星号或是减号中间插入空格。以下每种写法都能够建立一条分隔线。

样例:

* * *

***

*****

- - -

---------------------------------------

相应的HTML语法:

<hr />

效果:


注意事项:

从上面样例能够看出,三个以上的标记之间同意存在空格。并且这三种标记能够混用。仅仅要三种数量加起来大于等于3就可以,比方以下这样:

**--

-*_***--_

强调

我们知道在HTML中起到强调作用的有两个标签:<em><strong> ,关于两者的差别能够自行Google或看这篇文章「em和strong的差别」,Markdown中也有这两种强调效果,使用的是星号*和底线_这两种标记。

Markdown语法说明:

  • 使用一个 *_ 来包围词句。相当于用 <em> 标签包围(内部就是这样转化的)。
  • 使用两个 *_ 包起来的话,则相当于使用 <strong>

样例:

*使用一个星号的强调*
_使用一个 底线 的强调_

**使用两个星号的强调**
__使用两个底线 的强调__

相应的HTML语法:

<em>使用一个星号的强调</em>
<em>使用一个底线的强调</em>

<strong>使用两个星号的强调</strong>
<strong>使用两个底线的强调</strong>

效果:

使用一个星号的强调
使用一个底线的强调

使用两个星号的强调
使用两个底线 的强调

注意事项:

  • 这里的**__两个同样的符号中间不能留有空白,否则它们就仅仅会被当成普通的符号
  • 注意<em>式的强调在不同的编辑器或浏览器里可能显示效果不一样,有的通过斜体来强调,有的通过下划点线来强调。

列表

Markdown 支持有序列表和无序列表两种,且列表能够嵌套使用。

无序列表

Markdown语法说明:

无序列表使用星号、加号或是减号作为列表标记,用法例如以下:

一个星号 / 一个加号 / 一个减号 + 若干个空格 + 列表项内容

样例:

*   条目1
*   条目2
*   条目3

这等同于:

+   条目1
+   条目2
+   条目3

也等同于:

-   条目1
-   条目2
-   条目3

相应的HTML语法:

<ul>
  <li>条目1</li>
  <li>条目2</li>
  <li>条目3</li>
</ul>

效果:

  • 条目1
  • 条目2
  • 条目3

有序列表

Markdown语法说明:

有序列表则直接使用数字作为列表标记,用法例如以下:

一个数字 + 一个英文句点 + 若干个空格 + 列表项内容

样例:
1. 第1点描写叙述
2. 第2点描写叙述
3. 第3点描写叙述

相应的HTML语法:

<ol>
  <li>第1点描写叙述</li>
  <li>第2点描写叙述</li>
  <li>第3点描写叙述</li>
</ol>

效果:

  1. 第1点描写叙述
  2. 第2点描写叙述
  3. 第3点描写叙述

注意事项

(1)从有序列表所相应的HTML语法格式能够看出。你在有序列表标记上使用的数字并不会影响终于的按序输出,即假设你的列表标记写成:

1.  第1点描写叙述
1.  第2点描写叙述
1.  第3点描写叙述

或甚至是:

4.  第1点描写叙述
2.  第2点描写叙述
9.  第3点描写叙述

都会得到与上面全然同样的输出。你能够全然不用在意数字的正确性。

(2)列表标记后面一定要接着至少一个空格或制表符。否则就是普通的文本而非列表了,即以下的写法是列表不支持的:

*条目1
*条目2
*条目3

(3)假设列表条目间用空行分开,那么在输出时两个条目之间也会有一个空行。并且若有多个条目,仅仅要当中有一个空行,输出结果时全部条目之间都会出现空行,保持一致性。

比方:

*   条目1

*   条目2
*   条目3

输出效果为:

  • 条目1

  • 条目2

  • 条目3

(4)每一个列表条目下都能够包括多个段落,但这些段落都必须缩进 4 个空格或 1 个制表符:

1.  这是一个有两个段落的列表项,这是第一段。

这是第二段。段首已经缩进 4 个空格或 1 个制表符。否则就处在列表之外,自成一个普通段落,以下的列表条目也将自成还有一个不同的列表,序号从1開始。 2. 这是列表的第二个条目。

效果为:

  1. 这是一个有两个段落的列表条目,这是第一段。

    这是第二段,段首已经缩进 4 个空格或 1 个制表符。否则就处在列表之外,自成一个普通段落,以下的列表条目也将自成还有一个不同的列表,序号从1開始。

  2. 这是列表的第二个条目。

(5) 假设要在列表条目内放进引用,那 > 就须要缩进:

*   含有引用的列表项,以下是引用元素:

     > 这是一条引用。

> 前面须要缩进4个空格或1个制表符。跟段落一样。

效果为:

  • 含有引用的列表条目,以下是引用元素:

    这是一条引用。
    前面须要缩进4 个空格或 1 个制表符,跟段落一样。

(6)假设要在列表项内放代码区块的话。该区块就须要缩进两次,也就是8个空格或是2个制表符:

*   含有代码块的列表项:

        #include <stdio.h>
            int main(void) {
                printf("Hello, Minmin!\n");
                return 0;
             }
         }

效果为:

  • 含有代码块的列表项:

    #include <stdio.h>
        int main(void) {
            printf("Hello, Minmin!\n");
            return 0;
        }
    }
    

(7)避免产生不必要的列表项。
有时候。列表非常可能会不小心产生。比方以下这种写法:

1986. 这不是一个列表项。

也会产生一个以下这种列表:

  1. 这不是一个列表项。

换句话说,也就是在行首出现数字-句点-空白。要避免这种状况,你能够在句点前面加上反斜杠。具体能够查看后面的「反斜杠的用处 」一节。

1986\. 这不是一个列表项。

这样就对了:

1986. 这不是一个列表项。


链接

Markdown的链接可分为自己主动链接普通文本链接两种类型。

Markdown支持以比較简短的自己主动链接形式来处理网址和电子邮件信箱。

Markdown语法说明:

对于本身是个URL和Email的文本来说,仅仅要是用尖括号包起来,Markdown就会自己主动把它转成链接。

样例:

这是一个可点击的URL:
<http://www.csdn.net/>

这是一个可点击的Email:
<address@example.com>

相应的HTML语法:

对于上面普通的URL,Markdown会转成以下的HTML语法:

<a href="http://www.csdn.net/">http://www.csdn.net/</a>

而对于Email的自己主动链接也非常相似。仅仅是Markdown会先做一个编码转换的过程。把文字字符转成 16 进位码的 HTML 实体,这种格式能够糊弄一些不好的邮址收集机器人,比如对于上面的Email。Markdown 会转成:

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;      &#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

在浏览器里面,这段字串会终于转成以下的HTML语法:
address@example.com

效果:

这是一个可点击的URL:
http://www.csdn.net/

这是一个可点击的Email:
address@example.com

注意事项:

对于邮件的自己主动链接,使用Markdown语法尽管能够糊弄不少的机器人。但并不能全部挡下来,只是总比什么都不做好些。无论怎样。公开你的信箱终究会引来广告信件的。

Markdown支持两种形式的普通文本链接语法: 行内式參考式两种形式。

Markdown语法说明:

以下三种语法形式都是同意的:

[链接文字](链接URL ‘可选的链接title‘)
[链接文字](链接URL "可选的链接title")
[链接文字](链接URL (可选的链接title))

具体说明就是:

  • 一个方括号。里面输入链接文本。
  • 接着一个圆括号。里面能够包括两部分内容。中间用空格隔开
    • 【必须】链接的网址。
    • 【可选】链接的title文字。仅仅要用单引號、双引號或是括弧把title文字包起来就可以。加上title后。你用鼠标移到该链接文字时就会显示title文字。能够把它当作一种提示信息来用,当然你也能够不用title属性。

样例:

很多其它精彩的内容。能够訪问[敏敏的CSDN博客](http://blog.csdn.net/lanxuezaipiao/ "敏敏的博客")(有title属性) 。

想很多其它的了解敏敏,能够訪问[敏敏的新浪微博](http://weibo.com/lanxuezaipiao/) (无title属性)。

相应的HTML语法:

<p>很多其它精彩的内容。能够訪问 <a href="http://blog.csdn.net/lanxuezaipiao/" title="敏敏的博客">敏敏的CSDN博客</a>(有title属性) 。

</p> <p>想很多其它的了解敏敏,能够訪问<a href="http://weibo.com/lanxuezaipiao/">敏敏的新浪微博</a> (无title属性)。

</p>

* 效果:*

很多其它精彩的内容。能够訪问敏敏的CSDN博客 (有title属性)。

想很多其它的了解敏敏。能够訪问敏敏的新浪微博 (无title属性)。

注意事项:

假设你是要链接到同一个主机的资源。能够使用相对路径,比如:

想要进一步了解,请訪问 [About](/about/) 页。

Markdown语法说明:

[链接文字][链接id]

[链接id]: 真正的链接URL "可选的title"

能够发现參考式的链接中链接文字的后面不是一个圆括号而是还有一个方括号,在该方括号中面要填入用以辨识链接的标记。注意两个方括号之间同意有空格,接着,在文档的随意处,你能够把这个标记的链接内容定义出来。

链接内容定义的形式为:

  • 一个方括号(前面能够选择性地加上至多三个空格来缩进)。里面输入上面的链接id
  • 接着一个冒号
  • 接着一个以上的空格或制表符
  • 接着链接的网址
  • 选择性地接着 title 内容,能够用单引號、双引號或是括弧包着,与上面一样

样例:

想知道敏敏都读过哪些书、看过哪些电影吗?请进入[敏敏的豆瓣][id]来了解下吧。

[id]: http://www.douban.com/people/44971294/ "敏敏的豆瓣"

相应的HTML语法:

<p>想知道敏敏都读过哪些书、看过哪些电影吗?请进入<a href="http://blog.csdn.net/lanxuezaipiao/" title="敏敏的豆瓣">敏敏的豆瓣</a>来了解下吧。</p>

效果:

想知道敏敏都读过哪些书、看过哪些电影吗?请进入敏敏的豆瓣来了解下吧。

注意事项:

(1)有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引號包起来的链接 title,因此大家在使用时尽量选择用双引號或括弧,避免出错。

(2) 链接网址也能够用尖括号包起来,如:

[id]: <http://www.douban.com/people/44971294/>  "敏敏的豆瓣"  

(3)你也能够把 title 属性放到下一行,也能够加一些缩进,若网址太长的话。这样会比較好看:

[id]: http://blog.csdn.net/lanxuezaipiao/article/details/42554035
    "敏敏的2014年总结"

(4)网址定义仅仅有在产生链接的时候用到,并不会直接出如今文件之中。如上面的效果中没有出现[id]:这种网址定义。

(5)链接辨别标签能够有字母、数字、空白和标点符号,可是并不区分大写和小写,因此以下两个链接是一样的:

[链接文本][a]
[链接文本][A]

(6)还有一种隐式链接标记功能,能够让你省略指定链接标记,这种情形下,链接标记会视为等同于链接文字,要用隐式链接标记仅仅要在链接文字后面加上一个空的方括号,假设你要让 “Google” 链接到 google.com,你能够简化成:

[Google][]

然后定义链接内容:

[Google]: http://google.com/

(7)链接的定义能够放在文件里的不论什么一个地方。我比較偏好直接放在链接出现段落的后面。你也能够把它放在文件最后面,就像是注解一样。

以下给出一个综合性的范例,来比較下这几种链接方式的差异:

採用行内式链接的方式:

我常常逛的站点或社区有: [CSDN](http://www.csdn.net/ "CSDN")、[知乎] (http://www.zhihu.com/ "知乎")还有[豆瓣](http://www.douban.com/  "豆瓣")。

採用參考式链接的方式:

我常常逛的站点或社区有: [CSDN] [1]、[知乎] [2] 还有[豆瓣] [3]。

  [1]: http://www.csdn.net/   "CSDN"
  [2]: http://www.zhihu.com/  "知乎"
  [3]: http://www.douban.com/    "豆瓣"

採用链接名称的方式:

 我常常逛的站点或社区有: [CSDN] []、[知乎] [] 还有[豆瓣] []。

[csdn]: http://www.csdn.net/ "CSDN" [知乎]: http://www.zhihu.com/ "知乎" [豆瓣]: http://www.douban.com/ "豆瓣"

上面三种写法产生的效果都一样:

我常常逛的站点或社区有: CSDN知乎 还有豆瓣

那么如今一个问题来了:这三种写法究竟该怎样选用呢?哪种写法最好?

我个人觉得这是自己的喜好问题,你看哪个写的舒服就选用哪个方法?只是从官方来看,较推荐參考式的链接写法。

參考式的链接事实上重点不在于它比較好写,而是它比較好读,比較一下上面的范例,使用參考式的文章本身读起来非常简洁(因为链接标记单独成段了)。可是用行内形式的看起来就非常臃肿。还easy看错。

使用 Markdown 的參考式链接。能够让文件更像是浏览器最后产生的结果。让你能够把一些标记相关的元数据移到段落文字之外。你就能够添加链接而不让文章的阅读感觉被打断。


代码

关于Markdown的代码语法,以下分为行内代码代码区块两类来说明。

行内代码

Markdown语法说明:

假设要标记一小段行内代码,你能够用反引號(就是跟~在一起的那个按键)把它包起来(`)就可以:

`你要标记的行内代码`

样例:

让我们看看`printf()` 函数有哪些參数。

相应的HTML语法:

<p>让我们看看<code>printf()</code> 函数有哪些參数。</p>

效果:

让我们看看printf() 函数有哪些參数。

注意事项:

  • 假设要在行代码段内插入反引號,你能够用多个反引號来开启和结束代码段:

    这是一个反引號 (`)。

    就能正常输出反引號:

    这是一个反引號 (`)。

  • 假设要在代码段的起始处或结尾处插入一个正常的反引號,这时会有连续三个反引號连在一块的情况,且达不到想要的效果。这时就须要在代码段的起始和结束端各放入一个空白,起始端后面一个,结束端前面一个。比如:

    这是代码片段中的反引號:`

    这样就能产生想要的效果:

    这是代码片段中的反引號:`

代码区块

和程序相关的写作一般会有已经排版好的代码区块。通常这些区块我们并不希望它以一般段落文件的方式去排版(假设用一般段落的方式那么段首全部的空格都被消除了),而是照原来的样子显示,Markdown 会用 <pre><code> 标签来把代码区块包起来。

Markdown语法说明:

要在 Markdown 中建立代码区块非常简单。仅仅要简单地缩进 4 个空格或是 1 个制表符就能够。

样例:

这是一个普通段落:

    这是一个代码区块。

相应的HTML语法:

<p>这是一个普通段落:</p>

<pre><code>这是一个代码区块。

</code></pre>

这个每行一阶的缩进(4 个空格或是 1 个制表符),都会被移除。举一个具体的代码实例。

样例:

以下是一个简单的Java实例:

    public class Test{  

        public static void main (String[] args){  

            System.out.println("欢迎訪问lanxuezaipiao!

"); }

效果:

以下是一个简单的Java实例:

public class Test{  

    public static void main (String[] args){  

        System.out.println("欢迎訪问lanxuezaipiao!"); 
    }

注意事项:

在代码区块中,一般的 Markdown 语法不会被转换,像是星号便仅仅是星号。即用两个星号将一句话包围起来也不会转化为强调,这表示你能够非常easy地以 Markdown 语法撰写 Markdown 语法相关的文件,不用操心代码中包括一些特殊的Markdown语法标记。


反斜杠的用处

Markdown能够利用反斜杠来插入一些在语法中有其它意义的符号,比如:假设你想要用星号加在文字旁边的方式来做出强调效果。你能够在星号的前面加上反斜杠:

\*重点描写叙述文本\*

效果就是:*重点描写叙述文本*

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

\   反斜线
`   反引號
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井号
+   加号
-   减号
.   英文句点
!   惊叹号

常见问题

问题1:Markdown怎样加入多个空行?

我们知道Markdown的段落是由前后各一个空行形成,人为的加入多个空行会被Markdown语法自己主动忽略仅剩一个空行,这是比較人性化的,因为不须要人为删除一些多余的空行了。但两个段落之间也有须要多个空行的情况。比方上面给出一些谜题,谜底一般放在最以下,中间须要大部分的留白,这时候就须要借助HTML换行标签来达到这个目的了(前面已经提过Markdown语法是兼容HTML的):即在须要空行的地方插入 <br /> 标签或 <p> 标签。

大家假设有其它不论什么问题。能够在以下留言,我会将大家提问的问题都整理到这里来。


參考资料

CSDN-markdown基本的语法说明

标签:cti   文件夹   扩展   缩进   public   amp   cut   滚动   编辑器   

原文地址:http://www.cnblogs.com/yfceshi/p/7150674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!