博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSDN-MarkDown编辑器使用手册(3)--- MarkDown与html
阅读量:4114 次
发布时间:2019-05-25

本文共 1326 字,大约阅读时间需要 4 分钟。

MarkDown与html

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

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

1.1 段落

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

这里是一个段落。这里是另外一个段落。

生成的html代码为:

这里是一个段落。

这里是另外一个段落。

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

1.2 标题

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

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

会被映射为:

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题
# 这还是六级标题

1.3 列表

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

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

被映射为:

  • 无序列表项1
  • 无序列表项2

如下有序列表:

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

被映射为:

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

1.4 引用

>这里是引用

被映射为:

这里是引用

1.5 代码

这里是代码    继续代码

被映射为:

    这里是代码    继续代码

1.6 水平分割线

-------

被映射为


1.7 粗体、斜体、删除线

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

映射为:

粗体, 斜体, 粗斜体, 删除线

2 在MarkDown里书写html代码

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

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

可以嵌入任何html标签。

这在使用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, 中华人民共和国成立。

转载地址:http://idzpi.baihongyu.com/

你可能感兴趣的文章
2020前端工程师脱贫宝典,凭啥他能月薪30K+?
查看>>
浅析5种Javascript继承关系的应用
查看>>
介绍3种JavaScript重定向到另一个网页的方法
查看>>
CSS3鼠标hover图片超酷遮罩层动画特效
查看>>
【视频教程】Javascript ES6 教程03— ES6 let vs const 关键字
查看>>
【视频教程】Dart编程语言基础入门教程 - 01 前言
查看>>
JS中获取元素属性的8大方法
查看>>
除highchart和echart之外,你还应该了解一下这款JavaScript图表库
查看>>
Google Web前端大神教你如何优化Javascript性能
查看>>
2019全球编程开发语言薪资龙虎榜:Scala、Go高高在上
查看>>
推荐6款Vue管理后台框架,收藏好,留备用
查看>>
【视频教程】Dart编程语言基础入门教程 - 02 Windows 下安装 SDK
查看>>
一看就懂的VUEX运用与常见问题,BAT大佬给你把脉
查看>>
这21个React开发神器,提升工作效率必备
查看>>
【视频教程】Javascript ES6 教程04— ES6 Temporal Dead Zone 暂时性死区
查看>>
【视频教程】Dart编程语言基础入门教程 - 03 MacOS 下安装 SDK
查看>>
不等双11,立减¥3554!戴尔官网撩客服砍价带走高性能电脑,速来!
查看>>
js图片编辑器插件Filerobot
查看>>
老板说,前端人,如果没有关注这几个公众号,你可能是一个假前端!
查看>>
【视频教程】Javascript ES6 教程06— ES6 Arrow Function箭头函数 'this' 的理解
查看>>