前端开发中经常遇到了一个需要,即在页面上显示一些代码。这时候就需要考虑在前端对某些代码进行格式化处理,比如压缩过的JS。格式化之后,为了显示效果,需要进行代码高亮。 为解决这两个问题,引入两个常用库。
JS Beautifier /beautify-web/js-beautify
基于JS的代码格式化,支持 JS,HTML,CSS。可以将压缩过的文件,格式化成方便阅读并符合常规规范的格式。 例如: 在 /可以看到效果演示
基础用法: 注:当需要转化的字符串很大的时候,转化会比较慢。甚至会导致页面卡顿。
code-prettify /google/code-prettify
基于JS的代码显示美化,支持不同的主题。例如: https://jmblog.github.io/color-themes-for-google-code-prettify/可以看到有不同主题供使用。
基础用法: /google/code-prettify/blob/master/docs/getting_started.md
注: 在页面中显示HTML,为了防止被作为DOM树进行解析,可以用 <pre></pre> 标签,同时也可以进行 “<” 和 “>” 的替换 content.replace(new RegExp('<','gm'),'<').replace(new RegExp('>','gm'),'>')。 注2: 有时候需要对美化显示的内容进行编辑,那么增加contenteditable='true'属性,即 <pre class='prettyprint' contenteditable='true'>就可以达到。然后通过原生DOM元素的innerText属性就能拿到想要的编辑之后的结果。