vue3项目使用highlight.js插件实现了代码块

使用vue的都知道官网的代码块效果:

vue3项目使用highlight.js插件实现了代码块_第1张图片

下面是我们实现了这个功能:

使用highlight.js就可以实现

官网: highlight.js

下载插件后,在main.ts文件中引入:

在文件中:

vue3项目使用highlight.js插件实现了代码块_第2张图片

引入hljs,在onMounted回调中使用,希望使用什么主题就引入什么主题的css,

vue3项目使用highlight.js插件实现了代码块_第3张图片

创建topic和pre这两个需要的,

因为上面js已经获取了,

pre标签是必须

vue3项目使用highlight.js插件实现了代码块_第4张图片

然后设置一下样式

最终结果:

vue3项目使用highlight.js插件实现了代码块_第5张图片

你可能感兴趣的:(javascript,前端,vue.js)