程序员scholar 程序员scholar
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • 程序员日常

    • 基于jmeter完成压测
    • 在IDEA中配置Git的Push键
    • 添加 VSCode右键快捷菜单
    • Typora+PicGo搭建博客图床
    • 系统重装日记
    • MarkDown语法总览
      • 1. 标题
      • 2. 段落
      • 3. 换行
      • 4. 强调
      • 5. 块引用
        • 季度结果非常好!
      • 6. 列表
      • 7. 代码
      • 8. 分隔线
      • 9. 链接
      • 10. 图片
      • 11. 转义字符
      • 12. HTML 标签
      • 13. 使用正则表达式对Typora中的标题进行升降级
      • 14. 去除所有标题加粗
    • Markdown技巧笔记
    • 解决Win11右键菜单问题
    • 理解Project和Module
    • IntelliJ IDEA 项目结构
    • 前端免费接口
  • 开发工具
  • 程序员日常
scholar
2024-01-17
目录

MarkDown语法总览优质

# 1. 标题

要创建标题,在要作为标题的文本前面添加井号(#)。井号的数量决定了标题的级别。例如,添加三个井号可以创建一个三级标题(<h3>),例如:## 我的标题。

Markdown HTML 渲染效果
# 一级标题 <h1>一级标题</h1> 一级标题
# 二级标题 <h2>二级标题</h2> 二级标题
## 三级标题 <h3>三级标题</h3> 三级标题
### 四级标题 <h4>四级标题</h4> 四级标题
#### 五级标题 <h5>五级标题</h5> 五级标题
##### 六级标题 <h6>六级标题</h6> 六级标题

可选语法

你还可以在文本下方添加任意数量的 = 号来标识一级标题,或者 - 号来标识二级标题。

Markdown HTML 渲染效果
一级标题=============== <h1>一级标题</h1> 一级标题
二级标题--------------- <h2>二级标题</h2> 二级标题

标题使用的最佳实践

为了确保兼容性,请在井号和标题文本之间添加一个空格。

✅ 建议做法 ❌ 不建议做法
# 这是一个标题 #这是一个标题

此外,为了确保各个 Markdown 应用程序的兼容性,建议在标题的前后添加空行。

✅ 建议做法 ❌ 不建议做法
尝试在标题前后添加一个空行...# 这是一个标题...这样更清晰。 如果没有空行,可能显示效果不理想。# 这是一个标题不要这样做!

# 2. 段落

要创建段落,请使用空白行将一行或多行文本进行分隔。

Markdown HTML 渲染效果
我非常喜欢使用 Markdown。我觉得从现在开始,我将用它来格式化我的所有文档。 <p>我非常喜欢使用 Markdown。</p><p>我觉得从现在开始,我将用它来格式化我的所有文档。</p> 我非常喜欢使用 Markdown。我觉得从现在开始,我将用它来格式化我的所有文档。

段落使用的最佳实践

除非段落在列表中,否则不要用空格或制表符缩进段落。

✅ 建议做法 ❌ 不建议做法
不要在段落前面添加空格或制表符。保持文本左对齐。 这样可能会导致意外的格式问题。不要在段落前面添加空格或制表符。

# 3. 换行

要创建换行符或新行,可以在一行的末尾添加两个或多个空格,然后按回车键。

Markdown HTML 渲染效果
这是第一行。 这是第二行。 <p>这是第一行。<br>这是第二行。</p> 这是第一行。 这是第二行。

换行使用的最佳实践

大多数 Markdown 应用程序都支持通过添加两个或多个空格来创建换行(称为“结尾空格”)。但为了确保兼容性,也可以使用 HTML 的 <br> 标签来创建换行。

✅ 建议做法 ❌ 不建议做法
第一行添加两个空格后换行。 这是第二行。第一行使用 HTML 标签换行。<br>这是第二行。 第一行使用反斜杠换行。\\这是第二行。第一行没有添加任何内容直接换行。这是第二行。

# 4. 强调

通过将文本设置为粗体或斜体来强调其重要性。

粗体

要加粗文本,请在单词或短语的前后各添加两个星号(**)或下划线(__)。如需加粗一个单词或短语的中间部分,请在要加粗的部分两侧各添加两个星号。

Markdown HTML 渲染效果
我喜欢 **粗体文本**。 我喜欢 <strong>粗体文本</strong>. 我喜欢 粗体文本。
我喜欢 __粗体文本__。 我喜欢 <strong>粗体文本</strong>. 我喜欢 粗体文本。
爱**就是**粗体 爱<strong>就是</strong>粗体 爱就是粗体

粗体用法的最佳实践

Markdown 应用程序在处理单词或短语中间的下划线时存在不一致性。为了兼容性考虑,在单词或短语中间加粗时,请使用星号(**)。

✅ 建议做法 ❌ 不建议做法
爱**就是**粗体 爱__就是__粗体

斜体

要将文本显示为斜体,请在单词或短语前后添加一个星号(*)或下划线(_)。如果你需要斜体显示单词的中间部分,请在该部分前后各添加一个星号。

Markdown HTML 渲染效果
斜体文本是 *猫的叫声*。 斜体文本是 <em>猫的叫声</em>. 斜体文本是 猫的叫声。
斜体文本是 _猫的叫声_。 斜体文本是 <em>猫的叫声</em>. 斜体文本是 猫的叫声。
A*猫*叫声 A<em>猫</em>叫声 A猫叫声

斜体用法的最佳实践

Markdown 的不同应用程序在处理单词中间的下划线上意见不一致。为了兼容性考虑,请使用星号标注单词中间的斜体部分。

✅ 建议做法 ❌ 不建议做法
A*猫*叫声 A_猫_叫声

粗体和斜体

要同时将文本加粗并以斜体显示,请在单词或短语的前后各添加三个星号(***)或下划线(___)。如果你需要将单词或短语的中间部分加粗并以斜体显示,请在该部分前后各添加三个星号。

Markdown HTML 渲染效果
这段文本 ***非常重要***。 这段文本 <strong><em>非常重要</em></strong>. 这段文本 非常重要。
这段文本 ___非常重要___。 这段文本 <strong><em>非常重要</em></strong>. 这段文本 非常重要。
这段文本 __*非常重要*__。 这段文本 <strong><em>非常重要</em></strong>. 这段文本 非常重要。
这段文本 **_非常重要_**。 这段文本 <strong><em>非常重要</em></strong>. 这段文本 非常重要。
这真的***非常***重要。 这真的<strong><em>非常</em></strong>重要。 这真的***非常***重要。

粗体和斜体用法的最佳实践

Markdown 应用程序在处理单词或短语中间的下划线上存在不一致性。为了确保兼容性,建议使用星号将单词或短语的中间部分加粗并以斜体显示。

✅ 建议做法 ❌ 不建议做法
这真的***非常***重要。 这真的___非常___重要。

# 5. 块引用

要创建块引用,请在段落前添加一个 > 符号。

> 多萝西跟着她走过城堡里的许多美丽的房间。
1

渲染效果如下所示:

多萝西跟着她走过城堡里的许多美丽的房间。


多个段落的块引用

块引用可以包含多个段落。为段落之间的空白行各添加一个 > 符号。

> 多萝西跟着她走过城堡里的许多美丽的房间。
>
> 女巫命令她清洗锅碗瓢盆,扫地并保持炉火燃烧。
1
2
3

渲染效果如下:

多萝西跟着她走过城堡里的许多美丽的房间。

女巫命令她清洗锅碗瓢盆,扫地并保持炉火燃烧。


嵌套块引用

块引用可以嵌套。在要嵌套的段落前添加一个 >> 符号。

> 多萝西跟着她走过城堡里的许多美丽的房间。
>
>> 女巫命令她清洗锅碗瓢盆,扫地并保持炉火燃烧。
1
2
3

渲染效果如下:

多萝西跟着她走过城堡里的许多美丽的房间。

女巫命令她清洗锅碗瓢盆,扫地并保持炉火燃烧。


带有其他元素的块引用

块引用可以包含其他 Markdown 元素。并非所有元素都可以使用,因此你需要进行实验以查看哪些元素有效。

> ### 季度结果非常好!
>
> - 收入大幅增长。
> - 利润比以往更高。
>
>  *一切* 都按 **计划** 进行。
1
2
3
4
5
6

渲染效果如下:

# 季度结果非常好!

  • 收入大幅增长。
  • 利润比以往更高。

一切 都按 计划 进行。


块引用使用的最佳实践

为了兼容性,请在块引用的前后添加空行。

✅ 建议做法 ❌ 不建议做法
尝试在块引用的前后添加一个空行...> 这是一个块引用...这样更清晰。 如果没有空行,可能显示效果不理想。> 这是一个块引用不要这样做!

# 6. 列表

你可以将多个条目组织成有序或无序列表。

有序列表

要创建有序列表,请在每个列表项前添加数字并紧跟一个英文句点。数字不必按顺序排列,但列表应当以数字1开头。

Markdown HTML 渲染效果
1. 第一个项目 2. 第二个项目 3. 第三个项目 4. 第四个项目 <ol><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li></ol> 1. 第一个项目 2. 第二个项目 3. 第三个项目 4. 第四个项目
1. 第一个项目 1. 第二个项目 1. 第三个项目 1. 第四个项目 <ol><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li></ol> 1. 第一个项目 1. 第二个项目 1. 第三个项目 1. 第四个项目
1. 第一个项目 8. 第二个项目 3. 第三个项目 5. 第四个项目 <ol><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li></ol> 1. 第一个项目 8. 第二个项目 3. 第三个项目 5. 第四个项目
1. 第一个项目 2. 第二个项目 3. 第三个项目 1. 缩进项目 2. 缩进项目 4. 第四个项目 <ol><li>第一个项目</li><li>第二个项目</li><li>第三个项目<ol><li>缩进项目</li><li>缩进项目</li></ol></li><li>第四个项目</li></ol> 1. 第一个项目 2. 第二个项目 3. 第三个项目 1. 缩进项目 2. 缩进项目 4. 第四个项目

有序列表用法的最佳实践

CommonMark 和其他轻量级标记语言允许你使用括号 ) 作为分隔符(例如 1) 第一个项目),但并非所有 Markdown 应用程序都支持此种用法。因此,为了兼容性,建议只使用句点作为分隔符。

✅ 建议做法 ❌ 不建议做法
1. 第一个项目 2. 第二个项目 1) 第一个项目 2) 第二个项目

无序列表

要创建无序列表,请在每个列表项前面添加破折号(-)、星号(*)或加号(+)。缩进一个或多个列表项可创建嵌套列表。

Markdown HTML 渲染效果
- 第一个项目 - 第二个项目 - 第三个项目 - 第四个项目 <ul><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li></ul> - 第一个项目 - 第二个项目 - 第三个项目 - 第四个项目
* 第一个项目 * 第二个项目 * 第三个项目 * 第四个项目 <ul><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li></ul> * 第一个项目 * 第二个项目 * 第三个项目 * 第四个项目
+ 第一个项目 + 第二个项目 + 第三个项目 + 第四个项目 <ul><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li></ul> + 第一个项目 + 第二个项目 + 第三个项目 + 第四个项目
- 第一个项目 - 第二个项目 - 第三个项目 - 缩进项目 - 缩进项目 - 第四个项目 <ul><li>第一个项目</li><li>第二个项目</li><li>第三个项目<ul><li>缩进项目</li><li>缩进项目</li></ul></li><li>第四个项目</li></ul> - 第一个项目 - 第二个项目 - 第三个项目 - 缩进项目 - 缩进项目 - 第四个项目

以数字开头的无序列表项

如果你需要以数字开头并且紧跟一个句点(即 .)的无序列表项,可以使用反斜杠 \ 来转义这个句点。

Markdown HTML 渲染效果
- 1968\. 伟大的一年!- 我认为1969年是第二好的。 <ul><li>1968. 伟大的一年!</li><li>我认为1969年是第二好的。</li></ul> - 1968. 伟大的一年! - 我认为1969年是第二好的。

无序列表用法的最佳实践

Markdown 应用程序在处理同一列表中混合不同的分隔符上并不一致。为了兼容性,建议在同一个列表中使用统一的分隔符,选定一种并保持一致。

✅ 建议做法 ❌ 不建议做法
- 第一个项目 - 第二个项目 - 第三个项目 - 第四个项目 + 第一个项目 * 第二个项目 - 第三个项目 + 第四个项目

在列表中添加其他元素

要在保留列表连续性的同时在列表中添加其他元素,请将该元素缩进四个空格或一个制表符,如下例所示:

段落

- 这是第一个列表项。
- 这是第二个列表项。

    我需要在第二个列表项下添加另一段落。

- 这是第三个列表项。
1
2
3
4
5
6

渲染效果如下:

  • 这是第一个列表项。

  • 这是第二个列表项。

    我需要在第二个列表项下添加另一段落。

  • 这是第三个列表项。

引用块

- 这是第一个列表项。
- 这是第二个列表项。

    > 在第二个列表项下添加一个引用块看起来不错。

- 这是第三个列表项。
1
2
3
4
5
6

渲染效果如下:

  • 这是第一个列表项。

  • 这是第二个列表项。

    在第二个列表项下添加一个引用块看起来不错。

  • 这是第三个列表项。

代码块

代码块通常使用四个空格或一个制表符缩进。当它们被放在列表中时,请将它们缩进八个空格或两个制表符。

1. 打开文件。
2. 在第21行找到以下代码块:

        <html>
          <head>
            <title>测试</title>
          </head>

3. 将标题更新为你网站的名称。
1
2
3
4
5
6
7
8
9

渲染效果如下:

  1. 打开文件。

  2. 在第21行找到以下代码块:

     <html>
       <head>
         <title>测试</title>
       </head>
    
    1
    2
    3
    4
  3. 将标题更新为你网站的名称。

图片

1. 打开包含 Linux 吉祥物的文件。
2. 欣赏它的美丽。

    ![Tux, the Linux mascot](/assets/images/tux.png)

3. 关闭文件。
1
2
3
4
5
6

渲染效果如下:

  1. 打开包含 Linux 吉祥物的文件。

  2. 欣赏它的美丽。

    Tux, the Linux mascot

  3. 关闭文件。

嵌套列表

你可以将无序列表嵌套在有序列表中,反之亦然。

1. 第一个项目
2. 第二个项目
3. 第三个项目
    - 缩进项目
    - 缩进项目
4. 第四个项目
1
2
3
4
5
6

渲染效果如下:

  1. 第一个项目
  2. 第二个项目
  3. 第三个项目
    • 缩进项目
    • 缩进项目
  4. 第四个项目

# 7. 代码

要将单词或短语表示为代码,请将其包裹在反引号 (```) 中。

| Markdown | HTML |

渲染效果
在命令提示符下输入nano。

转义反引号

如果你要表示为代码的单词或短语中包含一个或多个反引号,则可以通过将单词或短语包裹在双反引号(```)中。

Markdown HTML 渲染效果
在你的Markdown文件中使用`code`。 <code>在你的Markdown文件中使用code。</code> 在你的Markdown文件中使用code。

代码块

要创建代码块,请将代码块的每一行缩进至少四个空格或一个制表符。

    <html>
      <head>
      </head>
    </html>
1
2
3
4

渲染效果如下:

<html>
  <head>
  </head>
</html>
1
2
3
4

注意: 要创建无需缩进的代码块,请使用围栏式代码块。


# 8. 分隔线

要创建分隔线,请在单独一行上使用三个或更多的星号 (***)、破折号 (---) 或下划线 (___),并且不能包含其他内容。

***

---

_________________
1
2
3
4
5

以上三个分隔线的渲染效果看起来都一样:


分隔线用法的最佳实践

为了兼容性,请在分隔线的前后均添加空白行。

✅ 建议做法 ❌ 不建议做法
尽量在分隔线的前后添加空白行...---...使其更清晰。 如果没有空白行,这可能会看起来像一个标题。---不要这样做!

# 9. 链接

要创建链接,请将链接文本放在方括号中(例如 [Duck Duck Go]),然后紧跟一个圆括号,里面包含 URL(例如 (https://duckduckgo.com) )。

我最喜欢的搜索引擎是 [Duck Duck Go](https://duckduckgo.com)。
1

渲染效果如下:

我最喜欢的搜索引擎是 Duck Duck Go (opens new window)。

添加标题

你可以选择为链接添加标题(即 title 属性)。当用户将鼠标悬停在链接上时,将显示一个提示。要添加标题,请将其放在 URL 后面的双引号内。

我最喜欢的搜索引擎是 [Duck Duck Go](https://duckduckgo.com "最好的隐私搜索引擎")。
1

渲染效果如下:

我最喜欢的搜索引擎是 Duck Duck Go (opens new window)。

网址和电子邮件地址

要将 URL 或电子邮件地址快速转换为链接,请将其放在尖括号中。

<https://www.markdownguide.org>
<fake@example.com>
1
2

渲染效果如下:

https://www.markdownguide.org (opens new window)
fake@example.com

格式化链接

如需强调某个链接,请在方括号前后添加星号(*)。要将链接表示为代码,请在方括号内添加反引号(`)。

我喜欢支持 **[EFF](https://eff.org)**。
这是 *[Markdown Guide](https://www.markdownguide.org)*。
查看 [`代码`](#code) 部分。
1
2
3

渲染效果如下:

我喜欢支持 EFF (opens new window)。
这是 Markdown Guide (opens new window)。
查看 代码 (opens new window) 部分。

引用式链接

引用式链接是一种特殊类型的链接,它使得 URL 在 Markdown 文档中更易于显示和阅读。引用式链接由两部分组成:一部分放在正文文本中,另一部分放在文档中的其他地方,以便于阅读。

引用式链接的第一部分格式

引用式链接的第一部分由两组方括号组成。第一组方括号内放的是显示为链接的文本,第二组方括号内放的是一个标签,用于指向文档中存放的链接。

即使不是必须的,但你可以在第一组和第二组方括号之间添加一个空格。第二组方括号中的标签不区分大小写,并且可以包含字母、数字、空格或标点符号。

以下示例中,链接的第一部分是等效的:

  • [hobbit-hole][1]
  • [hobbit-hole] [1]

引用式链接的第二部分格式

引用式链接的第二部分可以包含以下属性:

  1. 放在方括号内的标签,以及紧跟在方括号后面的一个冒号和至少一个空格(例如 [标签]:)。
  2. 链接的 URL,可以选择将其放在尖括号内。
  3. 链接的标题(可选),可以将其放在双引号、单引号或括号内。

以下示例中,链接的第二部分是等效的:

  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "霍比特人的生活方式"
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle '霍比特人的生活方式'
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (霍比特人的生活方式)
  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "霍比特人的生活方式"
  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> '霍比特人的生活方式'
  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (霍比特人的生活方式)

你可以将链接的第二部分放在 Markdown 文档中的任何位置。有些人将它们放在被引用的段落后面,有些人将它们放在文档的末尾(类似于尾注或脚注)。

将两部分组合在一起使用的示例

假设你将一个 URL 作为一个标准 URL 链接添加到段落中,在 Markdown 中如下所示:

在地洞中住着一个霍比特人。不是肮脏、潮湿的洞穴,里面充满了蠕虫的末端和粘稠的气味,也不是干燥、光秃秃的沙洞,里面没有可以坐下的地方或吃的东西:那是一个 [hobbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle "霍比特人的生活方式"),这意味着舒适。
1

虽然这个 URL 可能指向了有趣的额外信息,但显示的 URL 对原始文本并没有太多帮助,反而使其更难阅读。为了解决这个问题,你可以将 URL 格式化如下:

在地洞中住着一个霍比特人。不是肮脏、潮湿的洞穴,里面充满了蠕虫的末端和粘稠的气味,也不是干燥、光秃秃的沙洞,里面没有可以坐下的地方或吃的东西:那是一个 [hobbit-hole][1],这意味着舒适。

[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "霍比特人的生活方式"
1
2
3

在上述两个实例中,渲染后的输出是相同的:

在地洞中住着一个霍比特人。不是肮脏、潮湿的洞穴,里面充满了蠕虫的末端和粘稠的气味,也不是干燥、光秃秃的沙洞,里面没有可以坐下的地方或吃的东西:那是一个 hobbit-hole (opens new window),这意味着舒适。

该链接的 HTML 为:

<a href="https://en.wikipedia.org/wiki/Hobbit#Lifestyle" title="霍比特人的生活方式">hobbit-hole</a>
1

链接(Links)用法的最佳实践

不同的 Markdown 应用程序在处理 URL 中的空格时表现不一致。为了兼容性,请尽量使用 %20 (空格的编码形式)来代替空格。

✅ 建议做法 ❌ 不建议做法
[链接](https://www.example.com/my%20great%20page) [链接](https://www.example.com/my great page)

# 10. 图片

要添加图片,首先请添加感叹号(!),然后紧跟着是方括号,方括号中可添加替代文本(alt text),最后跟着圆括号,圆括号中添加图片资源的路径或 URL。你可以选择在圆括号中的 URL 之后添加标题(即 title 属性)。

![圣胡安山脉的美景](/assets/images/san-juan-mountains.jpg "圣胡安山脉")
1

渲染效果如下:

圣胡安山脉的美景

带链接的图片

要为图片添加链接,请先为图片的 Markdown 标记添加一个方括号,然后紧跟着一个圆括号,并在圆括号中添加链接地址。

[![沙漠中的一块老岩石](/assets/images/shiprock.jpg "Shiprock, 新墨西哥,由 Beau Rogers 拍摄")](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)
1

渲染效果如下:

沙漠中的一块老岩石 (opens new window)

# 11. 转义字符

在Markdown中,如果你希望显示原本用于格式化文档的特殊字符,可以在字符前添加反斜杠(\)。

\* 如果没有开头的反斜杠字符,这一行将显示为无序列表。
1

渲染效果如下:

* 如果没有开头的反斜杠字符,这一行将显示为无序列表。

可进行转义的字符

以下列出的字符都可以通过使用反斜杠字符进行转义。

字符 名称
\ 反斜杠
` 反引号
* 星号
_ 下划线
{ } 花括号
[ ] 方括号
< > 角括号
( ) 圆括号
# 井号
+ 加号
- 减号(连字符)
. 句点
! 感叹号
| 管道符(竖线)

# 12. HTML 标签

大多数Markdown应用程序允许在Markdown格式的文本中添加HTML标签。这在某些情况下非常有用,例如当你需要使用特定的HTML功能时(例如为文本指定颜色或更改图像的宽度)。如果你对某些HTML标签的效果更满意,也可以直接使用它们。

要使用HTML标签,只需将HTML标签直接插入Markdown文本中即可。

这个 **单词** 是加粗的。这个 <em>单词</em> 是斜体的。
1

渲染效果如下:

这个 单词 是加粗的。这个 单词 是斜体的。

HTML 用法最佳实践

出于安全原因,并非所有Markdown应用程序都支持在Markdown文档中添加HTML。如果不确定,请查看你使用的Markdown应用程序的文档。有些应用程序只支持HTML标签的子集。

对于HTML的块级元素(如<div>、<table>、<pre>和<p>),请在其前后使用空行将它们与其他内容分隔开。尽量不要使用制表符或空格对HTML标签进行缩进,否则可能会影响格式。

在HTML的块级标签内不能使用Markdown语法。例如,<p>italic and **bold**</p> 将不会正确显示为斜体和加粗。

# 13. 使用正则表达式对Typora中的标题进行升降级

在Typora中,你可能会需要对所有标题进行升级或降级,特别是当你想要将二级标题提升为一级标题,或者将三级标题提升为二级标题时,这种情况非常常见。以下是使用Visual Studio Code进行操作的步骤,同样适用于其他编辑器,如Visual Studio、IDEA等。

对所有标题升一级(从一级标题开始升级)

  • 查找:(?=(?<!#####)#)(?=#(?=\s))
  • 替换为:#

对所有标题降一级(从六级标题开始降级)

  • 查找:##(?=\s)
  • 替换为:#

正则表达式示例

注意: 请确保启用了正则表达式模式(如图中的.*标志),然后进行全部替换,保存后使用Typora打开即可看到效果。

# 14. 去除所有标题加粗

查找:(?<=^#+\s)\*\*(.+?)\*\*

替换为:$1

示例替换:

# **标题一**
## **标题二**
### **标题三**
#### **标题四**
##### **标题五**
###### **标题六**
1
2
3
4
5
6

替换后:

# 标题一
## 标题二
### 标题三
#### 标题四
##### 标题五
###### 标题六
1
2
3
4
5
6

image-20240814003134890

编辑此页 (opens new window)
上次更新: 2025/02/18, 05:49:06
系统重装日记
Markdown技巧笔记

← 系统重装日记 Markdown技巧笔记→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式