700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JS格式化代码和高亮显示

JS格式化代码和高亮显示

时间:2020-04-14 15:20:17

相关推荐

JS格式化代码和高亮显示

前端开发中经常遇到了一个需要,即在页面上显示一些代码。这时候就需要考虑在前端对某些代码进行格式化处理,比如压缩过的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'),'&lt;').replace(new RegExp('>','gm'),'&gt;')。 注2: 有时候需要对美化显示的内容进行编辑,那么增加contenteditable='true'属性,即 <pre class='prettyprint' contenteditable='true'>就可以达到。然后通过原生DOM元素的innerText属性就能拿到想要的编辑之后的结果。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。