如何在vue中实现代码高亮-使用highlight.js

安装highlight.js

首先,使用 npm 安装 highlight.js:

npm install highlight.js @highlightjs/vue-plugin

引入highlight.js

在 main.js 中引入 highlight.js:

import 'highlight.js/styles/stackoverflow-light.css'
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";


app.use(hljsVuePlugin)
app.mount('#app')   //最后挂载应用,顺序不能倒过来。

使用highlight.js

在需要高亮的地方使用 <Highlight> 组件:

<template>
    <highlightjs language="js" code="console.log('Hello World');"
    />
</template>

参考

https://github.com/highlightjs/vue-plugin https://highlightjs.readthedocs.io/en/latest/readme.html?highlight=vue#using-with-vue-js

highlight.js官网: https://highlightjs.org/

怎么使用nanoid?uuid的替代方案

什么是nanoid?

nanoid其实是uuid的替代品,是一个轻量化版本。

它可以生成一个不重复的随机字符串,用于标识数据。

nanoid的特点是短小、不重复、URL友好,适合用于生成短链接、短ID等场景。

安装nanoid

npm install nanoid

使用nanoid

这里介绍的是在vue3中使用nanoid的方法。

import { nanoid } from 'nanoid';
const currentChatId = ref(nanoid())