diff --git a/doc/cn/markdown.md b/doc/cn/markdown.md
index cfe7016a8..9576417cf 100644
--- a/doc/cn/markdown.md
+++ b/doc/cn/markdown.md
@@ -34,4 +34,38 @@
     markdownIt.set({ breaks: false });
 ```
 
-> [更多设置参考markdown-it...](https://github.com/markdown-it/markdown-it)
\ No newline at end of file
+> [更多设置参考markdown-it...](https://github.com/markdown-it/markdown-it)
+
+### 简单示例
+
+> 注意：`class="markdown-body"` 是必要的，否则CSS样式会于预览的不一样
+
+```html
+<template>
+  <div>
+    <span class="markdown-body" v-html="rawHtml"></span>
+  </div>
+</template>
+
+<script>
+import { mavonEditor } from 'mavon-editor';
+import "mavon-editor/dist/css/index.css";
+
+export default {
+  name: 'Example',
+  data() {
+    return {
+      rawHtml: '',
+    };
+  },
+  props: {
+    markdown: String,
+  },
+  computed: {
+    rawHtml: function() {
+      return mavonEditor.mixins[0].data().markdownIt.render(this.markdown);
+    }
+  },
+};
+</script>
+```
diff --git a/doc/en/markdown.md b/doc/en/markdown.md
index 2fd372dc1..aa16af983 100644
--- a/doc/en/markdown.md
+++ b/doc/en/markdown.md
@@ -34,4 +34,38 @@
     markdownIt.set({ breaks: false });
 ```
 
-> [markdown-it API](https://github.com/markdown-it/markdown-it)
\ No newline at end of file
+> [markdown-it API](https://github.com/markdown-it/markdown-it)
+
+### Simple example
+
+> Notice：`class="markdown-body"` is necessary, or the CSS style will be different from the preview
+
+```html
+<template>
+  <div>
+    <span class="markdown-body" v-html="rawHtml"></span>
+  </div>
+</template>
+
+<script>
+import { mavonEditor } from 'mavon-editor';
+import "mavon-editor/dist/css/index.css";
+
+export default {
+  name: 'Example',
+  data() {
+    return {
+      rawHtml: '',
+    };
+  },
+  props: {
+    markdown: String,
+  },
+  computed: {
+    rawHtml: function() {
+      return mavonEditor.mixins[0].data().markdownIt.render(this.markdown);
+    }
+  },
+};
+</script>
+```