第二十四节 vue中使用highlight.js实现代码高亮

博主

专辑

第二十四节 vue中使用highlight.js实现代码高亮

亮子 2021-07-08 08:07:03

xxxxxxxxxx
## 1、第一步：安装依赖:
​

1、第一步：安装依赖:

npm install highlight.js --save 或 yarn add highlight.js

2、第二步：在main.js中引入，官方为我们提供了vue到插件

import hljs from 'highlight.js'
import 'highlight.js/styles/idea.css'  //这里有多个样式，自己可以根据需要切换
Vue.use(hljs.vuePlugin);

3、第三：在组件中使用

  <div id="app">
    <!-- 可以使用自动检测 -->
    <highlightjs autodetect :code="function test(){}" />
    <!-- 也可以指定语言 -->
    <highlightjs language='javascript' code="var x = 5;" />
  </div>

4、第四步: highlightjs 扩展(自定义插件)

可以参考:https://www.cnblogs.com/Jimc/p/13161836.html

以上文档已经过时了，请参考下面文档：

https://github.com/metachris/vue-highlightjs
https://github.com/highlightjs/vue-plugin

参考文章

https://www.jianshu.com/p/e925a40f3a0d

博主

标签

专辑

第二十四节 vue中使用highlight.js实现代码高亮

文本颜色

背景颜色

1、第一步：安装依赖:

2、第二步：在main.js中引入，官方为我们提供了vue到插件

3、第三：在组件中使用

4、第四步: highlightjs 扩展(自定义插件)

参考文章

文本颜色

背景颜色