1 安装

npm install highlight.js
npm install @highlightjs/vue-plugin@1.0.2

@highlightjs/vue-plugin 是一个 vue 插件，是一个写好的组件。

注意：vue2 中使用，安装 1.x.x 版本。

2 使用

2.1 基本使用

main.js 中添加：

import highlightPlugin from "@highlightjs/vue-plugin";
Vue.use(highlightPlugin);

组件中使用：<highlightjs />

<template><div class="gl-view-rootbox"><highlightjs language="javascript" :code="code"></highlightjs></div>
</template><script>
export default {data() {return {code: `let x = 5;let y=10;let obj={age:12,name:'lihao'}`,};},
};
</script><style lang="less" scoped></style>

效果：

2.2 引入样式

main.js 中：

import highlightPlugin from "@highlightjs/vue-plugin";
import 'highlight.js/styles/dark.css'; // 引入内置样式Vue.use(highlightPlugin);

这个时候你会发现样式并没有生效，这是 @highlightjs/vue-plugin 的问题。

解决：

在 node_modules 中找到 @highlightjs/vue-plugin，修改 src 下的 vue.js：

// import hljs from "highlight.js/lib/core.js"; // 注释掉原来的导入
import hljs from 'highlight.js/lib/common'; // 使用该导入，样式即生效

效果：

参考资料：

[1] https://blog.csdn.net/weixin_40532650/article/details/109988630

vue2 使用 highlight.js 高亮代码相关推荐

js实现html代码高亮,使用highlight.js高亮代码
先附上highlight.js的github项目地址废话不多说,直接上操作步骤找到你需要的语言,官网会帮你打包好,下载就完事儿了~ image.png 2.在你下载好的文件里面,找到 styles ...
highlight.js（代码高亮插件）
highlight.js(代码高亮插件) 官网用法查看核心 API Highlight.js 将一些函数导出为hljs对象的方法强调 highlight(code, {language, ign ...
博客园使用highlight.js对代码进行高亮，并实现自定义关键词高亮
看了网上那么多有关highlight.js的教程,自己还没学过JavaScript和CSS,硬是花了3天的时间,才终于弄出了自己想要的效果.一开始我的博客园代码高亮效果是这样的: 个人希望代码块能够实 ...
Ghost本地安装highlight.js使代码高亮
对于程序猿写博客来说,这代码高亮是起码的要求.可是Ghost本身没有支持高亮代码. 可是能够通过扩展来实现,它就是highlight.js--附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行 ...
highlight.js代码高亮后把空格替换成了无间断空格U+00A0
原文链接:http://xs.deld.vip/article/show/10.html 前端高亮正确,但复制高亮后的代码空格被处理成了无间断空格U+00A0 示例: 复制到的代码粘贴到viscode ...
highlight js 为博客增加代码着色
利用:marked 把 markdown 文本转换成 HTML. 利用:highlight.js 为代码添加相应 class. 然后用自己写的样式,添加颜色. 找了半天,想找一个 Vue 官方例子的颜 ...
给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js
经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等.毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验.经过我在网上的一番搜罗, ...
vue 中使用 marked + highlight.js 代码高亮
markdown 代码高亮需要依赖 npm install marked --save npm install highlight.js --save 这里使用的主题是monokai-sublime ...
代码高亮的可行性方案，highlight.js
概述在博客或者文档中,通常会需要会需要高亮显示代码,这通常需要满足屏幕大,高刷(-bushi), 应该是配色好看,插件生态丰富.目前实现代码分割的主要是两个库PrismJS,highlight.js ...

vue2 使用 highlight.js 高亮代码