docs: update docs
This commit is contained in:
parent
7d7dede526
commit
7489a81537
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 95 KiB |
@ -13,9 +13,33 @@ export const theme: Theme = themePlume({
|
||||
url: '/plume.png',
|
||||
name: 'Plume Theme',
|
||||
description: 'The Theme for Vuepress 2.0',
|
||||
location: 'Guangzhou, China',
|
||||
organization: 'pengzhanbo',
|
||||
},
|
||||
|
||||
social: [{ icon: 'github', link: 'https://github.com/pengzhanbo/vuepress-theme-plume' }],
|
||||
social: [
|
||||
{ icon: 'github', link: 'https://github.com/pengzhanbo/vuepress-theme-plume' },
|
||||
{ icon: 'gitlab', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'npm', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'docker', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'stackoverflow', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'juejin', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'discord', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'instagram', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'mastodon', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'slack', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'bilibili', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'linkedin', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'qq', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'twitter', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'x', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'weibo', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'youtube', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'zhihu', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'douban', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'steam', link: 'https://pengzhanbo.cn' },
|
||||
{ icon: 'xbox', link: 'https://pengzhanbo.cn' },
|
||||
],
|
||||
|
||||
footer: { copyright: 'Copyright © 2021-present pengzhanbo' },
|
||||
|
||||
|
||||
831
docs/1.示例/markdown基础.md
Normal file
831
docs/1.示例/markdown基础.md
Normal file
@ -0,0 +1,831 @@
|
||||
---
|
||||
title: Markdown 基础
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 22:43:52
|
||||
permalink: /article/mcz1csb4/
|
||||
tags:
|
||||
- markdown
|
||||
- 教程
|
||||
---
|
||||
|
||||
Markdown 是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。
|
||||
|
||||
Markdown 的目标是实现「易读易写」。
|
||||
|
||||
<!-- more -->
|
||||
|
||||
## 概述
|
||||
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈,并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6],然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
|
||||
因此 Markdown 的语法全由标点符号所组成,并经过严谨慎选,是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号,看起来就像\*强调\*。Markdown 的列表看起来,嗯,就是列表。假如你有使用过电子邮件,引言写法看起来就真的像是引用一段文字。
|
||||
|
||||
Markdown 具有一系列衍生版本,用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ,这些功能原初的 Markdown 尚不具备,它们能让 Markdown 转换成更多的格式,例如 LaTeX,Docbook。Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具,如 Pandoc;要么基于网站,如 GitHub 和 Wikipedia,在语法上基本兼容,但在一些语法和渲染效果上有改动。
|
||||
|
||||
## 用途
|
||||
|
||||
Markdown 的语法有个主要的目的: 用来作为一种网络内容的*写作*用语言。Markdown 的重点在于,它能让文件更容易阅读、编写。因此,Markdown 的格式语法只涵盖纯文字可以涵盖的范围。
|
||||
|
||||
Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强,因此有很多人用它写博客。世界上最流行的博客平台 WordPress 能很好的支持 Markdown。
|
||||
|
||||
用于编写说明文档,并且以 `README.md` 的文件名保存在软件的目录下面。
|
||||
|
||||
除此之外,我们还可以快速将 Markdown 转化为演讲 PPT、Word 产品文档、LaTex 论文甚至是用非常少量的代码完成最小可用原型。在数据科学领域,Markdown 已经广泛使用,极大地推进了动态可重复性研究的历史进程。
|
||||
|
||||
### 行内 HTML
|
||||
|
||||
不在 Markdown 涵盖范围之外的标签,都可以直接在文件里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown;只要直接加标签就可以了。
|
||||
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签,必须在前后加上空行,以利与内容区隔。而且这些 (元素) 的开始与结尾标签,不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断,可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
|
||||
举例来说,在 Markdown 文件里加上一段 HTML 表格:
|
||||
|
||||
```md
|
||||
This is a regular paragraph.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>Foo</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
This is another regular paragraph.
|
||||
```
|
||||
|
||||
请注意,Markdown 语法在 HTML 块标签中将不会被进行处理。例如,你无法在 HTML 块内使用 Markdown 形式的 `*强调*`。
|
||||
|
||||
### 特殊字元自动转换
|
||||
|
||||
在 HTML 文件中,有两个字元需要特殊处理: `<` 和 `&` 。 `<` 符号用于起始标签,`&` 符号则用于标记 HTML 实体,如果你只是想要使用这些符号,你必须要使用实体的形式,像是 `<` 和 `&`。
|
||||
|
||||
`&` 符号其实很容易让写作网络文件的人感到困扰,如果你要打「AT&T」 ,你必须要写成「`AT&T`」 ,还得转换网址内的 `&` 符号,如果你要链接到 `http://images.google.com/images?num=30&q=larry+bird`
|
||||
|
||||
你必须要把网址转成:
|
||||
|
||||
```html
|
||||
http://images.google.com/images?num=30&q=larry+bird
|
||||
```
|
||||
|
||||
才能放到链接标签的 `href` 属性里。不用说也知道这很容易忘记,这也可能是 HTML 标准检查所检查到的错误中,数量最多的。
|
||||
|
||||
Markdown 允许你直接使用这些符号,但是你要小心跳脱字元的使用,如果你是在 HTML 实体中使用 `&` 符号的话,它不会被转换,而在其它情形下,它则会被转换成 `&`。所以你如果要在文件中插入一个著作权的符号,你可以这样写:
|
||||
|
||||
```md
|
||||
©
|
||||
```
|
||||
|
||||
Markdown 将不会对这段文字做修改,但是如果你这样写:
|
||||
|
||||
```md
|
||||
AT&T
|
||||
```
|
||||
|
||||
Markdown 就会将它转为:
|
||||
|
||||
```html
|
||||
AT&T
|
||||
```
|
||||
|
||||
类似的状况也会发生在 `<` 符号上,因为 Markdown 支持 [行内 HTML](#行内-html) ,如果你是使用 `<` 符号作为 HTML 标签使用,那 Markdown 也不会对它做任何转换,但是如果你是写:
|
||||
|
||||
```md
|
||||
4 < 5
|
||||
```
|
||||
|
||||
Markdown 将会把它转换为:
|
||||
|
||||
```html
|
||||
4 < 5
|
||||
```
|
||||
|
||||
不过需要注意的是,code 范围内,不论是行内还是块, `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体,这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言, HTML 语法中,你要把所有的 `<` 和 `&` 都转换为 HTML 实体,才能在 HTML 文件里面写出 HTML code。)
|
||||
|
||||
---
|
||||
|
||||
## 块元素
|
||||
|
||||
### 段落和换行
|
||||
|
||||
一个段落是由一个以上相连接的行句组成,而一个以上的空行则会切分出不同的段落 (空行的定义是显示上看起来像是空行,便会被视为空行。比方说,若某一行只包含空白和 tab,则该行也会被视为空行) ,一般的段落不需要用空白或断行缩进。
|
||||
|
||||
「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行,这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ,其它的格式会把每个断行都转成 `<br />` 标签。
|
||||
|
||||
<!-- markdownlint-disable MD038 -->
|
||||
|
||||
如果你*真的*想要插入 `<br />` 标签的话,在行尾加上两个以上的空格 (` `) 或斜线 (`/`),然后按 Enter。
|
||||
|
||||
<!-- markdownlint-enable MD038 -->
|
||||
|
||||
是的,这确实需要花比较多功夫来插入 `<br />` ,但是「每个换行都转换为 `<br />`」的方法在 Markdown 中并不适合, Markdown 中 email 式的 [块引言][bq] 和多段落的 [列表][l] 在使用换行来排版的时候,不但更好用,还更好阅读。
|
||||
|
||||
### 标题
|
||||
|
||||
标题能显示出文章的结构。
|
||||
|
||||
Markdown 支持两种标题的语法,[Setext][1] 和 [atx][2] 形式。
|
||||
|
||||
Setext 形式是用底线的形式,利用 `=` (最高阶标题) 和 `-` (第二阶标题) ,例如:
|
||||
|
||||
```md
|
||||
# This is an H1
|
||||
|
||||
## This is an H2
|
||||
```
|
||||
|
||||
任何数量的 `=` 和 `-` 都可以有效果。
|
||||
|
||||
Atx (推荐)形式则是在行首插入 1 到 6 个 `#` ,对应到标题 1 到 6 阶,例如:
|
||||
|
||||
- H1: `# Header 1`
|
||||
- H2: `## Header 2`
|
||||
- H3: `### Header 3`
|
||||
- H4: `#### Header 4`
|
||||
- H5: `##### Header 5`
|
||||
- H6: `###### Header 6`
|
||||
|
||||
### Blockquotes
|
||||
|
||||
Markdown 使用 email 形式的块引言,如果你很熟悉如何在 email 信件中引言,你就知道怎么在 Markdown 文件中建立一个块引言,那会看起来像是你强迫断行,然后在每行的最前面加上 `>` :
|
||||
|
||||
```md
|
||||
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
||||
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
||||
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
|
||||
>
|
||||
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
||||
> id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
Markdown 也允许你只在整个段落的第一行最前面加上 `>` :
|
||||
|
||||
```md
|
||||
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
||||
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
||||
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
|
||||
|
||||
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
||||
> id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
块引言可以有阶层 (例如: 引言内的引言) ,只要根据层数加上不同数量的 `>` :
|
||||
|
||||
```md
|
||||
> This is the first level of quoting.
|
||||
>
|
||||
> > This is nested blockquote.
|
||||
>
|
||||
> Back to the first level.
|
||||
```
|
||||
|
||||
引言的块内也可以使用其他的 Markdown 语法,包括标题、列表、代码块等:
|
||||
|
||||
```md
|
||||
> ## This is a header.
|
||||
>
|
||||
> 1. This is the first list item.
|
||||
> 1. This is the second list item.
|
||||
>
|
||||
> Here's some example code:
|
||||
>
|
||||
> return shell_exec("echo $input | $markdown_script");
|
||||
```
|
||||
|
||||
任何标准的文字编辑器都能简单地建立 email 样式的引言,例如 BBEdit ,你可以选取文字后然后从选单中选择*增加引言阶层*。
|
||||
|
||||
### 列表
|
||||
|
||||
Markdown 支持有序列表和无序列表。
|
||||
|
||||
无序列表使用减号作为列表标记(也可使用星号、加号):
|
||||
|
||||
```md
|
||||
- Red
|
||||
- Green
|
||||
- Blue
|
||||
```
|
||||
|
||||
也可以(不建议):
|
||||
|
||||
```md
|
||||
- Red
|
||||
- Green
|
||||
- Blue
|
||||
|
||||
* Red
|
||||
* Green
|
||||
* Blue
|
||||
```
|
||||
|
||||
有序列表则使用数字接着一个英文句点:
|
||||
|
||||
```md
|
||||
1. Bird
|
||||
2. McHale
|
||||
3. Parish
|
||||
```
|
||||
|
||||
很重要的一点是,你在列表标记上使用的数字并不会影响输出的 HTML 结果,上面的列表所产生的 HTML 标记为:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Bird</li>
|
||||
<li>McHale</li>
|
||||
<li>Parish</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
如果你的列表标记写成:
|
||||
|
||||
```md
|
||||
1. Bird
|
||||
1. McHale
|
||||
1. Parish
|
||||
```
|
||||
|
||||
你都会得到完全相同的 HTML 输出。重点在于,你可以让 Markdown 文件的列表数字和输出的结果相同,或是你懒一点都写作 `1` 你可以完全不用在意数字的正确性。
|
||||
|
||||
列表项目标记通常是放在最左边,但是其实也可以缩进,最多三个空白,项目标记后面则一定要接着至少一个空白或 tab。
|
||||
|
||||
要让列表看起来更漂亮,你可以把内容用固定的缩进整理好:
|
||||
|
||||
```md
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
|
||||
viverra nec, fringilla in, laoreet vitae, risus.
|
||||
- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
|
||||
Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
但是如果你很懒,那也不一定需要:
|
||||
|
||||
```md
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
|
||||
viverra nec, fringilla in, laoreet vitae, risus.
|
||||
- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
|
||||
Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
如果列表项目间用空行分开, Markdown 会把项目的内容在输出时用 `<p>` 标签包起来,举例来说:
|
||||
|
||||
```md
|
||||
- Bird
|
||||
- Magic
|
||||
```
|
||||
|
||||
会被转换为:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Bird</li>
|
||||
<li>Magic</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
但是这个:
|
||||
|
||||
```md
|
||||
- Bird
|
||||
|
||||
- Magic
|
||||
```
|
||||
|
||||
会被转换为:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li><p>Bird</p></li>
|
||||
<li><p>Magic</p></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
列表项目可以包含多个段落,每个项目下的段落都必须缩进 4 个空白或是一个 tab :
|
||||
|
||||
```md
|
||||
1. This is a list item with two paragraphs. Lorem ipsum dolor
|
||||
sit amet, consectetuer adipiscing elit. Aliquam hendrerit
|
||||
mi posuere lectus.
|
||||
|
||||
Vestibulum enim wisi, viverra nec, fringilla in, laoreet
|
||||
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
|
||||
sit amet velit.
|
||||
|
||||
2. Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
如果你每行都有缩进,看起来会看好很多,当然,再次地,如果你很懒惰,Markdown 也允许:
|
||||
|
||||
```md
|
||||
- This is a list item with two paragraphs.
|
||||
|
||||
This is the second paragraph in the list item. You're
|
||||
only required to indent the first line. Lorem ipsum dolor
|
||||
sit amet, consectetuer adipiscing elit.
|
||||
|
||||
- Another item in the same list.
|
||||
```
|
||||
|
||||
如果要在列表项目内放进引言,那 `>` 就需要缩进:
|
||||
|
||||
```md
|
||||
- A list item with a blockquote:
|
||||
|
||||
> This is a blockquote
|
||||
> inside a list item.
|
||||
```
|
||||
|
||||
当然,项目列表很可能会不小心产生,像是下面这样的写法:
|
||||
|
||||
```md
|
||||
1986. What a great season.
|
||||
```
|
||||
|
||||
换句话说,也就是在行首出现*数字-句点-空白*,要避免这样的状况,你可以在句点前面加上反斜线。
|
||||
|
||||
```md
|
||||
1986\. What a great season.
|
||||
```
|
||||
|
||||
### 代码块
|
||||
|
||||
和代码相关的写作或是标签语言原始码通常会有已经排版好的代码块,通常这些块我们并不希望它以一般段落文件的方式去排版,而是照原来的样子显示,Markdown 会用 `<pre>` 和 `<code>` 标签来把代码块包起来。
|
||||
|
||||
要在 Markdown 中建立代码块很简单,只要简单地缩进 4 个空白或是 1 个 tab 就可以,例如,下面的输入:
|
||||
|
||||
```md
|
||||
This is a normal paragraph:
|
||||
|
||||
This is a code block.
|
||||
```
|
||||
|
||||
Markdown 会转换成:
|
||||
|
||||
```html
|
||||
<p>This is a normal paragraph:</p>
|
||||
|
||||
<pre>
|
||||
<code>This is a code block.</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
这里的缩进 (4 个空白或是 1 个 tab) ,都会被移除,例如:
|
||||
|
||||
```md
|
||||
Here is an example of AppleScript:
|
||||
|
||||
tell application "Foo"
|
||||
beep
|
||||
end tell
|
||||
```
|
||||
|
||||
会被转换为:
|
||||
|
||||
```html
|
||||
<p>Here is an example of AppleScript:</p>
|
||||
|
||||
<pre><code>tell application "Foo"
|
||||
beep
|
||||
end tell
|
||||
</code></pre>
|
||||
```
|
||||
|
||||
一个代码块会一直持续到没有缩进的那一行 (或是文件结尾) 。
|
||||
|
||||
在代码块里面, `&` 、 `<` 和 `>` 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制粘贴,再加上缩进就可以了,剩下的 Markdown 都会帮你处理,例如:
|
||||
|
||||
````md
|
||||
```
|
||||
<div class="footer">
|
||||
© 2004 Foo Corporation
|
||||
</div>
|
||||
```
|
||||
````
|
||||
|
||||
会被转换为:
|
||||
|
||||
```html
|
||||
<pre>
|
||||
<code><div class="footer">
|
||||
&copy; 2004 Foo Corporation
|
||||
</div></code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
代码块中,一般的 Markdown 语法不会被转换,像是星号便只是星号,这表示你可以很容易地以 Markdown 语法撰写 Markdown 语法相关的文件。
|
||||
|
||||
如果你想要在代码块里输入用 Markdown 表示的代码库,你可以进行嵌套。
|
||||
|
||||
`````md
|
||||
````md
|
||||
```js
|
||||
const a = 1
|
||||
```
|
||||
````
|
||||
`````
|
||||
|
||||
会渲染为
|
||||
|
||||
````md
|
||||
```js
|
||||
const a = 1
|
||||
```
|
||||
````
|
||||
|
||||
### 分隔线
|
||||
|
||||
你可以在一行中用三个或以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号中间插入空白。下面每种写法都可以建立分隔线:
|
||||
|
||||
```html
|
||||
---(建议) * * * *** ***** - - - ---------------------------------------
|
||||
```
|
||||
|
||||
## 行内元素
|
||||
|
||||
### 链接
|
||||
|
||||
Markdown 支持两种形式的链接语法: *行内*和*参考*两种形式。
|
||||
|
||||
不管是哪一种,链接的文字都是用 `[方括号]` 来标记。
|
||||
|
||||
要建立一个行内形式的链接,只要在方块括号后面马上接着括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可,例如:
|
||||
|
||||
```html
|
||||
This is [an example](http://example.com/ "Title") inline link. [This
|
||||
link](http://example.net/) has no title attribute.
|
||||
```
|
||||
|
||||
会产生:
|
||||
|
||||
```html
|
||||
<p>
|
||||
This is <a href="http://example.com/" title="Title"> an example</a> inline
|
||||
link.
|
||||
</p>
|
||||
|
||||
<p><a href="http://example.net/">This link</a> has no title attribute.</p>
|
||||
```
|
||||
|
||||
如果你是要链接到同样主机的资源,你可以使用相对路径:
|
||||
|
||||
```md
|
||||
See my [About](/about/) page for details.
|
||||
```
|
||||
|
||||
参考形式的链接使用另外一个方括号接在链接文字的括号后面,而在第二个方括号里面要填入用以辨识链接的标签:
|
||||
|
||||
```md
|
||||
This is [an example][id] reference-style link.
|
||||
```
|
||||
|
||||
接着,在文件的任意处,你可以把这个标签的链接内容定义出来:
|
||||
|
||||
```md
|
||||
[id]: http://example.com/ "Optional Title Here"
|
||||
```
|
||||
|
||||
链接定义的形式为:
|
||||
|
||||
- 方括号,输入链接的标识 ID
|
||||
- 冒号
|
||||
- 一个以上的空白或 tab
|
||||
- 链接的网址
|
||||
- 选择性地添加 title 内容,可以用单引号、双引号或是括号包括
|
||||
|
||||
下面这三种链接的定义相同:
|
||||
|
||||
```md
|
||||
[foo]: http://example.com/ "Optional Title Here"
|
||||
[foo]: http://example.com/ "Optional Title Here"
|
||||
[foo]: http://example.com/ "Optional Title Here"
|
||||
```
|
||||
|
||||
**请注意:** 有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的链接 title。
|
||||
|
||||
链接网址也可以用方括号包起来:
|
||||
|
||||
```md
|
||||
[id]: http://example.com/ "Optional Title Here"
|
||||
```
|
||||
|
||||
你也可以把 title 属性放到下一行,也可以加一些缩进,网址太长的话,这样会比较好看:
|
||||
|
||||
```md
|
||||
[id]: http://example.com/longish/path/to/resource/here "Optional Title Here"
|
||||
```
|
||||
|
||||
网址定义只有在产生链接的时候用到,并不会直接出现在文件之中。
|
||||
|
||||
链接辨识标签可以有字母、数字、空白和标点符号,但是并**不**区分大小写,因此下面两个链接是一样的:
|
||||
|
||||
```md
|
||||
[link text][a]
|
||||
[link text][a]
|
||||
```
|
||||
|
||||
*预设的链接标签*功能让你可以省略指定链接标签,这种情形下,链接标签和链接文字会视为相同,要用预设链接标签只要在链接文字后面加上一个空的方括号,如果你要让 "Google" 链接到 google.com,你可以简化成:
|
||||
|
||||
```md
|
||||
[Google][]
|
||||
```
|
||||
|
||||
然后定义链接内容:
|
||||
|
||||
```md
|
||||
[google]: http://google.com/
|
||||
```
|
||||
|
||||
由于链接文字可能包含空白,所以这种简化的标签内也可以包含多个文字:
|
||||
|
||||
```md
|
||||
Visit [Daring Fireball][] for more information.
|
||||
```
|
||||
|
||||
然后接着定义链接:
|
||||
|
||||
```md
|
||||
[daring fireball]: http://daringfireball.net/
|
||||
```
|
||||
|
||||
链接的定义可以放在文件中的任何一个地方,我比较偏好直接放在链接出现段落的后面,你也可以把它放在文件最后面,就像是注解一样。
|
||||
|
||||
下面是一个参考式链接的范例:
|
||||
|
||||
```md
|
||||
I get 10 times more traffic from [Google][1] than from
|
||||
[Yahoo][2] or [MSN][3].
|
||||
|
||||
[1]: http://google.com/ "Google"
|
||||
[2]: http://search.yahoo.com/ "Yahoo Search"
|
||||
[3]: http://search.msn.com/ "MSN Search"
|
||||
```
|
||||
|
||||
如果改成用链接名称的方式写:
|
||||
|
||||
```md
|
||||
I get 10 times more traffic from [Google][] than from
|
||||
[Yahoo][] or [MSN][].
|
||||
|
||||
[google]: http://google.com/ "Google"
|
||||
[yahoo]: http://search.yahoo.com/ "Yahoo Search"
|
||||
[msn]: http://search.msn.com/ "MSN Search"
|
||||
```
|
||||
|
||||
上面两种写法都会产生下面的 HTML。
|
||||
|
||||
```html
|
||||
<p>
|
||||
I get 10 times more traffic from
|
||||
<a href="http://google.com/" title="Google">Google</a> than from
|
||||
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
|
||||
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.
|
||||
</p>
|
||||
```
|
||||
|
||||
下面是用行内形式写的同样一段内容的 Markdown 文件,提供作为比较之用:
|
||||
|
||||
```md
|
||||
I get 10 times more traffic from [Google](http://google.com/ "Google")
|
||||
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
|
||||
[MSN](http://search.msn.com/ "MSN Search").
|
||||
```
|
||||
|
||||
参考式的链接其实重点不在于它比较好写,而是它比较好读,比较一下上面的范例,使用参考式的文章本身只有 81 个字元,但是用行内形式的链接却会增加到 176 个字元,如果是用纯 HTML 格式来写,会有 234 个字元,在 HTML 格式中,标签比文字还要多。
|
||||
|
||||
使用 Markdown 的参考式链接,可以让文件更像是浏览器最后产生的结果,让你可以把一些标记相关的资讯移到段落文字之外,你就可以增加链接而不让文章的阅读感觉被打断。
|
||||
|
||||
### 强调
|
||||
|
||||
Markdown 使用星号 (`*`) 和底线 (`_`) 作为标记强调字词的符号,被 `*` 或 `_` 包围的字词会被转成用 `<em>` 标签包围,用两个 `*` 或 `_` 包起来的话,则会被转成 `<strong>`,例如:
|
||||
|
||||
```md
|
||||
**double asterisks** (建议)
|
||||
|
||||
**double underscores** (建议)
|
||||
|
||||
_single asterisks_
|
||||
|
||||
_single underscores_
|
||||
```
|
||||
|
||||
会转成:
|
||||
|
||||
```html
|
||||
<em>single asterisks</em>
|
||||
|
||||
<em>single underscores</em>
|
||||
|
||||
<strong>double asterisks</strong>
|
||||
|
||||
<strong>double underscores</strong>
|
||||
```
|
||||
|
||||
你可以随便用你喜欢的样式,唯一的限制是,你用什么符号开启标签,就要用什么符号结束。
|
||||
|
||||
强调也可以直接插在文字中间:
|
||||
|
||||
```md
|
||||
un*frigging*believable
|
||||
```
|
||||
|
||||
但是如果你的 `*` 和 `_` 两边都有空白的话,它们就只会被当成普通的符号。
|
||||
|
||||
如果要在文字前后直接插入普通的星号或底线,你可以用反斜线:
|
||||
|
||||
```md
|
||||
\*this text is surrounded by literal asterisks\*
|
||||
```
|
||||
|
||||
### 代码
|
||||
|
||||
如果要标记一小段行内代码,你可以用反引号把它包起来 (`` ` ``) ,例如:
|
||||
|
||||
```md
|
||||
Use the `printf()` function.
|
||||
```
|
||||
|
||||
会产生:
|
||||
|
||||
```md
|
||||
<p>Use the <code>printf()</code> function.</p>
|
||||
```
|
||||
|
||||
如果要在代码内插入反引号,你可以用多个反引号来开启和结束行内代码:
|
||||
|
||||
```md
|
||||
``There is a literal backtick (`) here.``
|
||||
```
|
||||
|
||||
这段语法会产生:
|
||||
|
||||
```html
|
||||
<p><code>There is a literal backtick (`) here.</code></p>
|
||||
```
|
||||
|
||||
代码码区段的起始和结束端都可以放入一个空白,起始端后面一个,结束端前面一个,这样你就可以在区段的一开始就插入反引号:
|
||||
|
||||
```md
|
||||
A single backtick in a code span: `` ` ``
|
||||
|
||||
A backtick-delimited string in a code span: `` `foo` ``
|
||||
```
|
||||
|
||||
会产生:
|
||||
|
||||
```html
|
||||
<p>A single backtick in a code span: <code>`</code></p>
|
||||
|
||||
<p>A backtick-delimited string in a code span: <code>`foo`</code></p>
|
||||
```
|
||||
|
||||
在代码码区段内,`&` 和方括号都会被转成 HTML 实体,这样会比较容易插入 HTML 原始码,Markdown 会把下面这段:
|
||||
|
||||
```md
|
||||
Please don't use any `<blink>` tags.
|
||||
```
|
||||
|
||||
转为:
|
||||
|
||||
```html
|
||||
<p>Please don't use any <code><blink></code> tags.</p>
|
||||
```
|
||||
|
||||
你也可以这样写:
|
||||
|
||||
```md
|
||||
`—` is the decimal-encoded equivalent of `—`.
|
||||
```
|
||||
|
||||
以产生:
|
||||
|
||||
```html
|
||||
<p>
|
||||
<code>&#8212;</code> is the decimal-encoded equivalent of
|
||||
<code>&mdash;</code>.
|
||||
</p>
|
||||
```
|
||||
|
||||
### 图片
|
||||
|
||||
很明显地,要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。
|
||||
|
||||
Markdown 使用一种和链接很相似的语法来标记图片,同样也允许两种样式: _行内_ 和 _参考_。
|
||||
|
||||
行内图片的语法看起来像是:
|
||||
|
||||
```md
|
||||

|
||||
|
||||

|
||||
```
|
||||
|
||||
详细叙述如下:
|
||||
|
||||
- 一个惊叹号 `!`
|
||||
- 一个方括号,里面放上图片的替代文字
|
||||
- 一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上
|
||||
选择性的 title 文字。
|
||||
|
||||
参考式的图片语法则长得像这样:
|
||||
|
||||
```md
|
||||
![Alt text][id]
|
||||
```
|
||||
|
||||
「id」是图片参考的名称,图片参考的定义方式则和链接参考一样:
|
||||
|
||||
```md
|
||||
[id]: url/to/image "Optional title attribute"
|
||||
```
|
||||
|
||||
到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 `<img>` 标签。
|
||||
|
||||
### 其他文本样式
|
||||
|
||||
- 删除:`~~delete~~`
|
||||
- 段落: 段落之间空一行
|
||||
- 换行符: 一行结束时输入两个空格
|
||||
|
||||
---
|
||||
|
||||
## 其它
|
||||
|
||||
### 自动链接
|
||||
|
||||
Markdown 支持比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用方括号包起来, Markdown 就会自动把它转成链接,链接的文字就和链接位置一样,例如:
|
||||
|
||||
```md
|
||||
<http://example.com/>
|
||||
```
|
||||
|
||||
Markdown 会转为:
|
||||
|
||||
```html
|
||||
<a href="http://example.com/">http://example.com/</a>
|
||||
```
|
||||
|
||||
自动的邮件链接也很类似,只是 Markdown 会先做一个编码转换的过程,把文字字元转成 16 进位码的 HTML 实体,这样的格式可以混淆一些不好的信箱地址收集机器人,例如:
|
||||
|
||||
```md
|
||||
<address@example.com>
|
||||
```
|
||||
|
||||
Markdown 会转成:
|
||||
|
||||
```html
|
||||
<a
|
||||
href="mailto:address@example.com"
|
||||
>address@example.com</a
|
||||
>
|
||||
```
|
||||
|
||||
在浏览器里面,这段字串会变成一个可以点击的 <address@example.com> 链接。
|
||||
|
||||
(这种作法虽然可以混淆不少的机器人,但并无法全部挡下来,不过这样也比什么都不做好些。无论如何,公开你的信箱终究会引来广告信件的。)
|
||||
|
||||
### 转义字符
|
||||
|
||||
Markdown 可以利用反斜线来插入一些在语法中有其它意义的符号,例如: 如果你想要用星号加在文字旁边的方式来做出强调效果 (但不用 `<em>` 标签) ,你可以在星号的前面加上反斜线:
|
||||
|
||||
```md
|
||||
\*literal asterisks\*
|
||||
```
|
||||
|
||||
Markdown 支持在下面这些符号前面加上反斜线来帮助插入普通的符号:
|
||||
|
||||
- `\` 反斜线
|
||||
- `` ` `` 反引号
|
||||
- `*` 星号
|
||||
- `_` 底线
|
||||
- `{}` 大括号
|
||||
- `[]` 方括号
|
||||
- `()` 括号
|
||||
- `#` 井字号
|
||||
- `+` 加号
|
||||
- `-` 减号
|
||||
- `.` 英文句点
|
||||
- `!` 惊叹号
|
||||
|
||||
## 快捷键
|
||||
|
||||
| 输出后的效果 | Markdown | 快捷键 |
|
||||
| ------------- | ---------- | -------------- |
|
||||
| **Bold** | `**text**` | Ctrl/⌘ + B |
|
||||
| _Emphasize_ | `*text*` | Ctrl/⌘ + I |
|
||||
| `Inline Code` | \`code\` | 选中后 `` ` `` |
|
||||
|
||||
## 表格
|
||||
|
||||
| 居中 | 右对齐 | 左对齐 |
|
||||
| :-----------: | -------------: | :------------- |
|
||||
| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
|
||||
| b | aaaaaaaaa | aaaa |
|
||||
| c | aaaa | a |
|
||||
|
||||
[1]: http://docutils.sourceforge.net/mirror/setext.html
|
||||
[2]: http://www.aaronsw.com/2002/atx/
|
||||
[3]: http://textism.com/tools/textile/
|
||||
[4]: http://docutils.sourceforge.net/rst.html
|
||||
[5]: http://www.triptico.com/software/grutatxt.html
|
||||
[6]: http://ettext.taint.org/doc/
|
||||
[bq]: #blockquotes
|
||||
[l]: #列表
|
||||
747
docs/1.示例/markdown扩展.md
Normal file
747
docs/1.示例/markdown扩展.md
Normal file
@ -0,0 +1,747 @@
|
||||
---
|
||||
title: markdown 扩展
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/05 22:49:39
|
||||
permalink: /article/mcgayb5w/
|
||||
tags:
|
||||
- markdown
|
||||
- 教程
|
||||
---
|
||||
|
||||
## 标题锚点
|
||||
|
||||
标题会自动应用锚点。
|
||||
|
||||
#### 自定义锚点
|
||||
|
||||
要为标题指定自定义锚点而不是使用自动生成的锚点,请向标题添加后缀:
|
||||
|
||||
```md
|
||||
# 使用自定义锚点 {#my-anchor}
|
||||
```
|
||||
|
||||
这允许将标题链接为 `#my-anchor`,而不是默认的 `#使用自定义锚点`。
|
||||
|
||||
## 链接
|
||||
|
||||
内部和外部链接都会被特殊处理。
|
||||
|
||||
主题默认对每个 md 文件自动生成一个新的 链接,并保存在对应的 md 文件的 frontmatter 的 `permalink` 中。
|
||||
你可以随时修改它们。
|
||||
|
||||
#### 内部链接
|
||||
|
||||
建议使用 生成的 `permalink` 作为内部链接的目标。
|
||||
|
||||
```md
|
||||
[Markdown](/guide/markdown/)
|
||||
```
|
||||
|
||||
渲染为:
|
||||
|
||||
[Markdown](/guide/markdown/)
|
||||
|
||||
#### 外部链接
|
||||
|
||||
外部链接带有 `target="_blank" rel="noreferrer"` :
|
||||
|
||||
[VuePress](https://v2.vuepress.vuejs.org/)
|
||||
|
||||
## Github风格的表格
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
| Tables | Are | Cool |
|
||||
| ------------- | :-----------: | ----: |
|
||||
| col 3 is | right-aligned | $1600 |
|
||||
| col 2 is | centered | $12 |
|
||||
| zebra stripes | are neat | $1 |
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
| Tables | Are | Cool |
|
||||
| ------------- | :-----------: | ----: |
|
||||
| col 3 is | right-aligned | $1600 |
|
||||
| col 2 is | centered | $12 |
|
||||
| zebra stripes | are neat | $1 |
|
||||
|
||||
## Emoji :tada:
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
:tada: :100:
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
:tada: :100:
|
||||
|
||||
这里可以找到 [所有支持的 emoji 列表](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs)。
|
||||
|
||||
## 目录表
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
[[TOC]]
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
[[TOC]]
|
||||
|
||||
## 自定义容器
|
||||
|
||||
自定义容器可以通过它们的类型、标题和内容来定义。
|
||||
|
||||
### 默认标题
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
::: note
|
||||
This is a note box
|
||||
:::
|
||||
|
||||
::: info
|
||||
This is an info box.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
This is a tip.
|
||||
:::
|
||||
|
||||
::: warning
|
||||
This is a warning.
|
||||
:::
|
||||
|
||||
::: caution
|
||||
This is a dangerous warning.
|
||||
:::
|
||||
|
||||
::: details
|
||||
This is a details block.
|
||||
:::
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
::: note
|
||||
This is a note box
|
||||
:::
|
||||
|
||||
::: info
|
||||
This is an info box.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
This is a tip.
|
||||
:::
|
||||
|
||||
::: warning
|
||||
This is a warning.
|
||||
:::
|
||||
|
||||
::: caution
|
||||
This is a dangerous warning.
|
||||
:::
|
||||
|
||||
::: details
|
||||
This is a details block.
|
||||
:::
|
||||
|
||||
### 自定义标题
|
||||
|
||||
可以通过在容器的 "type" 之后附加文本来设置自定义标题。
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
::: caution STOP
|
||||
危险区域,请勿继续
|
||||
:::
|
||||
|
||||
::: details 点我查看代码
|
||||
```js
|
||||
console.log('Hello, VitePress!')
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: caution STOP
|
||||
危险区域,请勿继续
|
||||
:::
|
||||
|
||||
::: details 点我查看代码
|
||||
```js
|
||||
console.log('Hello, VitePress!')
|
||||
```
|
||||
:::
|
||||
|
||||
## GitHub 风格的警报
|
||||
|
||||
主题 同样支持以标注的方式渲染 [GitHub 风格的警报](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)。它们和[自定义容器](#自定义容器)的渲染方式相同。
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
> [!NOTE]
|
||||
> 强调用户在快速浏览文档时也不应忽略的重要信息。
|
||||
|
||||
> [!TIP]
|
||||
> 有助于用户更顺利达成目标的建议性信息。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 对用户达成目标至关重要的信息。
|
||||
|
||||
> [!WARNING]
|
||||
> 因为可能存在风险,所以需要用户立即关注的关键内容。
|
||||
|
||||
> [!CAUTION]
|
||||
> 行为可能带来的负面影响。
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
> [!NOTE]
|
||||
> 强调用户在快速浏览文档时也不应忽略的重要信息。
|
||||
|
||||
> [!TIP]
|
||||
> 有助于用户更顺利达成目标的建议性信息。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 对用户达成目标至关重要的信息。
|
||||
|
||||
> [!WARNING]
|
||||
> 因为可能存在风险,所以需要用户立即关注的关键内容。
|
||||
|
||||
> [!CAUTION]
|
||||
> 行为可能带来的负面影响。
|
||||
|
||||
## 代码块中的语法高亮
|
||||
|
||||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
|
||||
Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头:
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
````
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
在 Shiki 的代码仓库中,可以找到 [合法的编程语言列表](https://shiki.style/languages)。
|
||||
|
||||
## 在代码块中实现行高亮
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
除了单行之外,还可以指定多个单行、多行,或两者均指定:
|
||||
|
||||
- 多行:例如 `{5-8}`、`{3-10}`、`{10-17}`
|
||||
- 多个单行:例如 `{4,7,9}`
|
||||
- 多行与单行:例如 `{4,7-13,16,23-27,40}`
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
也可以使用 `// [!code highlight]` 注释实现行高亮。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!' // [\!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Highlighted!' // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中聚焦
|
||||
|
||||
在某一行上添加 `// [!code focus]` 注释将聚焦它并模糊代码的其他部分。
|
||||
|
||||
此外,可以使用 `// [!code focus:<lines>]` 定义要聚焦的行数。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Focused!' // [\!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Focused!' // [!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中的颜色差异
|
||||
|
||||
在某一行添加 `// [!code --]` 或 `// [!code ++]` 注释将会为该行创建 diff,同时保留代码块的颜色。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Removed', // [\!code --]
|
||||
msg: 'Added' // [\!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Removed', // [!code --]
|
||||
msg: 'Added' // [!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 高亮“错误”和“警告”
|
||||
|
||||
在某一行添加 `// [!code warning]` 或 `// [!code error]` 注释将会为该行相应的着色。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Error', // [\!code error]
|
||||
msg: 'Warning' // [\!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Error', // [!code error]
|
||||
msg: 'Warning' // [!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中 词高亮
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```ts
|
||||
export function foo() { // [\!code word:Hello]
|
||||
const msg = 'Hello World'
|
||||
console.log(msg) // prints Hello World
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```ts
|
||||
export function foo() { // [!code word:Hello]
|
||||
const msg = 'Hello World'
|
||||
console.log(msg) // prints Hello World
|
||||
}
|
||||
```
|
||||
|
||||
你还可以指定高亮显示的次数,例如 `[!code word:options:2]` 会高亮显示近两个 `options`。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```ts
|
||||
// [\!code word:options:2]
|
||||
const options = { foo: 'bar' }
|
||||
options.foo = 'baz'
|
||||
console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```ts
|
||||
// [!code word:options:2]
|
||||
const options = { foo: 'bar' }
|
||||
options.foo = 'baz'
|
||||
console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
|
||||
## 代码组
|
||||
|
||||
可以像这样对多个代码块进行分组:
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
@tab config.ts
|
||||
```ts
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
@tab config.ts
|
||||
```ts
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
:::
|
||||
|
||||
你还可以通过 `@tab:active`
|
||||
|
||||
## 导入代码块
|
||||
|
||||
**输入**
|
||||
|
||||
你可以使用下面的语法,从文件中导入代码块:
|
||||
|
||||
```md
|
||||
@[code](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
@[code](../notes/theme/snippet/snippet-1.js)
|
||||
|
||||
如果你只想导入这个文件的一部分:
|
||||
|
||||
```md
|
||||
<!-- 仅导入第 1 行至第 10 行 -->
|
||||
@[code{1-10}](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
代码语言会根据文件扩展名进行推断,但我们建议你显式指定:
|
||||
|
||||
```md
|
||||
<!-- 指定代码语言 -->
|
||||
@[code js](../snippet/snippet-1.js)
|
||||
|
||||
<!-- 行高亮 -->
|
||||
@[code js{2,4-5}](../foo.js)
|
||||
```
|
||||
|
||||
## 数学方程
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
**Maxwell's equations:**
|
||||
|
||||
| equation | description |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
|
||||
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
|
||||
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
**Maxwell's equations:**
|
||||
|
||||
| equation | description |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
|
||||
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
|
||||
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
|
||||
|
||||
## 标记
|
||||
|
||||
使用 `== ==` 进行标记。请注意两边需要有空格。
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
|
||||
## 上下角标
|
||||
|
||||
- 使用 `^ ^` 进行上角标标注。
|
||||
- 使用 `~ ~` 进行下角标标注。
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
- 19^th^
|
||||
- H~2~O
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
- 19^th^
|
||||
- H~2~O
|
||||
|
||||
## 自定义对齐
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
::: left
|
||||
左对齐的内容
|
||||
:::
|
||||
|
||||
::: center
|
||||
居中的内容
|
||||
:::
|
||||
|
||||
::: right
|
||||
右对齐的内容
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: left
|
||||
左对齐的内容
|
||||
:::
|
||||
|
||||
::: center
|
||||
居中的内容
|
||||
:::
|
||||
|
||||
::: right
|
||||
右对齐的内容
|
||||
:::
|
||||
|
||||
## 属性支持
|
||||
|
||||
你可以使用特殊标记为 Markdown 元素添加属性。
|
||||
|
||||
**为图片添加属性**
|
||||
|
||||
这将为图片添加 一个 名为 `full-width` 的 class 属性,以及一个 `width` 属性,值为 `100%`。
|
||||
```md
|
||||
{.full-width width="100%"}
|
||||
```
|
||||
|
||||
同时也支持其他属性:
|
||||
|
||||
```md
|
||||
一个包含文字的段落。 {#p .a .b align=center customize-attr="content with spaces"}
|
||||
```
|
||||
|
||||
这将被渲染为:
|
||||
|
||||
```html
|
||||
<p id="p" class="a b" align="center" customize-attr="content with spaces">
|
||||
一个包含文字的段落。
|
||||
</p>
|
||||
```
|
||||
|
||||
## 任务列表
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
- [ ] 任务 1
|
||||
- [x] 任务 2
|
||||
- [ ] 任务 3
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
- [ ] 任务 1
|
||||
- [x] 任务 2
|
||||
- [ ] 任务 3
|
||||
|
||||
## 脚注
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
人生自古谁无死,留取丹心照汗青[^脚注1]。
|
||||
|
||||
[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
人生自古谁无死,留取丹心照汗青[^脚注1]。
|
||||
|
||||
[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
|
||||
@ -6,10 +6,9 @@ permalink: /article/enx7c9s/
|
||||
tags:
|
||||
- 预览
|
||||
- 标签
|
||||
sticky: true
|
||||
---
|
||||
|
||||
这是一篇 示例文章。
|
||||
|
||||
<!-- more -->
|
||||
|
||||
无内容。
|
||||
|
||||
6
docs/1.示例/示例文章2.md
Normal file
6
docs/1.示例/示例文章2.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: 示例文章2
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/01 22:52:43
|
||||
permalink: /article/elac3ddb/
|
||||
---
|
||||
6
docs/1.示例/示例文章3.md
Normal file
6
docs/1.示例/示例文章3.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: 示例文章3
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/01 22:53:34
|
||||
permalink: /article/9eh4d6ao/
|
||||
---
|
||||
6
docs/1.示例/示例文章4.md
Normal file
6
docs/1.示例/示例文章4.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: 示例文章4
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/01 22:53:58
|
||||
permalink: /article/qk81wscb/
|
||||
---
|
||||
6
docs/1.示例/示例文章5.md
Normal file
6
docs/1.示例/示例文章5.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: 示例文章5
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/01 22:55:23
|
||||
permalink: /article/2seng2ou/
|
||||
---
|
||||
6
docs/1.示例/示例文章6.md
Normal file
6
docs/1.示例/示例文章6.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: 示例文章6
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/01 22:55:35
|
||||
permalink: /article/v9fejej9/
|
||||
---
|
||||
6
docs/1.示例/示例文章7.md
Normal file
6
docs/1.示例/示例文章7.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: 示例文章7
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/01 22:55:49
|
||||
permalink: /article/5xbhl125/
|
||||
---
|
||||
6
docs/1.示例/示例文章8.md
Normal file
6
docs/1.示例/示例文章8.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: 示例文章8
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/01 22:55:56
|
||||
permalink: /article/m4gen76w/
|
||||
---
|
||||
6
docs/1.示例/示例文章9.md
Normal file
6
docs/1.示例/示例文章9.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: 示例文章9
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/01 22:56:03
|
||||
permalink: /article/z8zvx0ru/
|
||||
---
|
||||
@ -88,19 +88,24 @@ permalink: /config/basic/
|
||||
- `avatar.name`: 名称, 用于右侧博主信息展示
|
||||
- `avatar.description`: 个人描述,用于右侧博主信息展示
|
||||
- `avatar.circle`: 是否为圆形头像
|
||||
- 示例:
|
||||
``` ts
|
||||
export default {
|
||||
theme: themePlume({
|
||||
avatar: {
|
||||
url: '/avatar.jpg',
|
||||
name: '张三',
|
||||
description: '此处无银三百两,隔壁王二不曾偷',
|
||||
circle: true
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
- `avatar.location`: 用户地理位置
|
||||
- `avatar.organization`: 用户所在组织/公司
|
||||
|
||||
示例:
|
||||
``` ts
|
||||
export default {
|
||||
theme: themePlume({
|
||||
avatar: {
|
||||
url: '/avatar.jpg',
|
||||
name: '张三',
|
||||
description: '此处无银三百两,隔壁王二不曾偷',
|
||||
circle: true,
|
||||
location: '杭州,中国',
|
||||
organization: 'xxx公司',
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### social
|
||||
|
||||
@ -110,19 +115,50 @@ permalink: /config/basic/
|
||||
|
||||
将作为 图标链接 展示在 导航栏最右侧。
|
||||
|
||||
图标可选值:`'discord' | 'facebook' | 'github' | 'instagram' | 'linkedin' | 'mastodon' | 'npm' | 'slack' | 'twitter' | 'x' | 'youtube' | 'qq' | 'weibo' | 'bilibili' | { svg: string }`
|
||||
图标可选值:
|
||||
- `'github'`
|
||||
- `'gitlab'`
|
||||
- `'npm'`
|
||||
- `'docker'`
|
||||
- `'discord'`
|
||||
- `'facebook'`
|
||||
- `'instagram'`
|
||||
- `'linkedin'`
|
||||
- `'mastodon'`
|
||||
- `'slack'`
|
||||
- `'twitter'`
|
||||
- `'x'`
|
||||
- `'youtube'`
|
||||
- `'juejin'`
|
||||
- `'stackoverflow'`
|
||||
- `'qq'`
|
||||
- `'weibo'`
|
||||
- `'bilibili'`
|
||||
- `'zhihu'`
|
||||
- `'douban'`
|
||||
- `'steam'`
|
||||
- `'xbox'`
|
||||
- `{ svg: string }`: 自定义图标,传入 svg 字符串
|
||||
|
||||
- 示例:
|
||||
``` ts
|
||||
export default {
|
||||
theme: themePlume({
|
||||
social: [{
|
||||
icon: 'github',
|
||||
link: 'https://github.com/zhangsan',
|
||||
}]
|
||||
})
|
||||
}
|
||||
```
|
||||
示例:
|
||||
``` ts
|
||||
export default {
|
||||
theme: themePlume({
|
||||
social: [
|
||||
{ icon: 'github', link: 'https://github.com/zhangsan' }
|
||||
]
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### navbarSocialInclude
|
||||
|
||||
- 类型: `string[]`
|
||||
- 默认值: `['github', 'twitter', 'discord', 'facebook']`
|
||||
- 详情:
|
||||
|
||||
允许显示在导航栏的社交链接。
|
||||
该配置仅在 PC 端下有效。
|
||||
|
||||
### blog
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user