diff --git a/pages/guides/markdown.vue b/pages/guides/markdown.vue
new file mode 100644
index 0000000..cd5455f
--- /dev/null
+++ b/pages/guides/markdown.vue
@@ -0,0 +1,128 @@
+<template>
+  <el-row class="guides__wrapper">
+    <el-col style="text-align: center;font-weight: bold;padding-bottom: 1rem;">
+      <span>Markdown 教程</span>
+    </el-col>
+    <el-col>
+      <div id="contentEditor"></div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import Vue from 'vue';
+import markdownGuide from 'static/guides/markdown.txt';
+
+export default {
+  name: "markdown",
+  methods: {
+    _initEditor(data) {
+      let _ts = this;
+
+        let toolbar = [
+          'emoji',
+          'headings',
+          'bold',
+          'italic',
+          'strike',
+          'link',
+          '|',
+          'list',
+          'ordered-list',
+          'check',
+          'outdent',
+          'indent',
+          '|',
+          'quote',
+          'line',
+          'code',
+          'inline-code',
+          'insert-before',
+          'insert-after',
+          '|',
+          'upload',
+          'record',
+          'table',
+          '|',
+          'undo',
+          'redo',
+          '|',
+          'edit-mode',
+          {
+            name: 'more',
+            toolbar: [
+              'fullscreen',
+              'both',
+              'preview',
+              'info'
+            ],
+          }]
+      return new Vue.Vditor(data.id, {
+        toolbar,
+        mode: 'wysiwyg',
+        tab: '\t',
+        cache: {
+          enable: false
+        },
+        after() {
+          _ts.contentEditor.setValue(data.value ? data.value : '');
+        },
+        preview: {
+          hljs: {
+            enable: true,
+            lineNumber: true,
+            style: 'github'
+          },
+          markdown: {
+            toc: true,
+          },
+          math: {
+            inlineDigit: true
+          },
+          delay: 500,
+          mode: data.mode,
+          /*url: `${process.env.Server}/api/console/markdown`,*/
+          parse: (element) => {
+            if (element.style.display === 'none') {
+              return
+            }
+          }
+        },
+        height: data.height,
+        outline: true,
+        counter: 102400,
+        resize: {
+          enable: data.resize,
+        },
+        lang: this.$store.state.locale,
+        placeholder: data.placeholder,
+      })
+    }
+  },
+  mounted() {
+    let _ts = this;
+    _ts.$store.commit("setActiveMenu", "guides-markdown");
+
+    _ts.contentEditor = _ts._initEditor({
+      id: 'contentEditor',
+      mode: 'both',
+      placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)
+      resize: false,
+      value: markdownGuide
+    });
+  }
+}
+</script>
+
+<style lang="scss">
+  @import "~vditor/src/assets/scss/index.scss";
+
+  .guides__wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: block;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/static/guides/markdown.txt b/static/guides/markdown.txt
new file mode 100644
index 0000000..959e351
--- /dev/null
+++ b/static/guides/markdown.txt
@@ -0,0 +1,354 @@
+## 教程
+
+这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更加清晰的排版。
+
+> 引用文本：Markdown is a text formatting syntax inspired
+
+## 语法指导
+
+### 普通内容
+
+这段内容展示了在内容里面一些排版格式，比如：
+
+- **加粗** - `**加粗**`
+- *倾斜* - `*倾斜*`
+- ~~删除线~~ - `~~删除线~~`
+- `Code 标记` - ``Code 标记``
+- [超级链接](https://hacpai.com) - `[超级链接](https://hacpai.com)`
+- [username@gmail.com](mailto:username@gmail.com) - `[username@gmail.com](mailto:username@gmail.com)`
+
+### 大标题 - Heading 3
+
+你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。
+
+> NOTE: 别忘了 # 后面需要有空格！
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+### 图片
+
+```
+![alt 文本](http://image-path.png)
+![alt 文本](http://image-path.png "图片 Title 值")
+```
+
+支持复制粘贴直接上传。
+
+### 代码块
+
+#### 普通
+
+```
+*emphasize*    **strong**
+_emphasize_    __strong__
+var a = 1
+```
+
+#### 语法高亮支持
+
+如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如:
+
+##### 演示 Go 代码高亮
+
+```go
+package main
+
+import "fmt"
+
+func main() {
+	fmt.Println("Hello, 世界")
+}
+```
+
+##### 演示 Java 高亮
+
+```java
+public class HelloWorld {
+
+    public static void main(String[] args) {
+        System.out.println("Hello World!");
+    }
+
+}
+```
+
+> Tip: 语言名称支持下面这些: `ruby`, `python`, `js`, `html`, `erb`, `css`, `coffee`, `bash`, `json`, `yml`, `xml` ...
+
+### 有序、无序、任务列表
+
+#### 无序列表
+
+- Java
+  - Spring
+    - IoC
+    - AOP
+- Go
+  - gofmt
+  - Wide
+- Node.js
+  - Koa
+  - Express
+
+#### 有序列表
+
+1. Node.js
+   1. Express
+   2. Koa
+   3. Sails
+2. Go
+   1. gofmt
+   2. Wide
+3. Java
+   1. Latke
+   2. IDEA
+
+#### 任务列表
+
+- [x] 发布 Sym
+- [x] 发布 Solo
+- [ ] 预约牙医
+
+### 表格
+
+如果需要展示数据什么的，可以选择使用表格。
+
+| header 1 | header 2 |
+| - | - |
+| cell 1 | cell 2 |
+| cell 3 | cell 4 |
+| cell 5 | cell 6 |
+
+### 隐藏细节
+
+<details>
+<summary>这里是摘要部分。</summary>
+这里是细节部分。
+</details>
+
+### 段落
+
+空行可以将内容进行分段，便于阅读。（这是第一段）
+
+使用空行在 Markdown 排版中相当重要。（这是第二段）
+
+### 链接引用
+
+[链接文本][链接标识]
+
+```
+[链接文本][链接标识]
+
+[链接标识]: https://b3log.org
+```
+
+### 数学公式
+
+多行公式块：
+
+$$
+\frac{1}{
+  \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
+  \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
+    1+\frac{e^{-6\pi}}
+    {1+\frac{e^{-8\pi}}{1+\cdots}}
+  }
+}
+$$
+
+行内公式：
+
+公式 $a^2 + b^2 = \color{red}c^2$ 是行内。
+
+### 脑图
+
+```mindmap
+- 教程
+- 语法指导
+  - 普通内容
+  - 提及用户
+  - 表情符号 Emoji
+    - 一些表情例子
+  - 大标题 - Heading 3
+    - Heading 4
+      - Heading 5
+        - Heading 6
+  - 图片
+  - 代码块
+    - 普通
+    - 语法高亮支持
+      - 演示 Go 代码高亮
+      - 演示 Java 高亮
+  - 有序、无序、任务列表
+    - 无序列表
+    - 有序列表
+    - 任务列表
+  - 表格
+  - 隐藏细节
+  - 段落
+  - 链接引用
+  - 数学公式
+  - 脑图
+  - 流程图
+  - 时序图
+  - 甘特图
+  - 图表
+  - 五线谱
+  - Graphviz
+  - 多媒体
+  - 脚注
+- 快捷键
+```
+
+### 流程图
+
+```mermaid
+graph TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+```
+
+### 时序图
+
+```mermaid
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    loop Every minute
+        John-->>Alice: Great!
+    end
+```
+
+### 甘特图
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2019-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2019-01-12  , 12d
+    another task      : 24d
+```
+
+### 图表
+
+```echarts
+{
+  "title": { "text": "最近 30 天" },
+  "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
+  "legend": { "data": ["帖子", "用户", "回帖"] },
+  "xAxis": [{
+      "type": "category",
+      "boundaryGap": false,
+      "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"],
+      "axisTick": { "show": false },
+      "axisLine": { "show": false }
+  }],
+  "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
+  "series": [
+    {
+      "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
+      "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
+    },
+    {
+      "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
+      "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
+    },
+    {
+      "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
+      "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
+    }
+  ]
+}
+```
+
+### 五线谱
+
+```abc
+X: 24
+T: Clouds Thicken
+C: Paul Rosen
+S: Copyright 2005, Paul Rosen
+M: 6/8
+L: 1/8
+Q: 3/8=116
+R: Creepy Jig
+K: Em
+|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\
+"C7"_B2A "B7"=B3|"Em"EEE E2G|
+"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\
+1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
+"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\
+"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|
+```
+
+### Graphviz
+
+```graphviz
+digraph finite_state_machine {
+    rankdir=LR;
+    size="8,5"
+    node [shape = doublecircle]; S;
+    node [shape = point ]; qi
+
+    node [shape = circle];
+    qi -> S;
+    S  -> q1 [ label = "a" ];
+    S  -> S  [ label = "a" ];
+    q1 -> S  [ label = "a" ];
+    q1 -> q2 [ label = "ddb" ];
+    q2 -> q1 [ label = "b" ];
+    q2 -> q2 [ label = "b" ];
+}
+```
+
+### 多媒体
+
+支持 v.qq.com，youtube.com，youku.com，coub.com，facebook.com/video，dailymotion.com，.mp4，.m4v，.ogg，.ogv，.webm，.mp3，.wav 链接解析
+
+https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html
+
+### 脚注
+
+这里是一个脚注引用[^1]，这里是另一个脚注引用[^bignote]。
+
+```
+这里是一个脚注引用[^1]，这里是另一个脚注引用[^bignote]。
+[^1]: 第一个脚注定义。
+[^bignote]: 脚注定义可使用多段内容。
+
+    缩进对齐的段落包含在这个脚注定义内。
+
+    ```
+    可以使用代码块。
+    ```
+
+    还有其他行级排版语法，比如**加粗**和[链接](https://b3log.org)。
+```
+
+## 快捷键
+
+我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` "😼）
+
+[链接标识]: https://b3log.org
+
+[^1]: 第一个脚注定义。
+[^bignote]: 脚注定义可使用多段内容。
+    缩进对齐的段落包含在这个脚注定义内。
+    ```
+    可以使用代码块。
+    ```
+    还有其他行级排版语法，比如**加粗**和[链接](https://b3log.org)。