Markdown 分割线
1. 前言
关于 Markdown 的分割线,官方给出了一下定义:
我们可以通过输入三个或更多的「减号 -
」、「星号 *
」、「下划线 -
」的方式创建一条相当于 HTML 语法中 <hr/>
一样的。这三个符号之间可以包含空格,每种类型的,可以表现为如下形式: * * *
, ***
, *****
, - - -
, ---------
。
原文出处:
是用一条明显的横线,来划分的上下两个部分,从而使排版变得美观,保持的平衡,引导读者的注意力。
环境说明:
考虑到 Markdown 工具之不兼容,有的直接从复制粘贴到本地不会正常,大家学习时自己动手写是肯定没问题的。本节所有实例及演示均使用 Typora 工具完成。
本节所有截图均为 Typora 导出为 HTML 后的渲染。
2. 语法详解
在 Markdown 中,连续的三个「星号 *
」,或者连续的三个「减号 -
」,或者连续的三个「下划线 _
」会被渲染成分割线。
实例 1:
### 下面是三类分割线使用「星号」作为分割线***使用「减号」作为分割线---使用「下划线」作为分割线___
渲染结果如下:
Markdown 的目标是整个文档的风格统一,但是既然依托于 html 语法,那我们就依然能通过 CSS 的方式定制分割线的样式。
实例 2:
分割线的粗细
### 分割线的尺寸#### 3px 宽线条___#### 5px 宽线条___#### 10px 宽线条___<style>hr:nth-of-type(1) { border-width: px !important;}hr:nth-of-type(2) { border-width: px !important;}hr:nth-of-type(3) { border-width: px !important;}</style>
渲染结果如下:
实例 3:
分割线的颜色:
### 分割线的颜色#### 红色分割线___#### 蓝色分割线___#### 半透明的黑色分割线___#### 渐变色分割线___<style>hr:nth-of-type(1) { border-color: red !important;}hr:nth-of-type(2) { border-color: #00F !important;}hr:nth-of-type(3) { border-color: #0005 !important;}hr:nth-of-type(4) { border-image: linear-gradient(to right, #F00, #0F0 , #00F , #000) !important;}</style>
渲染结果如下:
实例 4:
分割线的类型:
### 分割线的类型#### 实线___#### 虚线分割线___#### 点状分割线___#### 双线分割线___#### 凹槽分割线___#### Inset分割线___#### Outset分割线___<style>hr { border-style: none !important; border-top-width: px !important;}hr:nth-of-type(1) { border-top-style: solid !important;}hr:nth-of-type(2) { border-top-style: dashed !important;}hr:nth-of-type(3) { border-top-style: dotted !important;}hr:nth-of-type(4) { border-top-style: double !important;}hr:nth-of-type(5) { border-top-style: groove !important;}hr:nth-of-type(6) { border-top-style: ridge !important;}hr:nth-of-type(7) { border-top-style: inset !important;}hr:nth-of-type(8) { border-top-style: outset !important;}</style>
渲染结果如下:
3. 场景及应用实例
对一篇来说,分割线多见于
与正文分隔。防止过于紧凑,反而无法突出重点;
不同分隔。当我们包含多个关联性较小的时,可以用分割线来区分,这种情况在各大问答平台上很常见,比如:
~~~~~~~~~~华丽的分割线~~~~~~~~~~
实例 5:
如何用分割线区分不同主体,来源: (节选)
# 科普也要创新林群 2019年12月19日08:13 来源:人民网-人民日报___ 什么叫科普?一次我开会乘坐出租车,司机问我:“您这么大年纪了,不在家带孙辈,还到处跑,是做什么工作的?”我说:“做数学的。”想不到他立即蹦出一句:“哦,0.618。” ... 所以,做科普也可以创新,和做科研一样。 _《 人民日报 》( 2019年12月19日 19 版)____相关新闻:- [全国科学传播发展指数报告出炉](http://scitech.people.com.cn/n1/2019/0603/c1007-31116146.html)- [科学家为啥不爱做科普](http://scitech.people.com.cn/n1/2017/0307/c1007-29129143.html)
渲染结果如下:
4. 小结
分割线使用的关键字 *
、-
、_
,都包含多种语义,当我们希望分割线的时候,请注意确保该字符连续出现,并且保证至少三个,同时,该行前后不允许有别的;
使用减号 -
,用于的时候需要注意,因为减号还有二级的作用,即在一行的下面插入三个减号时,该变成二级,所以使用减号需要确保前面有一空行;
建议在中都是用下划线 _
,作为换行的输入,这样避免语义,同时与 Word 的方式更加接近。
在一篇中分割线不宜出现过多,不然会显得整体过于琐碎凌乱,缺少。分割线虽然不是使用频繁的布局工具,但在展示个性、引起读者注意等方面有非常好的,用好分割线对整体格调的提升有非常大的帮助。