CSDN-MarkDown编辑器使用手册(3)--- MarkDown与html

MarkDown与html

  • MarkDown与html
    • MarkDown标签与HTML标签的对应关系
      • 1 段落
      • 2 标题
      • 3 列表
      • 4 引用
      • 5 代码
      • 6 水平分割线
      • 7 粗体斜体删除线
    • 在MarkDown里书写html代码
    • 需要注意的问题
      • 1 MarkDown的自动转义
      • 2 转义

1 MarkDown标签与HTML标签的对应关系

尽管纯MarkDown文件已经具有很好的可读性了,但是如果要在Web上发布,还是要转换为html代码。本节我们将分析MarkDown的各种标签是如何映射到html标签的。

1.1 段落

在MarkDown里,段落之间的分界是一个或者多个连续的空行。每当遇到段落分界,就会形成一个<p></p>标签。如下所示:

这里是一个段落。


这里是另外一个段落。

生成的html代码为:

<p>这里是一个段落。</p>

<p>这里是另外一个段落。</p>

这里是针对非块元素的,块元素本身映射到html的块元素,不需要段落的概念。

1.2 标题

MarkDown的六级标题分别映射到html的<h1><h2><h3><h4><h5><h6>,如下所示:

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题
####### 这还是六级标题

会被映射为:

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h6># 这还是六级标题</h6>

1.3 列表

无序列表被映射为<ul>元素,有序列表被映射为<ol>元素。如下

+ 无序列表项1
+ 无序列表项2

被映射为:

<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>

如下有序列表:

1. 有序列表项1
2. 有序列表项2

被映射为:

<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>

1.4 引用

>这里是引用

被映射为:

<blockquote>
  <p>这里是引用</p>
</blockquote>

1.5 代码

    这里是代码
    继续代码

被映射为:

<pre><code>    这里是代码
    继续代码
</code></pre>

1.6 水平分割线

-------

被映射为

<hr />

1.7 粗体、斜体、删除线

**粗体**, *斜体*, ***粗斜体***, ~~删除线~~

映射为:

<strong>粗体</strong>, <em>斜体</em>, <strong><em>粗斜体</em></strong>, <s>删除线</s>

2 在MarkDown里书写html代码

MarkDown直接支持html,就像php直接支持html一样。我们可以直接书写html代码,如下。

这是演示在MarkDown编辑器里直接输入html代码。粗体

<div>
    可以嵌入任何html标签。
</div>

这在使用html具有而markdown尚不支持的功能时特别有用。

3 需要注意的问题

3.1 MarkDown的自动转义

MarkDown解释引擎会自动转义html实体。如

AT&T会被自动映射为 AT&amp;T 。而AT&amp;T则原样输出。具体规则是:

  • 在普通位置,MarkDown解释引擎足够智能来识别出是否是html实体编码,如果是则原样输出,如果不是则进行实体编码;(智能处理
  • 在代码片段或者代码块内,所有的&和<都被进行实体编码;(全部处理)
  • 在html块内,&和<都是原样输出,不做处理。(全不处理)

3.2 转义

有时候需要对markdown的标签进行转义,如:

1949. 10. 1, 中华人民共和国成立。

会被当成有序列表来处理,而作者的原意显然不是如此。为了正确显示,需要改写为:

1949\. 10. 1, 中华人民共和国成立。

你可能感兴趣的:(markdown)