vue 高仿chatgpt代码高亮

Vue.js高仿ChatGPT的代码高亮通常是通过前端的代码编辑库，如Prism.js、Highlight.js或者是Vue本身的`v-html`特性配合CSS样式来实现的。以下是一个简单的例子：

<template>
  <div class="code-block">
    <pre v-bind:class="{ language: 'language-js' }">
      <code>{{ codeToHighlight }}</code>
    </pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      codeToHighlight: `
        // Vue聊天机器人示例代码
        new Vue({
          el: '#app',
          components: { ChatbotComponent },
          mounted() {
            this.$refs.chatbot.send('你好');
          }
        });
      `,
    };
  },
}
</script>

<style scoped>
.code-block pre {
  white-space: pre-wrap;
  overflow-x: auto;
}

.language-js {
  /* 使用Prism.js或其他库的样式 */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 10px;
}
</style>

在这个例子中，我们使用了`v-bind:class`绑定了一个动态的CSS类名到`pre`元素上，根据`language`属性来改变高亮的颜色。你需要先安装Prism.js并引入相关的JavaScript和CSS文件。