您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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 的方式更加接近。

在一篇中分割线不宜出现过多,不然会显得整体过于琐碎凌乱,缺少。分割线虽然不是使用频繁的布局工具,但在展示个性、引起读者注意等方面有非常好的,用好分割线对整体格调的提升有非常大的帮助。


联系我
置顶