Markdown语法（二）

Markdown语法（二）

书接上文

昨天跟着教程了解了部分Markdown语法，包括标题、文本格式和列表的写法，Markdown语法（一）
今天继续，希望能一次搞定！

引用块

引用块用于突出显示重要信息、引用他人观点或创建视觉层次。

单级引用的使用

Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号：

1
2
3
> 区块引用
> 菜鸟教程
> 学的不仅是技术更是梦想

区块引用
菜鸟教程
学的不仅是技术更是梦想

多行引用的使用

简化写法：
只在第一行使用 > ，其余行会自动包含在引用中： 

1
2
3
> 这是一个长引用，
包含多行内容，
只需要在第一行使用 > 符号。

这是一个长引用，
包含多行内容，
只需要在第一行使用 > 符号。

多级嵌套引用

区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推： 

1
2
3
> 最外层
> > 第一层嵌套
> > > 第二层嵌套

最外层

第一层嵌套

第二层嵌套

区块中使用列表

1
2
3
4
5
6
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

区块中使用列表

  1. 第一项
  2. 第二项
  • 第一项
  • 第二项
  • 第三项

列表中使用区块

如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。

1
2
3
4
* 第一项
    > 菜鸟教程
    > 学的不仅是技术更是梦想
* 第二项
  • 第一项

    菜鸟教程
    学的不仅是技术更是梦想

  • 第二项

引用块内的其他元素

引用块内可以包含几乎所有其他 Markdown 元素。

1
2
3
> ## 重要提醒
> 
> 请在操作前仔细阅读文档，避免数据丢失。

重要提醒

请在操作前仔细阅读文档，避免数据丢失。

1
2
3
4
5
6
7
8
9
> ### 注意事项
> 
> 1. 备份重要数据
> 2. 检查系统兼容性
> 3. 准备回滚方案
> 
> - 测试环境验证
> - 生产环境部署
> - 监控系统状态

注意事项

  1. 备份重要数据
  2. 检查系统兼容性
  3. 准备回滚方案
  • 测试环境验证
  • 生产环境部署
  • 监控系统状态
1
2
3
4
5
6
7
8
> 要运行这个脚本，请使用以下命令：
> 
> ```bash
> npm install
> npm start
> ```
> 
> 执行后会在 `http://localhost:3000` 看到结果。

要运行这个脚本，请使用以下命令：

1
2
npm install
npm start

执行后会在 http://localhost:3000 看到结果。

1
2
3
4
5
> 📚 **推荐阅读**
> 
> 详细信息请参考 [官方文档](https://example.com)
> 
> ![示例图片](./images/siteicon/32.png)

📚 推荐阅读

详细信息请参考 官方文档

示例图片

1
2
3
4
> ✅ **成功**
> ⚠️ **警告**
> ❌ **错误**
> ℹ️ **提示**

✅ 成功
⚠️ 警告
❌ 错误
ℹ️ 提示

代码

Markdown 提供了多种方式来展示代码，从简单的行内代码到复杂的代码块，满足不同场景下的代码展示需求。

行内代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`），例如：

`printf()` 函数

printf() 函数

特殊字符转义

当需要在行内代码中显示反引号或其他特殊字符时，需要进行转义处理。
显示反引号的方法：
使用双反引号包围单反引号：

1
``使用 `反引号` 包围代码``

使用 `反引号` 包围代码

代码区块

缩进式代码块

代码区块使用 4 个空格或者一个制表符（Tab 键）。

1
2
3
4
5
6
7
正常文本段落

    这是缩进式代码块
    每行前面有四个空格
    保持代码的原始格式
    
继续正常文本

正常文本段落

这是缩进式代码块
每行前面有四个空格
保持代码的原始格式

继续正常文本

三反引号代码块

1
2
3
4
5
```
多行代码内容
可以包含空行
保持原有缩进
```
1
2
3
多行代码内容
可以包含空行
保持原有缩进

三反引号（```）是最常用的代码块语法，支持语法高亮和多行代码展示。

1
2
3
4
5
```javascript
$(document).ready(function () {
    alert('RUNOOB');
});
```
1
2
3
$(document).ready(function () {
    alert('RUNOOB');
});

在三反引号后添加语言标识符可以启用语法高亮功能。

常用语言标识符列表：

  • javascript / js - JavaScript
  • python / py - Python
  • html - HTML
  • css - CSS
  • sql - SQL
  • json - JSON
  • xml - XML
  • yaml / yml - YAML
  • bash / shell - Shell脚本
  • java - Java
  • cpp / c++ - C++
  • csharp / c# - C#
  • php - PHP
  • ruby / rb - Ruby
  • go - Go语言
  • rust - Rust
  • typescript / ts - TypeScript

示例：

1
2
3
4
5
6
7
8
9
```javascript
const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];

const adults = users.filter(user => user.age >= 18);
console.log(adults);
```
1
2
3
4
5
6
7
const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];

const adults = users.filter(user => user.age >= 18);
console.log(adults);
1
2
3
4
5
6
7
8
9
10
```python
def calculate_area(radius):
    """计算圆的面积"""
    import math
    return math.pi * radius ** 2

# 使用函数
area = calculate_area(5)
print(f"圆的面积是: {area:.2f}")
```
1
2
3
4
5
6
7
8
def calculate_area(radius):
    """计算圆的面积"""
    import math
    return math.pi * radius ** 2

# 使用函数
area = calculate_area(5)
print(f"圆的面积是: {area:.2f}")

代码块的高级特性

行号显示

某些 Markdown 渲染器支持显示行号，通过特定的语法或配置实现。（hexo配置无效，不演示）

图片转载自菜鸟教程
代码差异对比

用于显示代码的添加、删除或修改，常用于展示版本控制中的变更。（hexo配置无效，不演示）

图片转载自菜鸟教程

链接

1
2
3
4
5
6
[链接名称](链接地址)
[链接文字](链接地址 "可选的标题")
<https://www.runoob.com>
这是 [百度搜索](https://www.baidu.com "百度一下，你就知道")
markdown联系我：[发送邮件](mailto:example@email.com)
电话联系：[拨打电话](tel:+86-138-0013-8000)

链接名称
链接文字
https://www.runoob.com
这是 百度搜索
markdown联系我：发送邮件
电话联系：拨打电话

参考链接

参考式链接将链接定义与使用分离，让文档更整洁，特别适合长文档或需要多次引用相同链接的情况。

1
2
3
markdown[链接文字][参考标签]

[参考标签]: URL "可选标题"
1
2
3
4
5
6
这个链接用 1 作为网址变量 [Google][1]  
这个链接用 runoob 作为网址变量 [Runoob][runoob]  
然后在文档的结尾为变量赋值（网址）  

  [1]: http://www.google.com/
  [runoob]: http://www.runoob.com/

这个链接用 1 作为网址变量 Google
这个链接用 runoob 作为网址变量 Runoob
然后在文档的结尾为变量赋值（网址）

锚点链接的使用

hexo中我测试不生效，起码按照菜鸟的教程不生效，不知道是不是我用的主题导致的，不过本身右侧就有目录，这不重要。

1
2
3
4
5
6
7
8
9
10
11
12
13
## 目录
- [引用块](#引用块)
- [代码](#代码)
- [链接](#链接)

# 引用块
这里是引用块内容...

# 代码
这里是代码说明...

# 链接
这里是链接说明...

图片

1
2
![替代文字](图片路径)
![替代文字](图片路径 "图片标题")

替代文字
替代文字

Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 <img> 标签。

示例：
<img src="https://static.jyshare.com/images/runoob-logo.png" width="50%">
效果如下：

图片尺寸控制（HTML方式）

就是html的写法，此处不详述了。

表格

表格和引用是 Markdown 中重要的内容组织工具。
表格能够清晰地展示结构化数据，而引用则用于突出重要信息或引用他人观点。
Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
语法格式如下： 

1
2
3
4
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |
表头 表头
单元格 单元格
单元格 单元格

语法要点：

表头和数据行之间必须有分隔线
分隔线至少需要三个连字符 —
两端的竖线 | 是可选的，但建议保留以提高可读性
不需要严格对齐，但对齐后更美观

对齐方式

我们可以设置表格的对齐方式：

  • —: 设置内容和标题栏居右对齐。
  • :— 设置内容和标题栏居左对齐。
  • :—: 设置内容和标题栏居中对齐。
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

复杂表格

在github上的很多项目，经常看到这样子的表格

功能 描述 状态
用户登录 支持邮箱和手机号登录 ✅
密码重置 通过邮箱重置密码 ⚠️
API接口 RESTful API 设计 ✅
文档链接 查看详细文档 📖

它的写法：

1
2
3
4
5
6
| 功能 | 描述 | 状态 |
|------|------|:----:|
| **用户登录** | 支持邮箱和手机号登录 | &#x2705; |
| *密码重置* | 通过邮箱重置密码 | &#x26a0;&#xfe0f; |
| `API接口` | RESTful API 设计 | &#x2705; |
| [文档链接](https://example.com) | 查看详细文档 | &#x1f4d6; |

单元格中的文本过长，可以使用 </br> html标签来换行。

Markdown 高级技巧

支持的 HTML 元素

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。
目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
使用 Ctrl+Alt+Del 重启电脑

转义

Markdown 使用反斜杠转义特殊字符： 

1
2
**文本加粗**
\*\* 正常显示星号 \*\*

文本加粗
** 正常显示星号 **

其他语法

这些工作中不太用得上，而且我在hexo中实践，也不生效。留个菜鸟的教程链接，备查吧。