vue中使用markdown转化成html，和语法高亮，web编程开发学习

在Vue中使用Markdown并将其转换成HTML，可以使用marked库来解析Markdown文本，并使用Prism库进行语法高亮。以下是一个简单的例子：

1. 安装依赖：

npm install marked prismjs

2. 在Vue组件中使用：

<template>
  <div v-html="htmlContent"></div>
</template>
 
<script>
import marked from 'marked';
import Prism from 'prismjs';
 
export default {
  data() {
    return {
      htmlContent: ''
    };
  },
  mounted() {
    this.renderMarkdown('# Markdown Title');
  },
  methods: {
    renderMarkdown(markdownText) {
      this.htmlContent = marked(markdownText, {
        renderer: new marked.Renderer(),
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        highlight: (code, language) => {
          const prismRender = Prism.highlight(code, Prism.languages[language]);
          return `<pre class="language-${language}"><code>${prismRender}</code></pre>`;
        }
      });
      // 高亮所有代码块
      this.$nextTick(() => {
        Prism.highlightAll();
      });
    }
  }
};
</script>
 
<style>
/* 引入Prism的样式 */
@import 'prismjs/themes/prism.css';
</style>

在这个例子中，我们首先导入了marked和prismjs，然后在mounted钩子中调用了renderMarkdown方法来将Markdown文本转换成HTML。在rendered方法中，我们使用了highlight函数来指定如何渲染代码块，并在this.$nextTick中调用了Prism.highlightAll()来确保代码块高亮在DOM更新后执行。最后，在组件的style标签中引入了Prism的样式文件。