markdown vue

<template>
  <div>
    <h1>Markdown Vue 示例</h1>
    <textarea v-model="markdownText"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked';

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

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

解释说明：

• 模板部分 (<template>):

  • 包含一个标题、一个文本区域 (textarea) 和一个用于显示编译后 Markdown 内容的 div。

• 脚本部分 (<script>):

  • 使用了 marked 库来将 Markdown 文本转换为 HTML。
  • data 函数返回一个包含初始 Markdown 文本的对象。
  • computed 属性 compiledMarkdown 会根据 markdownText 的变化自动更新，将其编译为 HTML。

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

  • 给文本区域设置了宽度和高度，确保其在页面中显示良好。