前端markDown使用heightLight.js实现代码高亮

npm i markdown-it
npm i markdown-it-highlightjs

import MarkdownIt from 'markdown-it';
import markdownItHighlightjs from 'markdown-it-highlightjs';

<script setup>
const md = new MarkdownIt({
      highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return (
                '<pre class="hljs"><code>' +
                hljs.highlight(lang, str, true).value +
                '</code></pre>'
            );
          } catch (__) {
          }
        }
        return (
            '<pre class="hljs"><code>' +
            md.utils.escapeHtml(str) +
            '</code></pre>'
        );
      },
    }).use(markdownItHighlightjs);
</script>


<template>
	<div class="talkItem" v-for="(item,index) in talkData.talklist" :key="index">
      <div class="itemBox assistantBox" v-if="item.role == 'assistant'">
         <img src="@/assets/chat.png" class="userImg">
         <div class="itemcontent" style="margin-left:10px" v-html="md.render(item.content)"></div>
       </div>
       <div class="itemBox userBox" v-if="item.role == 'user'">
         <div class="itemcontent" style="margin-right:10px" v-html="item.content"></div>
         <img :src="userImg" class="userImg">
       </div>
    </div>
</template>