highlight.js在Vue中高亮使用npm安装常见问题

目录

 安装 highlight.js

 安装 vue-highlightjs

 安装@highlightjs/vue-plugin

main.js配置 

---

最近在写低代码，有需求类似编辑器功能，实现代码高亮，然后用到了highlight.js，就整理一下。

官网链接直达 highlight.js 中文文档

 安装 highlight.js

 npm install highlight.js --save

npm假如不兼容 用下面的命令 

npm install highlight.js --save --legacy-peer-deps

 安装 vue-highlightjs

npm install --save vue-highlightjs --legacy-peer-deps 

 如图，安装成功~~

 安装@highlightjs/vue-plugin

npm install --save @highlightjs/vue-plugin --legacy-peer-deps

main.js配置 

//main.js配置

// 高亮highlight.js ============================== 分割线
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
// import 'highlight.js/styles/monokai-sublime.css'
vueAdapter.use(VueHighlightJS)

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
// import highlightPlugin from "@highlightjs/vue-plugin";
hljs.registerLanguage('javascript', javascript);
Vue.directive("highlight", function(el) {
		let blocks = el.querySelectorAll("pre code");
		blocks.forEach((block) => {
			hljs.highlightBlock(block);
		});
	});
//=============================== 分割线

 

 点关注，不迷路~ 分享更多