有的时候我觉得我不会 Markdown

简介: 「这是我参与2022首次更文挑战的第6天,活动详情查看:2022首次更文挑战」。

0.png


「这是我参与2022首次更文挑战的第6天,活动详情查看:2022首次更文挑战」。


前言


《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档


在优化博客的过程中,因为需要写 markdown-it 插件,翻了下 markdown 的 CommonMark Spec,突然发现对 Markdown 还远不够了解:


软换行(Soft line breaks)


换行符不在行内代码或 HTML 标签内,前面没有两个或以上的空格,将解析为软换行(Soft line breaks)。渲染为 HTML 时是一个行结束符或空格


输入:


foo
baz
复制代码


输出:


<p>foo
baz</p>
复制代码


表现:


1.png


硬换行(Hard line breaks)


换行符不在内联代码或 HTML 标签内,前面有两个或多个的空格,并且不在块的末尾, 将解析为硬换行(Hard line breaks) ,渲染为 HTML 时是一个<br /> 标签。


输入(注意 foo 后面有两个空格):


foo  
baz
复制代码


输出:


<p>foo
baz</p>
复制代码


表现:


2.png


反斜杠(backslash)


除了用于转义,在行尾的反斜杠相当于硬换行:


输入:


foo\
bar
复制代码


输出:


<p>foo
bar</p>
复制代码


行内代码(code span)


我们通常会用一对反引号包裹字符串,表示行内代码(code span)


输入:


`foo`
复制代码


输出:


<p><code>foo</code></p>
复制代码


表现:


3.png


但其实行内代码只要求内联代码以反引号串开始,以同样长度的反引号串结束。


所以用多个反引号也是可以的:


```foo```
复制代码


输出:


<p><code>foo</code></p>
复制代码


围栏式代码块(Fenced code blocks)


如果你使用了至少三个连续的反引号,并且添加了换行,就会变成围栏式代码块:


```
foo
```
复制代码


输出:


<pre><code>foo
</code></pre>
复制代码


表现:


4.png


如同行内代码,不要求必须三个反引号,只要至少三个并且前后相同就行,所以当我们想在代码块中使用三个反引号时,你可以使用四个反引号包裹:


````
```markdown
foo
```
````
复制代码


表现为:


5.png


不使用反引号,使用波浪号也是可以的,但不能混用:


~~~
foo
~~~
复制代码


输出:


<pre><code>foo
</code></pre>
复制代码


缩进式代码块(Indented code blocks)


缩进式代码块由空行隔开的数个缩进块组成。


缩进块是数个非空行,每行缩进四个或多个空格


举例一个缩进块:


a simple
      indented code block
复制代码


输出:


<pre><code>a simple
  indented code block
</code></pre>
复制代码


表现:


6.png


举例由空行隔开的数个缩进块:


chunk1
    chunk2
    chunk3
复制代码


输出:


<pre><code>chunk1
chunk2
chunk3
</code></pre>
复制代码


三个缩进块共同组成了缩进式代码块。


表现:


7.png


链接引用定义(Link reference definitions)


链接引用定义由链接标签、冒号(:)、可选的空白、链接目标、可选的空白及可选的链接标题组成。举个例子:


[foo]: /url "title"
复制代码


但这只是一个定义,并不会有任何展示,就像我们在 JavaScript 中声明了一个变量一样,如果我们要使用它:


[foo]
复制代码


输出:


<p><a href="/url" title="title">foo</a></p>
复制代码


链接引用定义不对应于某个结构元素。实际上它定义了一个标签,以用于在文档其它地方的引用链接及引用类型图像。它可以出现在引用链接的前面或后面。


当在图片中使用链接引用定义时:


![foo][bar]
[bar]: /url
复制代码


输出:


<p><img src="/url" alt="foo" /></p>
复制代码


自动链接(Autolinks)


自动链接是由尖括号(<...>)包裹的绝对 URI 与 email 地址。 它将解析为链接,以 URL 或 email 地址作为链接标签。


<http://foo.bar.baz>
复制代码


相当于:


[http://foo.bar.baz](http://foo.bar.baz)
复制代码


输出为:


<p><a href="http://foo.bar.baz">http://foo.bar.baz</a></p>
复制代码


Setext 式标题(Setext headings)


Setext 是一种轻量级标记语言,用于格式化纯文本文档,例如电子通讯,Usenet 帖子和电子邮件。与其他一些标记语言相比,该标记易于阅读,而无需任何解析或特殊软件。

Markdown 同样提供了类似的语法:


Foo *bar*
=========
Foo *bar*
---------
复制代码


输出:


<h1>Foo <em>bar</em></h1>
<h2>Foo <em>bar</em></h2>
复制代码


使用 =则是第一级标题,使用-字符则是第二级标题。底线长度任意。


水平线(Thematic breaks)


由 0-3 个空格的缩进及三或多个 -,_, * 字符组成的行,形成水平线。


输入:


***
---
___
复制代码


输出:


<hr />
<hr />
<hr />
复制代码


表现:


8.png


系列文章


博客搭建系列是我至今写的唯一一个偏实战的系列教程,预计 20 篇左右,讲解如何使用 VuePress 搭建、优化博客,并部署到 GitHub、Gitee、私有服务器等平台。本篇为第 19 篇,全系列文章地址:github.com/mqyqingfeng…


微信:「mqyqingfeng」,加我进冴羽唯一的读者群。


如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。



目录
相关文章
HTML+VUE+element-ui通过点击不同按钮展现不同页面
HTML+VUE+element-ui通过点击不同按钮展现不同页面
|
JSON Go API
GO 权限管理之 Casbin
GO 权限管理之 Casbin
519 0
|
算法 计算机视觉 开发者
OpenCV中使用Eigenfaces人脸识别器识别人脸实战(附Python源码)
OpenCV中使用Eigenfaces人脸识别器识别人脸实战(附Python源码)
675 0
|
7月前
|
人工智能 编解码 物联网
设计师集体破防!UNO:字节跳动创新AI图像生成框架,多个参考主体同框生成,位置/材质/光影完美对齐
UNO是字节跳动开发的AI图像生成框架,通过渐进式跨模态对齐和通用旋转位置嵌入技术,解决了多主体场景下的生成一致性问题。该框架支持单主体特征保持与多主体组合生成,在虚拟试穿、产品设计等领域展现强大泛化能力。
460 4
设计师集体破防!UNO:字节跳动创新AI图像生成框架,多个参考主体同框生成,位置/材质/光影完美对齐
|
8月前
|
存储 弹性计算 Cloud Native
云原生成本精细化管理实践:企迈科技的成本中心建设之路
企迈实施成本中心建设的项目核心目标不仅是实现云资源的优化配置,还要为管理层提供清晰、实时的成本数据分析,帮助管理层做出更加精准的决策。通过精细化的云成本管控,逐步实现成本降低、资源合理分配和更加高效的云产品使用。
云原生成本精细化管理实践:企迈科技的成本中心建设之路
|
NoSQL Java Redis
如何在 Java 中操作这些 Redis 数据结构的基本方法
如何在 Java 中操作这些 Redis 数据结构的基本方法
146 2
|
12月前
|
JavaScript 前端开发
Bootstrap5 侧边栏导航(Offcanvas)1
Bootstrap5 的 Offcanvas 组件提供了一种在小屏幕设备上使用的侧边栏导航方案。通过添加 `.offcanvas` 类并结合 `data-bs-toggle=&quot;offcanvas&quot;` 属性,可实现侧边栏的显示与隐藏。支持通过链接的 `href` 或按钮的 `data-bs-target` 属性进行控制。
|
11月前
|
XML 前端开发 安全
Spring MVC:深入理解与应用实践
Spring MVC是Spring框架提供的一个用于构建Web应用程序的Model-View-Controller(MVC)实现。它通过分离业务逻辑、数据、显示来组织代码,使得Web应用程序的开发变得更加简洁和高效。本文将从概述、功能点、背景、业务点、底层原理等多个方面深入剖析Spring MVC,并通过多个Java示例展示其应用实践,同时指出对应实践的优缺点。
596 2
|
数据可视化 搜索推荐 大数据
Plotly Express可视化图表
【10月更文挑战第19天】Plotly Express 是 Plotly 的高级 API,提供了一种简单直观的方法来创建各种类型的交互式图表。本文介绍了如何使用 Plotly Express 快速生成从简单散点图到复杂大数据集图表的多种可视化效果,包括安装方法、基本示例、复杂图表、动态图表和子图布局等内容。通过本文,您将学会如何利用 Plotly Express 进行高效的数据可视化。
|
机器学习/深度学习 计算机视觉 Python
`GridSearchCV` 是一种穷举搜索方法,它会对指定的参数网格中的每一个参数组合进行交叉验证,并返回最优的参数组合。
`GridSearchCV` 是一种穷举搜索方法,它会对指定的参数网格中的每一个参数组合进行交叉验证,并返回最优的参数组合。