`、``、`` 等标签，必须在前后加上空行，以利与内容区隔。而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `
` 标签。
+
+举例来说，在 Markdown 文件里加上一段 HTML 表格:
+
+```md
+This is a regular paragraph.
+
+
+
+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」选项) ，其它的格式会把每个断行都转成 `
+ Bird
+ McHale
+ Parish
+
+```
+
+如果你的列表标记写成:
+
+```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 会把项目的内容在输出时用 `` 标签包起来，举例来说:
+
+```md
+- Bird
+- Magic
+```
+
+会被转换为:
+
+```html
+
+```
+
+但是这个:
+
+```md
+- Bird
+
+- Magic
+```
+
+会被转换为:
+
+```html
+
+```
+
+列表项目可以包含多个段落，每个项目下的段落都必须缩进 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 会用 `` 和 `` 标签来把代码块包起来。
+
+要在 Markdown 中建立代码块很简单，只要简单地缩进 4 个空白或是 1 个 tab 就可以，例如，下面的输入:
+
+```md
+This is a normal paragraph:
+
+This is a code block.
+```
+
+Markdown 会转换成:
+
+```html
+This is a normal paragraph:
+
+
+ This is a code block.
+
+```
+
+这里的缩进 (4 个空白或是 1 个 tab) ，都会被移除，例如:
+
+```md
+Here is an example of AppleScript:
+
+tell application "Foo"
+beep
+end tell
+```
+
+会被转换为:
+
+```html
+Here is an example of AppleScript:
+
+tell application "Foo"
+ beep
+end tell
+
+ <div class="footer">
+ © 2004 Foo Corporation
+</div>
+
+```
+
+代码块中，一般的 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
+
+ This is an example inline
+ link.
+
+
+This link has no title attribute.
+```
+
+如果你是要链接到同样主机的资源，你可以使用相对路径:
+
+```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
+
+ I get 10 times more traffic from
+ Google than from
+ Yahoo
+ or MSN .
+
+```
+
+下面是用行内形式写的同样一段内容的 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 使用星号 (`*`) 和底线 (`_`) 作为标记强调字词的符号，被 `*` 或 `_` 包围的字词会被转成用 `` 标签包围，用两个 `*` 或 `_` 包起来的话，则会被转成 ``，例如:
+
+```md
+**double asterisks** (建议)
+
+**double underscores** (建议)
+
+_single asterisks_
+
+_single underscores_
+```
+
+会转成:
+
+```html
+single asterisks
+
+single underscores
+
+double asterisks
+
+double underscores
+```
+
+你可以随便用你喜欢的样式，唯一的限制是，你用什么符号开启标签，就要用什么符号结束。
+
+强调也可以直接插在文字中间:
+
+```md
+un*frigging*believable
+```
+
+但是如果你的 `*` 和 `_` 两边都有空白的话，它们就只会被当成普通的符号。
+
+如果要在文字前后直接插入普通的星号或底线，你可以用反斜线:
+
+```md
+\*this text is surrounded by literal asterisks\*
+```
+
+### 代码
+
+如果要标记一小段行内代码，你可以用反引号把它包起来 (`` ` ``) ，例如:
+
+```md
+Use the `printf()` function.
+```
+
+会产生:
+
+```md
+Use the printf() function.
+```
+
+如果要在代码内插入反引号，你可以用多个反引号来开启和结束行内代码:
+
+```md
+``There is a literal backtick (`) here.``
+```
+
+这段语法会产生:
+
+```html
+There is a literal backtick (`) here.
+```
+
+代码码区段的起始和结束端都可以放入一个空白，起始端后面一个，结束端前面一个，这样你就可以在区段的一开始就插入反引号:
+
+```md
+A single backtick in a code span: `` ` ``
+
+A backtick-delimited string in a code span: `` `foo` ``
+```
+
+会产生:
+
+```html
+A single backtick in a code span: `
+
+A backtick-delimited string in a code span: `foo`
+```
+
+在代码码区段内，`&` 和方括号都会被转成 HTML 实体，这样会比较容易插入 HTML 原始码，Markdown 会把下面这段:
+
+```md
+Please don't use any `` tags.
+```
+
+转为:
+
+```html
+Please don't use any <blink> tags.
+```
+
+你也可以这样写:
+
+```md
+`—` is the decimal-encoded equivalent of `—`.
+```
+
+以产生:
+
+```html
+
+ — is the decimal-encoded equivalent of
+ —.
+
+```
+
+### 图片
+
+很明显地，要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。
+
+Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式: _行内_ 和 _参考_。
+
+行内图片的语法看起来像是:
+
+```md
+
+
+
+```
+
+详细叙述如下:
+
+- 一个惊叹号 `!`
+- 一个方括号，里面放上图片的替代文字
+- 一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上
+ 选择性的 title 文字。
+
+参考式的图片语法则长得像这样:
+
+```md
+![Alt text][id]
+```
+
+「id」是图片参考的名称，图片参考的定义方式则和链接参考一样:
+
+```md
+[id]: url/to/image "Optional title attribute"
+```
+
+到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 `http://example.com/
+```
+
+自动的邮件链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字元转成 16 进位码的 HTML 实体，这样的格式可以混淆一些不好的信箱地址收集机器人，例如:
+
+```md
+
+```
+
+Markdown 会转成:
+
+```html
+address@example.com
+```
+
+在浏览器里面，这段字串会变成一个可以点击的 链接。
+
+(这种作法虽然可以混淆不少的机器人，但并无法全部挡下来，不过这样也比什么都不做好些。无论如何，公开你的信箱终究会引来广告信件的。)
+
+### 转义字符
+
+Markdown 可以利用反斜线来插入一些在语法中有其它意义的符号，例如: 如果你想要用星号加在文字旁边的方式来做出强调效果 (但不用 `` 标签) ，你可以在星号的前面加上反斜线:
+
+```md
+\*literal asterisks\*
+```
+
+Markdown 支持在下面这些符号前面加上反斜线来帮助插入普通的符号:
+
+- `\` 反斜线
+- `` ` `` 反引号
+- `*` 星号
+- `_` 底线
+- `{}` 大括号
+- `[]` 方括号
+- `()` 括号
+- `#` 井字号
+- `+` 加号
+- `-` 减号
+- `.` 英文句点
+- `!` 惊叹号
+
+## 快捷键
+
+| 输出后的效果 | Markdown | 快捷键 |
+| ------------- | ---------- | -------------- |
+| **Bold** | `**text**` | Ctrl/⌘ + B |
+| _Emphasize_ | `*text*` | Ctrl/⌘ + I |
+| `Inline Code` | \`code\` | 选中后 `` ` `` |
+
+## 表格
+
+| 居中 | 右对齐 | 左对齐 |
+| :-----------: | -------------: | :------------- |
+| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
+| b | aaaaaaaaa | aaaa |
+| c | aaaa | a |
+
+## Emoji
+
+`:emoji名称:`
+
+Example: `:smile:` :smile:
+
+你可以在 [Emoji 列表](./emoji/README.md) 找到所有可用的 Emoji。
+
+## Markdown 效果演示
+
+- [查看详情](demo.md)
+
+[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]: #列表
diff --git a/src/language/markdown/demo.md b/src/language/markdown/demo.md
new file mode 100644
index 00000000..3e257bc3
--- /dev/null
+++ b/src/language/markdown/demo.md
@@ -0,0 +1,321 @@
+---
+title: Markdown 示例
+icon: fab fa-markdown
+order: 2
+category:
+ - 教程知识
+ - Markdown
+tag:
+ - 示例
+ - Markdown
+---
+
+
+
+# 一级标题 {style="display: block;"}
+
+
+
+```md
+# 一级标题
+```
+
+## 二级标题
+
+```md
+## 二级标题
+```
+
+### 三级标题
+
+```md
+### 三级标题
+```
+
+#### 四级标题
+
+```md
+#### 四级标题
+```
+
+##### 五级标题
+
+```md
+##### 五级标题
+```
+
+###### 六级标题
+
+```md
+###### 六级标题
+```
+
+## 文本
+
+这句话里拥有**加粗**、*倾斜*和~~删除~~
+
+```md
+这句话里拥有**加粗**、*倾斜*和~~删除~~
+```
+
+## 段落
+
+这是一个段落。
+
+这是另一个段落。
+
+```md
+这是一个段落
+
+这是另一个段落。
+```
+
+## 换行
+
+这是一句话不过我要在这里
+换行且\
+再次换行
+
+```md
+这是一句话不过我要在这里
+换行且\
+再次换行
+```
+
+::: tip
+
+上方的代码中 `这里` 后面有两个空格
+
+:::
+
+## 引用
+
+> 引用也可以连用
+>
+> > 可以添加额外的大于号制造更深的引用
+
+```md
+> 引用也可以连用
+>
+> > 可以添加额外的大于号制造更深的引用
+```
+
+## 列表
+
+### 无序列表
+
+- 无序列表项
+- 无序列表项
+
+ - 列表中的列表项
+ - 更多的列表项
+ - 更多的列表项
+ - 更多的列表项
+ - 列表中的长列表项，这个列表项很长。
+
+ 而且由很多个段落构成。
+
+ 甚至最后一个段落还包含了[链接](#链接)。
+
+- 无序列表项
+
+```md
+- 无序列表项
+- 无序列表项
+
+ - 列表中的列表项
+ - 更多的列表项
+ - 更多的列表项
+ - 更多的列表项
+ - 列表中的长列表项，这个列表项很长。
+
+ 而且由很多个段落构成。
+
+ 甚至最后一个段落还包含了[链接](#链接)。
+
+- 无序列表项
+```
+
+### 有序列表
+
+1. 有序列表第一项
+1. 有序列表第二项
+ 第二项的需要换行\
+ 再次换行
+1. 有序列表第三项
+
+```md
+1. 有序列表第一项
+1. 有序列表第二项
+ 第二项的需要换行\
+ 再次换行
+1. 有序列表第三项
+```
+
+::: tip
+
+上方的代码中`换行`后面有也两个空格
+
+:::
+
+## 分割线
+
+---
+
+```md
+---
+```
+
+## 链接
+
+[根目录访问主页](/v2/)
+
+[相对路径访问主页](../../README.md)
+
+[根目录访问贡献指南](/v2/contribution)
+
+[相对路径访问贡献指南](../../contribution.md)
+
+```md
+[根目录访问主页](/v2/)
+
+[相对路径访问主页](../../README.md)
+
+[根目录访问贡献指南](/v2/contribution)
+
+[相对路径访问贡献指南](../../contribution.md)
+```
+
+::: tip
+
+VuePress 还兼容如下跳转到主页的写法:
+
+- [相对路径访问，兼容 Markdown 编写时相互跳转](../../README.md)
+
+- [根目录访问主页 2](/README.md)
+
+- [HTML 形式](../../index.html)
+
+如果希望在使用编辑器编辑 Markdown 时也能够进行相互跳转的话，则需要全部使用**相对路径**，并且`README.md`**不能省略**。
+
+代码:
+
+```md
+[根目录访问主页 2](/README.md)
+
+[相对路径访问，兼容 Markdown 编写时相互跳转](../../README.md)
+
+[HTML 形式](../../index.html)
+```
+
+:::
+
+## 图片
+
+
+
+```md
+
+```
+
+## Emoji
+
+经典方式:
+
+:wink: :cry: :laughing: :yum:
+
+```md
+:wink: :cry: :laughing: :yum:
+```
+
+简写:
+
+8-) :) :\* :( :-) :-( ;)
+
+```md
+8-) :) :\* :( :-) :-( ;)
+```
+
+::: tip
+
+更多详见[emoji 列表](emoji/README.md)
+
+:::
+
+## 表格
+
+| 居中 | 右对齐 | 左对齐 |
+| :-----------: | -------------: | :------------- |
+| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
+| b | aaaaaaaaa | aaaa |
+| c | aaaa | a |
+
+```md
+| 居中 | 右对齐 | 左对齐 |
+| :-----------: | -------------: | :------------- |
+| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
+| b | aaaaaaaaa | aaaa |
+| c | aaaa | a |
+```
+
+## 代码
+
+行内代码效果: `code`
+
+```md
+行内代码效果: `code`
+```
+
+缩进代码:
+
+```
+// Some comments
+line 1 of code
+line 2 of code
+line 3 of code
+```
+
+实际代码:
+
+```md
+ // Some comments
+ line 1 of code
+ line 2 of code
+ line 3 of code
+```
+
+块级代码
+
+```md
+Sample text here...
+```
+
+````md
+块级代码
+
+```
+Sample text here...
+```
+````
+
+高亮格式:
+
+```js
+var foo = function (bar) {
+ return bar++;
+};
+
+console.log(foo(5));
+```
+
+````md
+高亮格式:
+
+```js
+var foo = function (bar) {
+ return bar++;
+};
+
+console.log(foo(5));
+```
+````
diff --git a/src/language/markdown/emoji/README.md b/src/language/markdown/emoji/README.md
new file mode 100644
index 00000000..e6440284
--- /dev/null
+++ b/src/language/markdown/emoji/README.md
@@ -0,0 +1,9 @@
+---
+title: Emoji 列表
+icon: face-smile
+dir:
+ order: 3
+article: false
+---
+
+
-
-
- 渐入 > 变红 > 渐出
-
-
-
-
---
-
-
-
-## 动画片段
-
-### 顺序
-
-你可以使用 `data-fragment-index` 属性改变元素的动画顺序。
-
-不同元素可以有相同的动画顺序。
-
-- 最后显示
-
-
-- 第二个显示
-
-
-
-
-- 第一个显示
-
-
-- 第二个显示
-
-
----
-
-
-
-## 渐变
-
-
-
---
-
-
-
-## 渐变
-
-
-
-Transition 可以通过配置中的 `transition` 选项全局设置，也可以通过在特定幻灯片添加 `data-transition` 属性局部设置.
-
-可能的值:
-
-- none
-- fade
-- slide
-
-
-
-- convex
-- concave
-- zoom
-
---
-
-
-
-## 渐变
-
-
-
-### 过渡动画
-
-你可以在相邻的幻灯片上添加 `data-auto-animate` 使相同的 HTML 元素产生过渡动画效果。
-
----
-
-
-
-## 功能
-
-
-
---
-
-
-
-## 功能
-
-
-
-### 代码
-
-通过启用 `highlight` 插件，你可以对代码块进行高亮。
-
-你可以使用 `[a-b|c-d]` 语法来分布高亮特定行。
-
-```js [1-2|3|4]
-let a = 1;
-let b = 2;
-let c = (x) => 1 + 2 + x;
-c(3);
-```
-
---
-
-
-
-## 功能
-
-
-
-### 预览模式
-
-按下 `Esc` 或 `O` 即可在幻灯片获得焦点时进入预览模式。
-
---
-
-
-
-## 功能
-
-
-
-### 全屏模式
-
-按下 `F` 或 `F11` 即可在幻灯片获得焦点时进入全屏模式。
-
---
-
-
-
-## 功能
-
-
-
-### 缩放
-
-按下 `alt` (Linux 上使用 `ctrl`) 的同时点击幻灯片的任何元素，即可以向此元素进行放大。
-
-再次点击即可缩小。
-
----
-
-
-
-## 结束
-
-@slideend
diff --git a/src/tools/README.md b/src/tools/README.md
new file mode 100644
index 00000000..95212cd4
--- /dev/null
+++ b/src/tools/README.md
@@ -0,0 +1,26 @@
+---
+title: 开发工具
+icon: screwdriver-wrench
+article: false
+features:
+ - title: 技术聚焦
+ details: 以 UE4/5 C++ 为主线，专注于解决与 UE4/5 相关的技术问题。
+ - title: 踩坑记录
+ details: 包括多种技能的踩坑经验，涵盖 C++、Lua、Python、Js 等...
+ - title: 丰富表达
+ details: 图文代码结合，直观地展示解决方案，同时享受问题解决的过程。
+
+
+---
+
+## 版本控制工具
+
+* [Git](git/README.md)
+
+## 代码托管平台
+
+* [Github](github/README.md)
+
+## 代码创作工具(IDE)
+
+* [vscode](vscode/README.md)
diff --git a/src/tools/git/assets/logo@2x.png b/src/tools/git/assets/logo@2x.png
new file mode 100644
index 00000000..f4518b10
Binary files /dev/null and b/src/tools/git/assets/logo@2x.png differ
diff --git a/src/tools/github/assets/codeforgithub.png b/src/tools/github/assets/codeforgithub.png
new file mode 100644
index 00000000..a0420278
Binary files /dev/null and b/src/tools/github/assets/codeforgithub.png differ
diff --git a/src/tools/github/assets/gitcode.png b/src/tools/github/assets/gitcode.png
new file mode 100644
index 00000000..ae875e61
Binary files /dev/null and b/src/tools/github/assets/gitcode.png differ
diff --git a/src/tools/github/assets/github-dark.svg b/src/tools/github/assets/github-dark.svg
new file mode 100644
index 00000000..37fa923d
--- /dev/null
+++ b/src/tools/github/assets/github-dark.svg
@@ -0,0 +1 @@
+
)
+
+[//]: # (