【elementui源码解析】如何实现自动渲染md文档-第二篇

在上一篇文章中，我们已经介绍了如何使用Element UI的Markdown编辑器组件来创建一个简单的Markdown编辑器。在这一篇中，我们将介绍如何实现自动渲染Markdown文档的功能。

Element UI的Markdown编辑器组件并没有直接提供Markdown文档的自动渲染功能。不过，我们可以使用第三方库，如marked来实现这个功能。

首先，确保你已经安装了marked：

npm install marked

然后，你可以在你的Vue组件中这样使用marked来渲染Markdown文档：

<template>
  <div>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>
 
<script>
import marked from 'marked';
 
export default {
  data() {
    return {
      input: '# Hello, Markdown!',
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.input, {
        sanitize: true
      });
    }
  }
};
</script>

在这个例子中，我们创建了一个Vue组件，其中包含一个计算属性compiledMarkdown，它使用marked来转换Markdown文本为HTML。然后，我们使用v-html指令将转换后的HTML插入到DOM中，实现自动渲染的效果。

请注意，直接使用v-html可能会有XSS攻击的风险，因此你应该始终确保你的Markdown内容是安全的，或者使用sanitize: true选项来消毒输出。

这只是一个简单的例子，实际上，你可能需要添加更多的功能，比如实时预览、全屏编辑模式等。