评论资讯 [ 总 474 则 ]
·飞飞 - 2025-3-11 14:40
·飞飞 - 2025-3-9 16:50
·悄然 - 2025-3-7 20:53
·悄然 - 2025-3-7 18:24
·飞飞 - 2025-3-5 18:47
·马黑 - 2025-3-5 11:58
·飞飞 - 2025-3-3 19:26
·小希 - 2025-2-28 19:08
·马黑 - 2025-2-26 17:47
·飞飞 - 2025-2-26 15:07
·飞飞 - 2025-3-9 16:50
·悄然 - 2025-3-7 20:53
·悄然 - 2025-3-7 18:24
·飞飞 - 2025-3-5 18:47
·马黑 - 2025-3-5 11:58
·飞飞 - 2025-3-3 19:26
·小希 - 2025-2-28 19:08
·马黑 - 2025-2-26 17:47
·飞飞 - 2025-2-26 15:07
友情链接
网站统计
前端代码着色模块使用说明
colorcode 前端代码着色模块使用正则表达式以极简的方式实现代码着色功能，模块集成自身所需CSS样式，以关键字和CSS、HTML、JS代码特征进行着色渲染，功能并非完备但或可聊胜于无。其开发定位着眼于对已有代码的着色，使用极其简便。举例如下：
<div class="mum"><pre>
</pre></div>
//自由环境引用模块方法
<script charset='utf-8' src='https://638183.freep.cn/638183/web/js/colorcode.js'></script>
//通用引用模块方法（支持dz论坛）
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);
</script>
上述用法，应根据使用环境决定如何引用资源模块，注意，同一个页面仅使用其中一种。成功引用模块，代码着色效果将如上所示。
模块支持前端代码注释，即如下三种注释方法：
// JS单行注释 /* JS、CSS单行、多行注释 */ /* 多行注释演示 ABCD */ /* 多行注释演示 abcdefg */
至此大家可能已经发现，同一个页面，可以在多处给前端代码着色。方法仅是使用：
<div class="mum"><pre>你的代码</pre></div>
不过必须注意： 代码中所有符号 < 和 > 最好分别转义为 < 和 >！强烈建议使用文本编辑器对代码进行批量转换。此外，如果需要自定义边框、背景色等，可以在web代码内使用CSS进行设置：
/* 使用 CSS 设置 */
.mum { background: lightblue; border: 1px solid gray; }
/* 或在HTML代码中使用 style 方法设置 */
<div class="mum" style="background: #eee; border: 1px solid #333;"><pre>
//你的代码
</pre></div>
前一篇: 字符与Unicode、html实体编码互转
下一篇: 帖子代码在线着色
发表评论:
评论列表 [5条]
#5 | 小希 于 2024-2-25 13:41 发布: 这么快就有更好更优更便捷的产品代替了。。。哎。。研发节奏杠杠的。。
#4 | 了了 于 2024-2-21 21:55 发布: 这个边框有立体感，也是精心设计的。。还加了边框代码，可改色。。老师太细心了。
#3 | 飞飞 于 2024-2-20 17:31 发布: 完美的着色带行号不需要补救代码了。。。^_^
#2 | 知名不具 于 2024-2-19 21:21 发布: 做成模块，使用更方便了。很赞。
#1 | 悄然 于 2024-2-18 21:24 发布: https://638183.freep.cn/638183/web/js/colorcode.js 一句JS就代替之前那么多代码，对使用的人十分友好，黑师厉害^-^
