VUE实现Markdown格式显示

 安装 Vditor：

npm install vditor -S

  

<template>
  <div class="contion">
    <!-- markdown -->
    
    <div id="vditor"></div>
  </div>
</template>

<script>
import Vditor from "vditor";
import "vditor/dist/index.css";
export default {
  name: "MarkDown",
  components: {},
  data() {
    return {
      contentEditor: "",
      AiReply: `# AI 辅助助手

你好！我是阿里云开发的一款AI辅助助手，专长于解答各种领域的问题，提供技术支持、知识检索、代码编写指导以及语言翻译等服务。我可以帮助你解决编程难题，解析技术概念，撰写Markdown格式的文档，甚至帮你设计算法解决方案。

### 功能特性
- **答疑解惑**：无论你在编程、网络技术、数据库管理、人工智能等领域遇到问题，我都可以为你提供详尽的答案。
- **代码支持**：我能提供多种编程语言的代码样例和指导，如JavaScript、Python、C++等。
- **文档编写**：擅长编写Markdown格式的技术文档，方便你整理和分享知识。
- **多语言交流**：能够处理和生成不同语言的信息，包括但不限于中文和英文。

### 示例
#### 代码块展示
`,
    };
  },
  mounted() {
    this.contentEditor = new Vditor("vditor", {
      minHeight: 500,
      toolbarConfig: {
        pin: true,
        permanentPin: false, 
        hide: ["headings", "bold", "italic"], // 指定要隐藏的具体功能按钮
      },
      cache: {
        enable: false,
      },
      after: () => {
        this.contentEditor.setValue(this.AiReply);
      },
    });
  },
};
</script>

<style>
</style>