前言；平常我们在网页中如果要引入代码时，如果没有高亮染色插件会出现代码和文字描述一样的颜色，让要表达的代码非常不方便阅读。这里我们介绍如何配置和使用highlight.js这个性能和稳定性都非常高的代码高亮染色插件对网页中的说明代码进行高亮染色，从而增加你的技术博客上程序代码的可读性。
打开highlight.js官网下载最新版本
到目前为止highlight.js最新版本是9.13.1这个版本，具体的源代码可以登录highlightjs.org上面去进行下载，具体方法是进入主页后--点击“get version 9.13.*”更具你自己选择版本， 然后会打开一个网页默认勾选了“common”列表中一些常用支持的程序语言，大多数情况直接用这个即可，当然你也可以根据你自己的需求勾选下面的其他编程语言的染色。但是这里牛人技术建议，在初步测试时只使用默认的语言支持即可。完成勾选就可以点击“Download”这个了。当然你也可以直接使用牛人技术博客提供超级链接，直接调用上面的文件。链接如下：
<link rel="stylesheet"href="//www.nrjs.cn/res/highlight/styles/default.css">
<script src="//www.nrjs.cn/res/highlight/highlight.pack.js"></script><script>hljs.initHighlightingOnLoad();//加载代码高亮染色方法</script>
使用标签对代码进行染色
完成上面的代码下载和安装后就可以使用highlight.js插件对网页中的代码进行染色和高亮处理了。首先找到你要染色的代码然后在代码的开头增加<pre><code class="php">两个标签,其中class是选择对什么样的编程语言进行染色。然后在要染色的代码后面增加结束标签</code></pre>这样就能实现对源代码染色了。范例
<html>
<head>
<title>PHP 测试</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
注意；有些代码有<>这样的符号，这些类型的符号要使用<和>等字符进行转义，否则代码染色会失败。
总结；当然程序代码染色插件还有很多比如，SyntaxHighlighter – 最优秀的JavaScript代码高亮插件，Google Code Prettify – 自由地JavaScript代码高亮插件，Prism.JS - 轻量级JavaScript代码高亮插件，DlHighlight – jQuery简单高效代码高亮插件等等。都可以尝试下
网友评论 comments