Web笔记··By/蜜汁炒酸奶

Nuxt按需引入highlight代码高亮组件

vuenuxthighlight
1603 3

Nuxt按需引入highlight代码高亮组件

本篇按需引入代码高亮教程基于 highlight.js 10.1.1 实现。

1. 正常引入

1.1 安装highlight.js

新（根据好心人 tt 留言更正，2022-11-20）：

 npm install highlight.js --save
1

旧(有问题命令)：

npm install highlight --save
1

1.2 配置自定义指令

在nuxt的plugins文件夹内添加一个 vue-highlight.js 文件，文件内容如下

// highlight.js  代码高亮指令
import Hljs from 'highlight.js';
import 'highlight.js/styles/default.css'; // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
import Vue from 'vue'
let Highlight = {};
// 自定义hig配置
// 自定义插件
Highlight.install = function (Vue) { 
    // 自定义指令 v-highlight
    Vue.directive('highlight', {
        // 被绑定元素插入父节点时调用
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                hljs.highlightBlock(blocks[i]);
            }
        },
        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                hljs.highlightBlock(blocks[i]);
            }
        }
    })
};

export default Highlight;
Vue.use(Highlight);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在nuxt.config.js文件中引入该文件，如下：

 // ... 省略
 plugins: [
   // ... 省略
    { src: '@/plugins/vue-highlight', ssr: false }, 
  ],
1
2
3
4
5

2. 按需引入

按需引入主要是为了只引入对自己需要的语言执行代码高亮的部分，只需修改vue-highlight.js 文件即可。具体配置如下：

import 'highlight.js/styles/default.css'; // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
import Vue from 'vue'
// 需要哪些语言直接手动引入，不再直接通过 import Hljs from 'highlight.js' 引入所有语言。
var hljs = require('highlight.js/lib/core');
hljs.registerLanguage('c-like', require('highlight.js/lib/languages/c-like'));
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
hljs.registerLanguage('c', require('highlight.js/lib/languages/c'));
hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));
hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown'));
hljs.registerLanguage('dos', require('highlight.js/lib/languages/dos'));
hljs.registerLanguage('go', require('highlight.js/lib/languages/go'));
hljs.registerLanguage('htmlbars', require('highlight.js/lib/languages/htmlbars'));
hljs.registerLanguage('http', require('highlight.js/lib/languages/http'));
hljs.registerLanguage('java', require('highlight.js/lib/languages/java'));
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
hljs.registerLanguage('lua', require('highlight.js/lib/languages/lua'));
hljs.registerLanguage('nginx', require('highlight.js/lib/languages/nginx'));
hljs.registerLanguage('php', require('highlight.js/lib/languages/php'));
hljs.registerLanguage('python', require('highlight.js/lib/languages/python'));
hljs.registerLanguage('python-repl', require('highlight.js/lib/languages/python-repl'));
hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss'));
hljs.registerLanguage('shell', require('highlight.js/lib/languages/shell'));
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'));
hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'));
hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript'));
 
let Highlight = {};
// 自定义hig配置
// 自定义插件
Highlight.install = function (Vue) { 
    // 自定义指令 v-highlight
    Vue.directive('highlight', {
        // 被绑定元素插入父节点时调用
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                hljs.highlightBlock(blocks[i]);
            }
        },
        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                hljs.highlightBlock(blocks[i]);
            }
        }
    })
};

export default Highlight;
Vue.use(Highlight);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

3. 可用语言列表

var hljs = require('./core');
hljs.registerLanguage('1c', require('highlight.js/lib/languages/1c'));
hljs.registerLanguage('abnf', require('highlight.js/lib/languages/abnf'));
hljs.registerLanguage('accesslog', require('highlight.js/lib/languages/accesslog'));
hljs.registerLanguage('actionscript', require('highlight.js/lib/languages/actionscript'));
hljs.registerLanguage('ada', require('highlight.js/lib/languages/ada'));
hljs.registerLanguage('angelscript', require('highlight.js/lib/languages/angelscript'));
hljs.registerLanguage('apache', require('highlight.js/lib/languages/apache'));
hljs.registerLanguage('applescript', require('highlight.js/lib/languages/applescript'));
hljs.registerLanguage('arcade', require('highlight.js/lib/languages/arcade'));
hljs.registerLanguage('c-like', require('highlight.js/lib/languages/c-like'));
hljs.registerLanguage('cpp', require('highlight.js/lib/languages/cpp'));
hljs.registerLanguage('arduino', require('highlight.js/lib/languages/arduino'));
hljs.registerLanguage('armasm', require('highlight.js/lib/languages/armasm'));
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
hljs.registerLanguage('asciidoc', require('highlight.js/lib/languages/asciidoc'));
hljs.registerLanguage('aspectj', require('highlight.js/lib/languages/aspectj'));
hljs.registerLanguage('autohotkey', require('highlight.js/lib/languages/autohotkey'));
hljs.registerLanguage('autoit', require('highlight.js/lib/languages/autoit'));
hljs.registerLanguage('avrasm', require('highlight.js/lib/languages/avrasm'));
hljs.registerLanguage('awk', require('highlight.js/lib/languages/awk'));
hljs.registerLanguage('axapta', require('highlight.js/lib/languages/axapta'));
hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
hljs.registerLanguage('basic', require('highlight.js/lib/languages/basic'));
hljs.registerLanguage('bnf', require('highlight.js/lib/languages/bnf'));
hljs.registerLanguage('brainfuck', require('highlight.js/lib/languages/brainfuck'));
hljs.registerLanguage('c', require('highlight.js/lib/languages/c'));
hljs.registerLanguage('cal', require('highlight.js/lib/languages/cal'));
hljs.registerLanguage('capnproto', require('highlight.js/lib/languages/capnproto'));
hljs.registerLanguage('ceylon', require('highlight.js/lib/languages/ceylon'));
hljs.registerLanguage('clean', require('highlight.js/lib/languages/clean'));
hljs.registerLanguage('clojure', require('highlight.js/lib/languages/clojure'));
hljs.registerLanguage('clojure-repl', require('highlight.js/lib/languages/clojure-repl'));
hljs.registerLanguage('cmake', require('highlight.js/lib/languages/cmake'));
hljs.registerLanguage('coffeescript', require('highlight.js/lib/languages/coffeescript'));
hljs.registerLanguage('coq', require('highlight.js/lib/languages/coq'));
hljs.registerLanguage('cos', require('highlight.js/lib/languages/cos'));
hljs.registerLanguage('crmsh', require('highlight.js/lib/languages/crmsh'));
hljs.registerLanguage('crystal', require('highlight.js/lib/languages/crystal'));
hljs.registerLanguage('csharp', require('highlight.js/lib/languages/csharp'));
hljs.registerLanguage('csp', require('highlight.js/lib/languages/csp'));
hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));
hljs.registerLanguage('d', require('highlight.js/lib/languages/d'));
hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown'));
hljs.registerLanguage('dart', require('highlight.js/lib/languages/dart'));
hljs.registerLanguage('delphi', require('highlight.js/lib/languages/delphi'));
hljs.registerLanguage('diff', require('highlight.js/lib/languages/diff'));
hljs.registerLanguage('django', require('highlight.js/lib/languages/django'));
hljs.registerLanguage('dns', require('highlight.js/lib/languages/dns'));
hljs.registerLanguage('dockerfile', require('highlight.js/lib/languages/dockerfile'));
hljs.registerLanguage('dos', require('highlight.js/lib/languages/dos'));
hljs.registerLanguage('dsconfig', require('highlight.js/lib/languages/dsconfig'));
hljs.registerLanguage('dts', require('highlight.js/lib/languages/dts'));
hljs.registerLanguage('dust', require('highlight.js/lib/languages/dust'));
hljs.registerLanguage('ebnf', require('highlight.js/lib/languages/ebnf'));
hljs.registerLanguage('elixir', require('highlight.js/lib/languages/elixir'));
hljs.registerLanguage('elm', require('highlight.js/lib/languages/elm'));
hljs.registerLanguage('ruby', require('highlight.js/lib/languages/ruby'));
hljs.registerLanguage('erb', require('highlight.js/lib/languages/erb'));
hljs.registerLanguage('erlang-repl', require('highlight.js/lib/languages/erlang-repl'));
hljs.registerLanguage('erlang', require('highlight.js/lib/languages/erlang'));
hljs.registerLanguage('excel', require('highlight.js/lib/languages/excel'));
hljs.registerLanguage('fix', require('highlight.js/lib/languages/fix'));
hljs.registerLanguage('flix', require('highlight.js/lib/languages/flix'));
hljs.registerLanguage('fortran', require('highlight.js/lib/languages/fortran'));
hljs.registerLanguage('fsharp', require('highlight.js/lib/languages/fsharp'));
hljs.registerLanguage('gams', require('highlight.js/lib/languages/gams'));
hljs.registerLanguage('gauss', require('highlight.js/lib/languages/gauss'));
hljs.registerLanguage('gcode', require('highlight.js/lib/languages/gcode'));
hljs.registerLanguage('gherkin', require('highlight.js/lib/languages/gherkin'));
hljs.registerLanguage('glsl', require('highlight.js/lib/languages/glsl'));
hljs.registerLanguage('gml', require('highlight.js/lib/languages/gml'));
hljs.registerLanguage('go', require('highlight.js/lib/languages/go'));
hljs.registerLanguage('golo', require('highlight.js/lib/languages/golo'));
hljs.registerLanguage('gradle', require('highlight.js/lib/languages/gradle'));
hljs.registerLanguage('groovy', require('highlight.js/lib/languages/groovy'));
hljs.registerLanguage('haml', require('highlight.js/lib/languages/haml'));
hljs.registerLanguage('handlebars', require('highlight.js/lib/languages/handlebars'));
hljs.registerLanguage('haskell', require('highlight.js/lib/languages/haskell'));
hljs.registerLanguage('haxe', require('highlight.js/lib/languages/haxe'));
hljs.registerLanguage('hsp', require('highlight.js/lib/languages/hsp'));
hljs.registerLanguage('htmlbars', require('highlight.js/lib/languages/htmlbars'));
hljs.registerLanguage('http', require('highlight.js/lib/languages/http'));
hljs.registerLanguage('hy', require('highlight.js/lib/languages/hy'));
hljs.registerLanguage('inform7', require('highlight.js/lib/languages/inform7'));
hljs.registerLanguage('ini', require('highlight.js/lib/languages/ini'));
hljs.registerLanguage('irpf90', require('highlight.js/lib/languages/irpf90'));
hljs.registerLanguage('isbl', require('highlight.js/lib/languages/isbl'));
hljs.registerLanguage('java', require('highlight.js/lib/languages/java'));
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
hljs.registerLanguage('jboss-cli', require('highlight.js/lib/languages/jboss-cli'));
hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
hljs.registerLanguage('julia', require('highlight.js/lib/languages/julia'));
hljs.registerLanguage('julia-repl', require('highlight.js/lib/languages/julia-repl'));
hljs.registerLanguage('kotlin', require('highlight.js/lib/languages/kotlin'));
hljs.registerLanguage('lasso', require('highlight.js/lib/languages/lasso'));
hljs.registerLanguage('latex', require('highlight.js/lib/languages/latex'));
hljs.registerLanguage('ldif', require('highlight.js/lib/languages/ldif'));
hljs.registerLanguage('leaf', require('highlight.js/lib/languages/leaf'));
hljs.registerLanguage('less', require('highlight.js/lib/languages/less'));
hljs.registerLanguage('lisp', require('highlight.js/lib/languages/lisp'));
hljs.registerLanguage('livecodeserver', require('highlight.js/lib/languages/livecodeserver'));
hljs.registerLanguage('livescript', require('highlight.js/lib/languages/livescript'));
hljs.registerLanguage('llvm', require('highlight.js/lib/languages/llvm'));
hljs.registerLanguage('lsl', require('highlight.js/lib/languages/lsl'));
hljs.registerLanguage('lua', require('highlight.js/lib/languages/lua'));
hljs.registerLanguage('makefile', require('highlight.js/lib/languages/makefile'));
hljs.registerLanguage('mathematica', require('highlight.js/lib/languages/mathematica'));
hljs.registerLanguage('matlab', require('highlight.js/lib/languages/matlab'));
hljs.registerLanguage('maxima', require('highlight.js/lib/languages/maxima'));
hljs.registerLanguage('mel', require('highlight.js/lib/languages/mel'));
hljs.registerLanguage('mercury', require('highlight.js/lib/languages/mercury'));
hljs.registerLanguage('mipsasm', require('highlight.js/lib/languages/mipsasm'));
hljs.registerLanguage('mizar', require('highlight.js/lib/languages/mizar'));
hljs.registerLanguage('perl', require('highlight.js/lib/languages/perl'));
hljs.registerLanguage('mojolicious', require('highlight.js/lib/languages/mojolicious'));
hljs.registerLanguage('monkey', require('highlight.js/lib/languages/monkey'));
hljs.registerLanguage('moonscript', require('highlight.js/lib/languages/moonscript'));
hljs.registerLanguage('n1ql', require('highlight.js/lib/languages/n1ql'));
hljs.registerLanguage('nginx', require('highlight.js/lib/languages/nginx'));
hljs.registerLanguage('nim', require('highlight.js/lib/languages/nim'));
hljs.registerLanguage('nix', require('highlight.js/lib/languages/nix'));
hljs.registerLanguage('nsis', require('highlight.js/lib/languages/nsis'));
hljs.registerLanguage('objectivec', require('highlight.js/lib/languages/objectivec'));
hljs.registerLanguage('ocaml', require('highlight.js/lib/languages/ocaml'));
hljs.registerLanguage('openscad', require('highlight.js/lib/languages/openscad'));
hljs.registerLanguage('oxygene', require('highlight.js/lib/languages/oxygene'));
hljs.registerLanguage('parser3', require('highlight.js/lib/languages/parser3'));
hljs.registerLanguage('pf', require('highlight.js/lib/languages/pf'));
hljs.registerLanguage('pgsql', require('highlight.js/lib/languages/pgsql'));
hljs.registerLanguage('php', require('highlight.js/lib/languages/php'));
hljs.registerLanguage('php-template', require('highlight.js/lib/languages/php-template'));
hljs.registerLanguage('plaintext', require('highlight.js/lib/languages/plaintext'));
hljs.registerLanguage('pony', require('highlight.js/lib/languages/pony'));
hljs.registerLanguage('powershell', require('highlight.js/lib/languages/powershell'));
hljs.registerLanguage('processing', require('highlight.js/lib/languages/processing'));
hljs.registerLanguage('profile', require('highlight.js/lib/languages/profile'));
hljs.registerLanguage('prolog', require('highlight.js/lib/languages/prolog'));
hljs.registerLanguage('properties', require('highlight.js/lib/languages/properties'));
hljs.registerLanguage('protobuf', require('highlight.js/lib/languages/protobuf'));
hljs.registerLanguage('puppet', require('highlight.js/lib/languages/puppet'));
hljs.registerLanguage('purebasic', require('highlight.js/lib/languages/purebasic'));
hljs.registerLanguage('python', require('highlight.js/lib/languages/python'));
hljs.registerLanguage('python-repl', require('highlight.js/lib/languages/python-repl'));
hljs.registerLanguage('q', require('highlight.js/lib/languages/q'));
hljs.registerLanguage('qml', require('highlight.js/lib/languages/qml'));
hljs.registerLanguage('r', require('highlight.js/lib/languages/r'));
hljs.registerLanguage('reasonml', require('highlight.js/lib/languages/reasonml'));
hljs.registerLanguage('rib', require('highlight.js/lib/languages/rib'));
hljs.registerLanguage('roboconf', require('highlight.js/lib/languages/roboconf'));
hljs.registerLanguage('routeros', require('highlight.js/lib/languages/routeros'));
hljs.registerLanguage('rsl', require('highlight.js/lib/languages/rsl'));
hljs.registerLanguage('ruleslanguage', require('highlight.js/lib/languages/ruleslanguage'));
hljs.registerLanguage('rust', require('highlight.js/lib/languages/rust'));
hljs.registerLanguage('sas', require('highlight.js/lib/languages/sas'));
hljs.registerLanguage('scala', require('highlight.js/lib/languages/scala'));
hljs.registerLanguage('scheme', require('highlight.js/lib/languages/scheme'));
hljs.registerLanguage('scilab', require('highlight.js/lib/languages/scilab'));
hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss'));
hljs.registerLanguage('shell', require('highlight.js/lib/languages/shell'));
hljs.registerLanguage('smali', require('highlight.js/lib/languages/smali'));
hljs.registerLanguage('smalltalk', require('highlight.js/lib/languages/smalltalk'));
hljs.registerLanguage('sml', require('highlight.js/lib/languages/sml'));
hljs.registerLanguage('sqf', require('highlight.js/lib/languages/sqf'));
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'));
hljs.registerLanguage('stan', require('highlight.js/lib/languages/stan'));
hljs.registerLanguage('stata', require('highlight.js/lib/languages/stata'));
hljs.registerLanguage('step21', require('highlight.js/lib/languages/step21'));
hljs.registerLanguage('stylus', require('highlight.js/lib/languages/stylus'));
hljs.registerLanguage('subunit', require('highlight.js/lib/languages/subunit'));
hljs.registerLanguage('swift', require('highlight.js/lib/languages/swift'));
hljs.registerLanguage('taggerscript', require('highlight.js/lib/languages/taggerscript'));
hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'));
hljs.registerLanguage('tap', require('highlight.js/lib/languages/tap'));
hljs.registerLanguage('tcl', require('highlight.js/lib/languages/tcl'));
hljs.registerLanguage('thrift', require('highlight.js/lib/languages/thrift'));
hljs.registerLanguage('tp', require('highlight.js/lib/languages/tp'));
hljs.registerLanguage('twig', require('highlight.js/lib/languages/twig'));
hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript'));
hljs.registerLanguage('vala', require('highlight.js/lib/languages/vala'));
hljs.registerLanguage('vbnet', require('highlight.js/lib/languages/vbnet'));
hljs.registerLanguage('vbscript', require('highlight.js/lib/languages/vbscript'));
hljs.registerLanguage('vbscript-html', require('highlight.js/lib/languages/vbscript-html'));
hljs.registerLanguage('verilog', require('highlight.js/lib/languages/verilog'));
hljs.registerLanguage('vhdl', require('highlight.js/lib/languages/vhdl'));
hljs.registerLanguage('vim', require('highlight.js/lib/languages/vim'));
hljs.registerLanguage('x86asm', require('highlight.js/lib/languages/x86asm'));
hljs.registerLanguage('xl', require('highlight.js/lib/languages/xl'));
hljs.registerLanguage('xquery', require('highlight.js/lib/languages/xquery'));
hljs.registerLanguage('zephir', require('highlight.js/lib/languages/zephir'));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
预览
除特别注明外，本站所有文章均为 竹风清语 原创，转载请注明出处来自： nuxtanxuyinruhighlightdaimagaoliangzujian
License CC BY-SA 4.0 以商业目的使用本网站原创内容需获许可，非商业目的使用授权遵循CC BY-NC 4.0
Loading comments...
3 条评论
  • W
    tt2021-11-12 02:14:32

    npm install highlight --save 应该 为 npm install highlight.js --save

  • W
    tt2021-11-12 02:13:43

    感谢 作者辛苦 !. 指出 一点坑 npm install highlight --save 应该为 npm install highlight.js --save

    • W
      蜜汁炒酸奶 2022-11-20 08:31:35

      回复 @tt： 感谢指正

example
预览