本文介绍了前端开发中用于代码格式化和高亮显示的两个常用库：JS Beautifier和code-prettify。JS Beautifier能够将压缩的JS、HTML和CSS代码转换为易读格式，而code-prettify则提供了多种主题，用于美化代码显示。在页面上展示HTML代码时，需使用<pre>标签，并处理尖括号以防止DOM解析。若需要编辑显示的代码，可以添加contenteditable属性。
前端开发中经常遇到了一个需要，即在页面上显示一些代码。这时候就需要考虑在前端对某些代码进行格式化处理，比如压缩过的JS。格式化之后，为了显示效果，需要进行代码高亮。
为解决这两个问题，引入两个常用库。
JS Beautifier
基于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/ 可以看到效果演示
基础用法：
最低0.47元/天 解锁文章
扫一扫
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
