插件经过IE6-10、Chrome、Firefox等浏览器的测试。
目前支持关键字、字符串、注释、正则表达式的高亮显示,现在逻辑可能比较简单,后期会继续完善。
使用示例:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css/js-highlighter.css"/> </head> <body> <pre class="highlighter"> //this is comment var me = "tjuking"; var reg = /[0-9]*/g; </pre> <script src="js/js-highlighter.js"></script> </body> </html>
需要在head标签内引入CSS文件,在body标签结束前引入JS文件,需要加亮的pre标签添加class值“highlighter“。
JS代码:
(function(doc){ var hls = getHighlighters("highlighter"); for(var i=0; i<hls.length; i++){ var content = hls[i].innerHTML; var varReg = /([^\w\.\$_])(break|case|catch|continue|debugger|default|delete|do|else|finally|for|function|if|in|instanceof|new|return|switch|this|throw|try|typeof|var|void|while|with)([^\w])/g; var strReg = /(".*?")|('.*?')/g; var commentReg = /([^\\]\/\/.*)|(\/\*(.|\n\r|\n)*\*\/)/g; var regReg = /[^<](\/.+?[^<]\/[gim])/g; content = content.replace(strReg, "<span class='hl-st'>$&</span>"); content = content.replace(regReg, "<span class='hl-rg'>$&</span>"); content = content.replace(commentReg, "<span class='hl-cm'>$&</span>"); content = content.replace(varReg, "$1<span class='hl-kw'>$2</span>$3"); //IE8及以下版本通过innerHTML获取的文本丢失换行,多添加pre标签属于hack hls[i].innerHTML = "<pre>" + content + "</pre>"; } //获取需要JavaScript代码块 function getHighlighters(searchClass) { var classElements = [], els = document.getElementsByTagName("pre"), elsLen = els.length, pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for(i=0, j=0; i<elsLen; i++){ if(pattern.test(els[i].className)){ classElements[j] = els[i]; j++; } } return classElements; } })(document);
IE8及以下版本中,使用innerHTML获取pre标签内的文本时,会丢失换行。通过在外层添加pre标签能够解决这个问题。
CSS配色:
.hl-cm{ color: #5C8026; } .hl-cm .hl-st, .hl-cm .hl-kw, .hl-cm .hl-rg{ color: #5C8026; font-weight: normal; } .hl-st{ color: #0000FF; } .hl-st .hl-kw, .hl-st .hl-rg, .hl-rg .hl-cm{ color: #0000FF; } .hl-rg{ color: #DAA520; } .hl-rg .hl-kw, .hl-rg .hl-st, .hl-rg .hl-cm{ color: #DAA520; font-weight: normal; } .hl-kw{ color: #A52A2A; font-weight:bold; }
这里要注意各匹配的优先级关系,匹配嵌套时的以最外层颜色为准。
下载代码请看附件,有任何问题请私信联系~
相关推荐
NULL 博文链接:https://tjuking.iteye.com/blog/1865994
NULL 博文链接:https://mauersu.iteye.com/blog/2003195
为网站代码块pre标签增加一个复制代码按钮代码 参考其他比较专业的博客系统,都在代码块上有一个复制代码的按钮。用来快速复制整个代码块的代码。于是我也想给我的博客增加一个这个功能。 注:chrome测试通过。...
HTML标签--文档 <!DOCTYPE> 文档类型 <html>文档 <body>文档主体 <h1> to <h6> HTML 标题 ...<pre>格式文本 <code>代码文本 <tt>打字机文本 <kbd>键盘文本 <var>变量文本 <dfn>项目文本 <samp>代码样本
高亮显示代码放在<pre><code> .. </code></pre> 要改变高亮显示的样式 则需改变引入的css样式即可,下载插件包的时候有一个style文件夹里面有多种css样式可选择。 这些插件使用的时候均需要将后台的特殊字符用html的...
<head></head> 设置文档标题和其它在网页中不显示的信息 <title></title> 设置文档的标题 <h1></h1> 最大的标题 <pre></pre> 预先格式化文本 <u></u> 下划线 <b></b> 黑体字 <i></i> 斜体字 <tt></tt> 打字机...
启用换行<pre>标签。只要您想恢复到默认行为,请取消选中“已启用”。 我对邮件列表感到恼火之后写了这个扩展名,该邮件列表在单个不可读的行上显示了整个段落。 它注入了一些CSS来启用换行 支持语言:English ...
3、文档设置标记上-格式标(<br><p><center><pre><li><ul><ol><dl><dt><dd><hr><div>) 4、文档设置标记下-文本标记(<hn><font><b><i><sub><sup><tt><cite><em><strong><small><big><u>) 5、含有教程笔记,大纲,...
<head></head> 设置文档标题和其它在网页中不显示的信息 <title></title> 设置文档的标题 <h1></h1> 最大的标题 <pre></pre> 预先格式化文本 <u></u> 下划线 <b></b> 黑体字 <i></i> 斜体字 <tt></tt> 打字机...
ajax返回的内容,居然自动添加了<pre>标签 在FF,ie,谷歌浏览器中,每个返回的都不一样:ff小写,ie大写,谷歌加style 查了一下,原来是返回的类型不对。 最终解决结果,修改一般处理程序的返回类型 把 context....
# KZH-Lottery ###功能实现: * 随机抽奖闪动效果 * 引入数字指定中奖位置 ###技术要点: ...* 每次调用定时器递增当前时间,通过减结束时间控制递减时间并每次调用自身,直到当前时间大于结束时间终止...</code></pre>
最轻量级网页代码片段高亮显示插件,多样式可选,支持文件链接显示,亲测可用,详见 example.html 演示示例. <link href="prism-coy.css" rel="stylesheet" /> <script src="prism.js"></script> <!-- 直接载入文件方式...
将.svg文件用于图标/徽标和说明性图像,保持文件大小较低使用example.org 自定义命令/文件信息应该用<strong>标签突出显示在<pre>标签上内嵌代码应该在<code>标签中,而代码块应该在<pre>标签内的<code> <pre>标签...
<pre></pre>格式化原样式输出 --> <br><br> <table border="1" cellspacing="0" cellpadding="5" align="center" width="40%"> <caption><strong>明星排行榜</strong> <a href="">添加</a></caption> <!-- ...
25.zip<br>SMTP MFC Classes<br>SMTP协议类(6KB)<END><br>103,26.zip<br>Pre-emptive Multithreading Web Spider<br>多线程的网络蜘蛛(7KB)<END><br>104,27.zip<br>Updated SMTP Class<br>更新的SMTP类(5KB)<END><br...
<br><br>PicBrowseFrame.class 图片浏览器的主窗体<br><br>ImageFilter.class 图片过滤<br><br>FileNameFIlter.class 文件过滤<br><br>...<br>ImagePre.class 图片预览<br><br>imageIsvisible.class 图片的相关操作<br>
<br><br>General C/C++<br>Pre-processor commands <br>Operator Precedence <br>Escape Sequences <br>ASCII Chart <br>Data Types <br>Keywords <br>Standard C Library<br>Standard C I/O <br>Standard C String ...
29、<embed> 定义外部交互内容或插件。 30、<fieldset> 可将表单内的相关元素分组。 31、<figcaption> 定义 figure 元素的标题。 32、<figure> 定义媒介内容的分组。 33、<footer> 定义section/page的页脚。 34、...
本文实例讲述了jQuery实现将页面上HTML标签换成另外标签的方法。... 代码如下:$(‘code’).contents().unwrap().wrap(‘<pre>’); 或者: $('code').replaceWith(function(){ return $("<pre>").append
Practical Mod Perl<br><br> Copyright <br> Preface <br> What You Need to Know <br> Who This Book Is For <br> How This Book Is Organized <br> Reference Sections <br> Filesystem Conventions <br> Apache ...