代码高亮显示插件prismjs的使用

官网：https://prismjs.com/download.html

1、简单使用

html里面引入prism-all.css及prism-all.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="prism-all.css" rel="stylesheet" />
</head>
<body>
<script src="prism-all.js"></script>
<pre class="language-java">
<code>
public void haha() {
String a = "b";
System.out.println("haha");

}
</code>
</pre>
</body>
</html>

效果

2.vue项目使用

2.1cnpm安装插件

1 2	cnpm install prismjs -S cnpm install babel-plugin-prismjs -D

2.2在.babelrc文件中配置

1
2
3
4
5
6
7
8

"plugins": ["transform-vue-jsx", "transform-runtime", //.babelrc文件中plugins选项里配置
["prismjs", {
"languages": ["javascript", "css", "markup", "java", "html"],
"plugins": ["line-numbers", "highlight-keywords"],
"theme": "default",
"css": true
}]
],

languages:javascript, css, markup, java, html等