JS格式化代码和高亮显示

前端开发中经常遇到了一个需要，即在页面上显示一些代码。这时候就需要考虑在前端对某些代码进行格式化处理，比如压缩过的JS。格式化之后，为了显示效果，需要进行代码高亮。

为解决这两个问题，引入两个常用库。

JS Beautifier

https://github.com/beautify-web/js-beautify

基于JS的代码格式化，支持 JS，HTML，CSS。可以将压缩过的文件，格式化成方便阅读并符合常规规范的格式。例如：

if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

会格式化成：

if ('this_is' == /an_example/) {

of_beautifier();

} else {

var a = b ? (c % d) : e[f];

}

在 http://jsbeautifier.org/ 可以看到效果演示

基础用法：

导入JS文件（下面列的是GitHub项目主页上列出的CDN，也可以将文件下载到本地再引入）：

调用：

js_beautify(targetString);

html_beautify(targetString);

css_beautify(targetString);

注：当需要转化的字符串很大的时候，转化会比较慢。甚至会导致页面卡顿。

code-prettify

https://github.com/google/code-prettify

基于JS的代码显示美化，支持不同的主题。例如：

https://jmblog.github.io/color-themes-for-google-code-prettify/ 可以看到有不同主题供使用。

基础用法： https://github.com/google/code-prettify/blob/master/docs/getting_started.md

导入JS文件（下面列的是GitHub项目主页上列出的CDN，也可以将文件下载到本地再引入）：

自动加载： <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

效果相当于：

以上过程，表示在body载入完成之后，调用prettyPrint()方法。自动加载实际上就是简化了引入文件和调用方法的过程。

对于第三方的样式，直接下载CSS引入即可。例如：

调用：

这一段指定了代码类型

XXX

</pre>

这一段指定了显示行号

如果页面是静态的，上述标签会在页面初始化之后经由执行 prettyPrint() 而格式化完成。

如果页面是动态的，那么初始化执行 prettyPrint() 对后续生成的代码不起作用，为此，需要在动态新增代码显示的地方再执行一次 prettyPrint()；例如：

$("#res-content").html(

"<pre class='prettyprint'>" +

content.replace(new RegExp('<','gm'),'<').replace(new RegExp('>','gm'),'>') +

"</pre>"

);

prettyPrint();

注：

在页面中显示HTML，为了防止被作为DOM树进行解析，可以用 <pre></pre> 标签，同时也可以进行 “<” 和 “>” 的替换 content.replace(new RegExp('<','gm'),'<').replace(new RegExp('>','gm'),'>')。

注2：

有时候需要对美化显示的内容进行编辑，那么增加contenteditable='true'属性，即<pre class='prettyprint' contenteditable='true'>就可以达到。然后通过原生DOM元素的innerText属性就能拿到想要的编辑之后的结果。

秒客网

JS格式化代码和高亮显示

相关文章