diff --git a/src/pages/demo/components/markdown/demoRender.vue b/src/pages/demo/components/markdown/demoRender.vue
new file mode 100644
index 00000000..588ed3b7
--- /dev/null
+++ b/src/pages/demo/components/markdown/demoRender.vue
@@ -0,0 +1,49 @@
+<template>
+  <Container type="ghost">
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card>
+          <PageHeader
+            slot="header"
+            title="代码高亮"
+            url="https://github.com/chjj/marked">
+          </PageHeader>
+          <pre>{{mdSource}}</pre>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <template slot="header">解析结果</template>
+          <div class="markdown-body" v-html="markedHTML"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import marked from 'marked'
+import highlight from 'highlight.js'
+export default {
+  data () {
+    return {
+      mdSource: '',
+      markedHTML: ''
+    }
+  },
+  async mounted () {
+    this.mdSource = await this.getReadme(this.url)
+    this.markedHTML = marked(this.mdSource, {
+      highlight: (code) => {
+        return highlight.highlightAuto(code).value
+      }
+    })
+  },
+  methods: {
+    async getReadme () {
+      const data = await this.$axios.get('/static/markdownFiles/demo/baseMarkdowmFile.md')
+      return data
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/router/menu/_components.js b/src/router/menu/_components.js
index 7041e1b0..48a39ce6 100644
--- a/src/router/menu/_components.js
+++ b/src/router/menu/_components.js
@@ -109,6 +109,16 @@ export const menu = {
             requiresAuth: true
           },
           component: resolve => { require(['@/pages/demo/components/markdown/demoHighlight.vue'], resolve) }
+        },
+        {
+          title: '自定义渲染',
+          icon: 'file-o',
+          path: 'marked/demoRender',
+          name: 'demo-components-markdown-demoRender',
+          meta: {
+            requiresAuth: true
+          },
+          component: resolve => { require(['@/pages/demo/components/markdown/demoRender.vue'], resolve) }
         }
       ]
     },