vue 使用 highlight.js 高亮代码块

网址：https://highlightjs.org/

在 vue 中实现代码块高亮，即<pre><code>标签中用于直接在页面中展示的代码，增加高亮显示的效果，可以使用 highlight.js 来帮助我们实现。

一、首先下载 highlight.js

npm install highlight.js -S --registry=https://registry.npm.taobao.org

二、然后在工程的 main.js 中引入这个工具

// 引入 highlight.js 代码高亮工具
import hljs from "highlight.js";
// 使用样式，有多种样式可选
import "highlight.js/styles/github-gist.css";
// 增加自定义命令v-highlight
Vue.directive("highlight", function(el) {
  let blocks = el.querySelectorAll("pre code");
  blocks.forEach(block => {
    hljs.highlightBlock(block);
  });
});
// 增加组定义属性，用于在代码中预处理代码格式
Vue.prototype.$hljs = hljs;

三、使用

1. 在代码块的父标签中使用自定义命令 v-highlight，子元素中的<pre>和<code>标签中的代码便会自动高亮。

<div v-highlight>
  <pre>
    <code>
function() {
  console.log(\"Hello world!\");
}
    </code>
  </pre>
</div>

2. 如果代码块没有被包含在<pre>和<code>标签中，可以使用 vue.$hljs.highlightAuto("...").value 来格式化代码，然后再将格式化之后的代码渲染到页面上。

<template>
 <div v-html="codeHtml" v-highlight></div>
</template>

<script>
export default {
  data() {
    return {
      codeHtml: ""
    }
  },
  monted() {
    this.format();
  },
  methods: {
    format() {
      let code = "function() { console.log(\"Hello world!\"); }";
      const html = this.$hljs.highlightAuto(row.message).value;
      this.codeHtml = html;
    }
  }
}
</script>

四、可用样式风格

引入样式在 "highlight.js/styles/" 中，引用时将样式名字大写转小写并将名字之间的空格替换为"-"，再在最后添加 ".css" 后缀，例如：Github Gist → github-gist.css

Demo：https://highlightjs.org/static/demo/

1. Default
2. A 11 Y Dark
3. A 11 Y Light
4. Agate
5. An Old Hope
6. Androidstudio
7. Arduino Light
8. Arta
9. Ascetic
10. Atelier Cave Dark
11. Atelier Cave Light
12. Atelier Dune Dark
13. Atelier Dune Light
14. Atelier Estuary Dark
15. Atelier Estuary Light
16. Atelier Forest Dark
17. Atelier Forest Light
18. Atelier Heath Dark
19. Atelier Heath Light
20. Atelier Lakeside Dark
21. Atelier Lakeside Light
22. Atelier Plateau Dark
23. Atelier Plateau Light
24. Atelier Savanna Dark
25. Atelier Savanna Light
26. Atelier Seaside Dark
27. Atelier Seaside Light
28. Atelier Sulphurpool Dark
29. Atelier Sulphurpool Light
30. Atom One Dark Reasonable
31. Atom One Dark
32. Atom One Light
33. Brown Paper
34. Codepen Embed
35. Color Brewer
36. Darcula
37. Dark
38. Docco
39. Dracula
40. Far
41. Foundation
42. Github Gist
43. Github
44. Gml
45. Googlecode
46. Gradient Dark
47. Gradient Light
48. Grayscale
49. Gruvbox Dark
50. Gruvbox Light
51. Hopscotch
52. Hybrid
53. Idea
54. Ir Black
55. Isbl Editor Dark
56. Isbl Editor Light
57. Kimbie Dark
58. Kimbie Light
59. Lightfair
60. Lioshi
61. Magula
62. Mono Blue
63. Monokai Sublime
64. Monokai
65. Night Owl
66. Nnfx Dark
67. Nnfx
68. Nord
69. Obsidian
70. Ocean
71. Paraiso Dark
72. Paraiso Light
73. Pojoaque
74. Purebasic
75. Qtcreator Dark
76. Qtcreator Light
77. Railscasts
78. Rainbow
79. Routeros
80. School Book
81. Shades Of Purple
82. Solarized Dark
83. Solarized Light
84. Srcery
85. Stackoverflow Dark
86. Stackoverflow Light
87. Sunburst
88. Tomorrow Night Blue
89. Tomorrow Night Bright
90. Tomorrow Night Eighties
91. Tomorrow Night
92. Tomorrow
93. Vs
94. Vs 2015
95. Xcode
96. Xt 256
97. Zenburn