童雷 ·Markdown 代码块
1. 前言
关于代码块，Markdown 作者给出的定义如下：
预格式化代码块主要用于在 Markdown 文档中显示源代码风格的内容。相比普通的文本段落，代码块可以保留文字内容的多行换行、缩进等格式。
在 Markdown 文档中生成代码块，需要在每行的开头输入不少于 4 个空格符号或者 1 个 tab 符号。
原文出处：daringfireball.net。
Markdown 作为一种排版工具语言，其作用是为了帮助我们处理一些常见的排版问题。但是我们仍有一些场景需要保留文字的原格式，例如不同的缩进、中间空格数量等。Markdown 通过代码块的方式处理需要保存格式的多行文字内容。
环境说明：
考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
2. 语法详解
2.1 代码块
在 Markdown 文件中，在行首添加 4 个连续的空格，可将行内容定义为代码块。
实例 1：
#### 使用空格定义代码块
pubic static void main(String[] args) {
System.out.println("Hello world");
}
其渲染结果如下：
注意：Typora 编辑器在默认模式（实时渲染模式）下无法通过此方法生成代码块，需要先切换到源代码模式（「显示」->「源代码模式」）后添加空格。
该源码渲染输出 html 的内容如下：
<pre>
<div><span><span>pubic static void main(String[] args) {</span></span></div>
<div><span><span> </span><span>System.out.println("Hello world");</span></span></div>
<div><span><span>}</span></span></div>
</pre>
代码块的另一种定义方式是以三个连续的 「反引号 “`”」 作为开始行和结束行。
实例 2：
#### 使用反引号定义代码块
```
pubic static void main(String[] args) {
System.out.println("Hello world");
}
```
其渲染结果如下：
在这种方式下，我们还可以声明代码的高亮样式，方法是在首行的连续的三个 「反引号 “`”」 后面加入源代码语言的标记，比如：javascript、Markdown、json、java、c++、sql 等，具体支持的种类和使用的 Markdown 编辑器或渲染程序配置有关。
实例 3：
#### 使用反引号定义代码块，并定义高亮
```java
pubic static void main(String[] args) {
System.out.println("Hello world");
}
```
其渲染结果如下：
3. 使用场景及应用实例
行内代码功能可以让我们很轻松的在文章文字内容中间增加诸如 <html> 标签的内容，而不需要手动转义。当我们编写程序说明文档时，或者其他需要在文档中插入特殊字符时，这个功能的作用会非常明显。
实例 4：
画一张字符画。
#### 一张字符画
```
.__ .__ .__ .__ .___
| |__ ____ | | | | ____ __ _ _____________| | __| _/
| | \_/ __ \| | | | / _ \ \ \/ \/ / _ \_ __ \ | / __ |
| Y \ ___/| |_| |_( <_> ) \ ( <_> ) | \/ |__/ /_/ |
|___| /\___ >____/____/\____/ \/\_/ \____/|__| |____/\____ |
\/ \/ \/
```
渲染结果如下：
4. 小结
- 当使用 4 个空格声明代码块时，转换后的代码文本会自动删除掉缩进的距离，也就是会从行首自动删掉 4 个空格，以保持格式；
- 当使用 4 个空格声明代码块时，代码块的结束声明在后面首个缩进不足 4 个空格的行；
- 常规的 Markdown 语义，比如「星号
*」在代码块中的转义作用失效。
「代码块」和「行内代码」都是方便于显示特殊字符，相比「行内代码」，「代码块」更有利于显示段落文本，表现出原文本的换行及缩进效果。
2024 imooc.com All Rights Reserved |