vue markdown组件

<template>
  <div>
    <textarea v-model="markdownContent" placeholder="请输入Markdown内容"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked';

export default {
  data() {
    return {
      markdownContent: '# Hello World\nThis is a Vue Markdown component example.'
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdownContent);
    }
  }
};
</script>

<style scoped>
textarea {
  width: 100%;
  height: 150px;
}
</style>

解释说明：

• 模板部分 (<template>):

  • 包含一个 textarea 元素用于输入 Markdown 内容，绑定到 markdownContent 数据属性。
  • 使用 v-html 指令将编译后的 HTML 渲染到页面上。

• 脚本部分 (<script>):

  • 引入了 marked 库，用于将 Markdown 文本转换为 HTML。
  • 定义了一个 data 函数，返回一个包含初始 Markdown 内容的对象。
  • 使用计算属性 compiledMarkdown 将 markdownContent 转换为 HTML。

• 样式部分 (<style scoped>):

  • 给 textarea 设置了宽度和高度，确保用户有足够空间输入内容。