Fork me on GitHub

高亮代码的集结

发表于 | 分类于 |
字数统计: 1,131 | 阅读时长 ≈ 6

前言

之前因为有需要，就对代码高亮这块儿特别关注了下，然后发现插件有很多，花了一段时间功夫，对各个不同的代码高亮插件都过了一遍，现将其都总结了下。

贴代码

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>highlightDemo</title>
		<!--样式可以自己选择，引用不同的样式文件即可-->
		<link rel="stylesheet" href="css/highlight/agate.css" />
		<script type="text/javascript" src="js/highlight/highlight.pack.js" ></script>
		<script type="text/javascript">
			hljs.initHighlightingOnLoad();
		</script>
	</head>
	<body>
		<p>一段java代码</p>
		<pre>
<code class="java">
public static void main(String []args){
	System.out.println("Hello World");
}
</code>
		</pre>
		<p>一段bash命令</p>
		<pre>
<code class="bash">
	cd /tmp
	pwd
	touch firstTemp
</code>
		</pre>
	</body>
</html>

prettify

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>prettifyDemo</title>
		<link rel="stylesheet" href="css/prettify/prettify.css" />
		<link rel="stylesheet" href="css/prettify/desert.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/prettify/prettify.js" ></script>
	</head>
	<body onload="prettyPrint()">
		<p>一段css代码块儿</p>
		<pre class="prettyprint">
*{
	margin : 0 ;
	padding : 0 ;
}
		</pre>
		<p>一段java代码块儿</p>
		<pre class="prettyprint">
public static void main(String []args){
	System.out.println("Hello World");
}
		</pre>
	</body>
</html>

prism

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>prismDemo</title>
		<link rel="stylesheet" href="css/prism/prism.css" />
		<link rel="stylesheet" href="css/prism/prism-line-numbers.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/prism/prism.js" ></script>
		<script type="text/javascript" src="js/prism/prism-line-numbers.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				var code = "var data = 1;";
				var html = Prism.highlight(code, Prism.languages.javascript);
				$("#abc").html(html);
			});
		</script>
	</head>
	<body>
		<p>一段css代码块儿</p>
		<pre class="line-numbers"><code class="language-css">p { color: red }</code></pre>
		<p>一段java代码块儿</p>
		<pre class="line-numbers"><code class="language-java">public static void main(String []args){
	System.out.println("Hello World");
}</code></pre>
		<p>动态添加的js代码块儿</p>
		<div id="abc"></div>
	</body>
</html>

rainbow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>rainbowDemo</title>
		<link rel="stylesheet" type="text/css" href="css/rainbow/kimbie-dark.css"/>
		<script type="text/javascript" src="js/rainbow/rainbow-custom.min.js" ></script>
	</head>
	<body>
		<p>一段java代码块儿</p>
		<pre><code data-language="java">
public static void main(String []args){
	System.out.println("Hello World");
}
</code></pre>
		<p>一段css代码块儿</p>
		<pre><code data-language="css">
*{
	margin: 0 ;
	padding : 0 ;
}
</code></pre>
	</body>
</html>

SyntaxHighlighter

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>SyntaxHighlighterDemo</title>
		<link rel="stylesheet" href="css/SyntaxHighlighter/shCore.css" />
		<link rel="stylesheet" href="css/SyntaxHighlighter/shThemeDefault.css" />
		<script type="text/javascript" src="js/SyntaxHighlighter/shCore.js" ></script>
		<!--需要哪个语言的就要导入哪个语言的js包shBrushXxx.js，且一定要放在核心包的下面-->
		<script type="text/javascript" src="js/SyntaxHighlighter/shBrushJava.js" ></script>
		<script type="text/javascript" src="js/SyntaxHighlighter/shBrushCss.js" ></script>
		<script type="text/javascript">
			SyntaxHighlighter.all();
		</script>
	</head>
	<body>
		<p>一段java代码块儿</p>
		<pre class="brush:java">
			public static void main(String []args){
				System.out.println("Hello World");
			}
		</pre>
		<p>一段css代码块儿</p>
		<pre class="brush:css">
			*{
				margin : 0 ;
				padding : 0 ;
			}
		</pre>
	</body>
</html>

效果展示

highlight

http://github.ifdream.xin/demo/highlight/highlightDemo.html

prettify

http://github.ifdream.xin/demo/prettify/prettifyDemo.html

prism

http://github.ifdream.xin/demo/prism/prismDemo.html

rainbow

http://github.ifdream.xin/demo/rainbow/rainbowDemo.html

SyntaxHighlighter

http://github.ifdream.xin/demo/SyntaxHighlighter/SyntaxHighlighterDemo.html

资源文件链接

highlight

1
2
3
4
http://github.ifdream.xin/css/highlight/default.css
http://github.ifdream.xin/css/highlight/androidstudio.css
http://github.ifdream.xin/css/highlight/agate.css
http://github.ifdream.xin/js/highlight/highlight.pack.js

prettify

1
2
3
4
5
6
7
8
http://github.ifdream.xin/css/prettify/prettify.css
http://github.ifdream.xin/css/prettify/sunburst.css
http://github.ifdream.xin/css/prettify/sons-of-obsidian.css
http://github.ifdream.xin/css/prettify/doxy.css
http://github.ifdream.xin/css/prettify/desert.css
http://github.ifdream.xin/js/jquery.min.js
http://github.ifdream.xin/js/prettify/prettify.js
http://github.ifdream.xin/js/prettify/run_prettify.js

prism

1
2
3
4
5
http://github.ifdream.xin/css/prism/prism.css
http://github.ifdream.xin/css/prism/prism-line-numbers.css
http://github.ifdream.xin/js/jquery.min.js
http://github.ifdream.xin/js/prism/prism.js
http://github.ifdream.xin/js/prism/prism-line-numbers.min.js

rainbow

1
2
3
http://github.ifdream.xin/css/rainbow/kimbie-light.css
http://github.ifdream.xin/css/rainbow/kimbie-dark.css
http://github.ifdream.xin/js/rainbow-custom.min.js

SyntaxHighlighter

1
2
3
4
5
http://github.ifdream.xin/css/SyntaxHighlighter/css.zip
http://github.ifdream.xin/js/shCore.js
http://github.ifdream.xin/js/shBrushXml.js
http://github.ifdream.xin/js/shBrushJava.js
http://github.ifdream.xin/js/shBrushCss.js

结语

以上纯属博主自己整理总结，若有纰漏或有错误，欢迎读者留言指出，本博客将定址更新！

-------------本文结束感谢您的阅读-------------
如果您对博主的原创满意，欢迎您继续支持下博主~
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多