vue中使用markdown转化成html，和语法高亮

在Vue中将Markdown转换成HTML并实现语法高亮，可以使用marked库和highlight.js。以下是一个简单的例子：

1. 安装依赖：

npm install marked highlight.js --save

2. 在Vue组件中使用：

<template>
  <div v-html="htmlContent"></div>
</template>
 
<script>
import marked from 'marked';
import hljs from 'highlight.js';
 
export default {
  data() {
    return {
      htmlContent: ''
    };
  },
  mounted() {
    this.renderMarkdown('# Markdown Title');
  },
  methods: {
    renderMarkdown(markdownText) {
      marked.setOptions({
        renderer: new marked.Renderer(),
        highlight: (code, language) => hljs.highlight(code, { language }).value,
        pedantic: false,
        gfm: true,
        breaks: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false
      });
 
      this.htmlContent = marked(markdownText);
    }
  }
};
</script>
 
<style>
/* 引入highlight.js样式 */
@import 'highlight.js/styles/github.css';
</style>

在这个例子中，我们首先导入了marked和highlight.js。然后，在mounted钩子中，我们调用renderMarkdown方法来将Markdown文本转换成HTML。在renderMarkdown方法中，我们设置了marked的选项，包括自定义渲染器、语法高亮处理器，以及其他Markdown解析选项。最后，我们将转换后的HTML赋值给htmlContent数据属性，并在模板中使用v-html指令将内容渲染到页面上。

请确保在你的项目中已经正确安装并配置了highlight.js的样式文件。在<style>标签中，我们通过@import语句引入了highlight.js的GitHub样式。