TEXT TEST

Markdown 解析使用 markdown-it https://github.com/markdown-it/markdown-it

使用 Vue

灵感来自 VuePress

所以你为此专门引入了一个 Vue 模板解析器？

每一个 Markdown 文件将首先被编译成 HTML，接着作为一个 Vue 模板传入 Vue 模板解析器，这意味着你可以在文本中使用 Vue 风格的插值。

使用 ``` 包裹起来的代码不会被 Vue 解析。

使用模板语法

{{ 114 * 514 }}

{{ 114 * 514 }}

指令

{{ i }}

<span v-for="i in 3">{{ i }} </span>

使用自定义组件

::: song idol_yoasobi
:::

::: game The_Legend_of_Zelda_Breath_of_the_Wild
:::

::: movie madoka_magica
:::

::: song idol_yoasobi
:::

TOC

• 使用 Vue
  • 使用模板语法
  • 指令
  • 使用自定义组件
• TOC
• 标题
  • 三级标题
• 段落
  • 文本样式
  • 链接
• 列表
  • 无序列表
  • 有序列表
  • 嵌套列表
  • 任务列表
• 区块引用
• 图片
  • 使用markdown语法
  • 使用<img>标签
  • 题注
• 表格
• 脚注
• 忽略 Markdown 格式
• 自定义代码块
• 使用表情符号
• 代码
  • 行内代码
  • 代码块
• 数学表达式
  • 行内数学表达式
  • 块级数学表达式
• 折叠部分 <details>
• 键盘输入元素 <kbd>
• 注音 <ruby>
• 嵌入代码 <iframe>
  • Apple Music
  • Bilibili 视频

[toc]

标题

要创建标题，请在标题文本前添加一至六个 # 符号。 你使用的 # 数量将决定标题的大小。

三级标题

四级标题

五级标题

六级标题

### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

使用 = 和 - 标记一级和二级标题

我展示的是一级标题
=================

我展示的是二级标题
-----------------

段落

文本样式

可以在 .md 文件中以粗体、斜体、删除线、下标或上标文本、高亮表示强调。

粗体 粗体
斜体 斜体
删除线
插入元素
_{下标 下标}
^{上标 上标}
高亮

**粗体**  __粗体__
*斜体*  _斜体_
~~删除线~~
++插入元素++
<sub>下标</sub>  ~下标~
<sup>上标</sup>  ^上标^
==高亮==

~下标~ 需要 Markdown 解析器启用 sub
^上标^ 需要 Markdown 解析器启用 sup
++插入元素++ 需要 Markdown 解析器启用 ins
==高亮== 需要 Markdown 解析器启用 mark

链接

直接使用文本写出。

需要 Markdown 解析器启用 linkify
需要 markdown-it-link-attributes 来使得链接在新窗口打开

使用简单的语法在 GitHub 上为您的散文和代码创建复杂的格式。https://docs.github.com/zh/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

使用简单的语法在 GitHub 上为您的散文和代码创建复杂的格式。https://docs.github.com/zh/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

直接使用链接地址加上 < 和 >。

https://www.baidu.com

<https://www.baidu.com>

通过将链接文本用方括号 [ ] 括起来，然后将 URL 用括号 ( ) 括起来，可创建内联链接。

This site was not built using GitHub Pages.

This site was not built using [GitHub Pages](https://pages.github.com/).

列表

无序列表

无序列表使用星号 * 、加号 + 或是减号 - 作为列表标记，这些标记后面要添加一个空格，然后再填写内容：

• George Washington

• John Adams

• Thomas Jefferson

- George Washington
* John Adams
+ Thomas Jefferson

有序列表

有序列表使用数字并加上 . 号来表示，如：

1. James Madison
2. James Monroe
3. John Quincy Adams

1. James Madison
1. James Monroe
1. John Quincy Adams

嵌套列表

列表嵌套只需在子列表中的选项前面添加四个空格即可：

1. First list item
   • First nested list item
     • Second nested list item

1. First list item
   - First nested list item
     - Second nested list item

任务列表

若要创建任务列表，请在列表项前加连字符和空格，后接 [ ] 。 要将任务标记为完成，请使用 [x] 。

• #739
• https://github.com/octo-org/octo-repo/issues/740
• Add delight to the experience when all tasks are complete 🎉

- [x] #739
- [ ] https://github.com/octo-org/octo-repo/issues/740
- [ ] Add delight to the experience when all tasks are complete :tada:

区块引用

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

区块引用

> 区块引用

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

最外层

第一层嵌套

第二层嵌套

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

区块中使用列表：

区块中使用列表

1. 第一项
2. 第二项

• 第一项
• 第二项
• 第三项

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

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

• 第一项

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

• 第二项

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

图片

使用markdown语法

通过添加 ! 并将 alt 文本用 [ ] 括起来，可显示图像。 然后将图像的链接用括号 () 括起来。

![This is an image](https://imgs.aixifan.com/newUpload/17837244_1255e2a53f734afcb27ca81dcf71cd6b.png)

使用<img>标签

使用 referrerpolicy="no-referrer" 可以解决豆瓣防盗链问题

<img src="https://img1.doubanio.com/view/photo/m_ratio_poster/public/p2870571717.jpg" referrerpolicy="no-referrer">

题注

使用 HTML 语法实现

这是一张图片

![This is an image](https://imgs.aixifan.com/newUpload/17837244_1255e2a53f734afcb27ca81dcf71cd6b.png)

<p class="caption">这是一张图片</p>

使用自定义代码块实现

![This is an image](https://imgs.aixifan.com/newUpload/17837244_1255e2a53f734afcb27ca81dcf71cd6b.png)

::: caption  
题注
:::

表格

可以使用竖线 | 和连字符 - 创建表。 连字符用于创建每列的标题，而竖线用于分隔每列。 必须在表格前包含空白链接，以便其正确呈现。

| First Header  | Second Header | First Header  | Second Header | First Header  | Second Header | First Header  | Second Header |
| ------------- | ------------- | ------------- | ------------- | ------------- | ------------- | ------------- | ------------- |
| Content Cell  | Content Cell  | Content Cell  | Content Cell  | Content Cell  | Content Cell  | Content Cell  | Content Cell  |
| Content Cell  | Content Cell  | Content Cell  | Content Cell  | Content Cell  | Content Cell  | Content Cell  | Content Cell  |

可以通过在标题行中连字符的左侧、右侧或两侧添加冒号 :，来靠左、靠右或居中对齐列中的文本。

| Left-aligned | Center-aligned | Right-aligned |
| :---         |     :---:      |          ---: |
| git status   | git status     | git status    |
| git diff     | git diff       | git diff      |

若要包含竖线 | 作为单元格中的内容，请在竖线前使用 \。

脚注

您可以使用此括号语法为您的内容添加脚注：

Here is a simple footnote^[1].

A footnote can also have multiple lines^[2].

You can also use words, to fit your writing style more closely^[3].

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].  

You can also use words, to fit your writing style more closely[^note].

[^1]: My reference.
[^2]: Every new line should be prefixed with 2 spaces.  
  This allows you to have a footnote with multiple lines.
[^note]:
    Named footnotes will still render with numbers instead of the text but allow easier identification and linking.  
    This footnote also has been made with a different syntax using 4 spaces for new lines.

忽略 Markdown 格式

通过在 Markdown 字符前面输入 \，可忽略 Markdown 格式（或对其进行转义）。

自定义代码块

需要 Markdown 解析器启用 container

成功

::: success 
here be success
:::

错误

::: error 
here be error
:::

警告

::: warning
*here be dragons*
:::

信息

::: info  
here be info 
here be info 
here be info 
:::

使用表情符号

通过键入 :EMOJICODE: 可在写作中添加表情符号。

需要 Markdown 解析器启用 emoji

@octocat 👍 This PR looks great - it's ready to merge! :shipit:

@octocat :+1: This PR looks great - it's ready to merge! :shipit:

有关可用表情符号和代码的完整列表，请查看 Emoji-Cheat-Sheet。

代码

行内代码

使用单反引号 ` 可标注句子中的代码或命令。 反引号中的文本不会被格式化（但也不一定？）。

Use git status to list all new or modified files that haven't yet been committed.

Use `git status` to list all new or modified files that haven't yet been committed.

代码块

通过在代码块的前后输入三反引号 ```，可创建围栏代码块。 我们建议在代码块的前后各留一个空白行，使原始格式更易辨读。

代码高亮使用highlight.js

function test() {
  console.log("notice the blank line before this function?");
}

```js
function test() {
  console.log("notice the blank line before this function?");
}
```

您可以添加可选的语言标识符，以在围栏代码块中启用语法突显。

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

数学表达式

数学表达式解析使用 $K^A{T}_{E}X$ https://katex.org/

使用 markdown-it 插件 @iktakahiro/markdown-it-katex（markdown-it-katex会导致显示异常）

行内数学表达式

要在文本中包含内联数学表达式，请使用美元符号 $ 分隔表达式。

This sentence uses $ delimiters to show math inline: $\sqrt{3x-1}+(1+x{)}^2$

This sentence uses <code>$</code> delimiters to show math inline:  $\sqrt{3x-1}+(1+x)^2$

块级数学表达式

要以块的形式添加数学表达式，请启动一个新行，并使用两个美元符号 $$ 分隔表达式。

$${\left(\sum _{k=1}^n{a}_k{b}_k\right)}^2\le \left(\sum _{k=1}^n{a}_k^2\right)\left(\sum _{k=1}^n{b}_k^2\right)$$

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

折叠部分 <details>

以下部分需要 Markdown 解析器启用 HTML 解析

   puts "Hello World"

<details><summary>CLICK ME</summary>

#### We can hide anything, even code!

```ruby
   puts "Hello World"
```

</details>

默认打开的折叠部分

   puts "Hello World"

<details open><summary>CLICK ME</summary>

We can hide anything, even code!

```ruby
   puts "Hello World"
```

</details>

键盘输入元素 <kbd>

使用 Ctrl + Alt + Del 重启电脑

使用 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> 重启电脑

注音 <ruby>

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

汉(Han)字(zi)

<ruby>
  汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

轻音少女(けいおん!)

<ruby>轻音少女<rp>(</rp><rt>けいおん!</rt><rp>)</rp></ruby>

嵌入代码 <iframe>

Apple Music

Bilibili 视频