返回介绍

04 Markdown 段落

发布于 2020-06-06 11:00:33 字数 5290 浏览 1332 评论 0 收藏 0

1. 前言

关于 Markdown 正文的官方定义:

段落由一句或多句连续的文本组成,通过一个或多个空行分隔。(空行可能是没有任何内容的行、或者是只包含空行或制表符的行,多个空行也会显示成一个空行)。一个普通的段落不应该有空格或者制表符作为缩进。

原文出处daringfireball.net

可见,正文是文章的主体。正文通常由段落组成,段落则由缩进、换行和文本组成。

环境说明
考虑到 Markdown 工具之间的不兼容,有的内容直接从页面复制粘贴到本地不会正常显示,大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
本节所有截图除特殊说明外均为 Typora 导出为 HTML 后的渲染效果。

2. 语法详解

2.1 正文

在 Markdown 文件中,没有任何标记的文字会被解析成正文。

实例 1

### 这是标题

这是一段正文文字。

渲染效果如下:

图片描述

2.2 段落

在 Markdown 文件中,使用至少一个空行来区分段落。不同的段落在转换成 HTML 后会被包含在不同的 <p> 标签中。

实例 2

### 这是标题

这是第一段正文文字的第一句。
这是第一段正文文字的第二句。这是第一段正文文字的第三句。

这是第二段正文文字的第一句。
这是第二段正文文字的第二句。

渲染效果如下:

图片描述

2.3 不分段换行

换行是初学者很容易遇到的问题。不同于分段换行,不分段换行不是用 <p> 标签描述段落,而是用 <br> 标签折断文字。
如果要让文字另起一行而不分段,需在行尾增加两个空格。

实例 3

将上例中的 “第一段第一句” 和 “第一段第二句” 之间增加换行。

### 这是标题

这是第一段正文文字的第一句。  
这是第一段正文文字的第二句。这是第一段正文文字的第三句。

这是第二段正文文字的第一句。
这是第二段正文文字的第二句。

图片描述

渲染效果如下:

图片描述

注意:此处截图为 Typora 实时渲染效果,可以看出不分段换行处有一个下箭头提示此处有换行。在 Typora 中实现此效果需要在源代码模式下编辑(「显示」->「源代码模式」)。

2.4 缩进

Markdown 原生语法不支持缩进。

Markdown 最初为英文文章设计,而英文文章中最常见的段落排版便是 “齐头式”,也就是说每一行文字都顶头书写,各个段落之间用空行分隔。Markdown 原生语法并不支持缩进,避免因为不同段落的个性化影响整篇文章的样式一致性。

如果我们依然需要在 Markdown 文件中实现首行缩进样式,可通过以下几种方式:

实例 4

配置全局段落样式

### 这是标题

正文第一段。正文第一段。正文第一段。正文第一段。
正文第一段。正文第一段。正文第一段。正文第一段。
正文第一段。正文第一段。正文第一段。正文第一段。
正文第一段。正文第一段。正文第一段。正文第一段。
正文第一段。正文第一段。

正文第二段。正文第二段。正文第二段。正文第二段。
正文第二段。正文第二段。正文第二段。正文第二段。
正文第二段。正文第二段。正文第二段。正文第二段。
正文第二段。正文第二段。正文第二段。正文第二段。
正文第二段。正文第二段。

注意css样式放在文章最后。

<style>p{text-indent:2em}</style>

渲染结果如下:

图片描述

实例 5

使用转义字符(适用于英文)

第一段为没有缩进的英文段落,第二段为使用转义符号缩进的英文段落。

be or no to be, that is a question.

    be or no to be, that is a question.

渲染效果如下:

图片描述

实例 6

使用全角空格(适用于中文)

### 这是标题

  使用中文全角空格转义字符用于段首缩进,适合于中文文章。
正文第一段。正文第一段。正文第一段。正文第一段。
正文第一段。正文第一段。正文第一段。正文第一段。
正文第一段。正文第一段。正文第一段。

渲染效果如下:

图片描述

2.5 空白行

Markdown 原生语法不支持空行。

空行一般出现在段落之间,用于区分大段文字组织关系。段落间距的调整要通过修改文章的整体样式实现。如果我们需要在文档中插入空白行,可通过以下方式:

### 这是标题

在 Markdown 中,即使插入多个换行符,渲染时也会被合并成单一空行:

开始



结束。

#### 方法一 使用 html '<br/>' 标签实现空行插入:

开始

<br/>

结束。

#### 方法二 使用 '全角空格' 实现空行插入(注意行尾有两个空格):

开始

   

结束。

#### 方法三 使用转义字符 ' ' 实现空行插入(注意行尾有两个空格):

开始

   

结束。

渲染效果如下:
图片描述

3. 场景及应用实例

正文是每篇文章的主体,当我们的文字内容较多,层次关系复杂时,需要使用段落使文章结构更加清晰,例如:总 - 分 - 总结构等。

实例 8

使用 Markdown 对以下内容排版。

水调歌头・明月几时有【作者】苏轼 【朝代】宋 丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟。

### 水调歌头·明月几时有

#### 苏轼 / 宋

丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。

明月几时有?把酒问青天。
不知天上宫阙,今夕是何年。
我欲乘风归去,又恐琼楼玉宇,高处不胜寒。
起舞弄清影,何似在人间。

转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?
人有悲欢离合,月有阴晴圆缺,此事古难全。
但愿人长久,千里共婵娟。

<style>
  h3, h4 {text-align: center;}
  p {text-indent: 2em;}
</style>

渲染效果如下:

图片描述

4. 小结

  1. 原生的 Markdown 语法正文仅支持 “换行” 和 “分段” 的方式。我们可以通过调整全局 CSS 样式来实现段落的缩进,这样能保证文章整体样式的一致性,也可避免在写作过程中受排版问题的干扰;

  2. 当我们需要插入空行、缩进的时候,可以使用中文的全角空格、HTML 原生标签等方式;

  3. 本文 Markdown 源码使用 Atom 编辑。

Markdown 编写的文章非常重视整体性,当我们实现个性化的布局形式时,最好的办法是用 Markdown 原生支持的格式实现,最后用统一的 CSS 定义整体样式。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文