<pre>标签内JavaScript代码的高亮显示插件

最新推荐文章于 2024-05-15 12:13:31 发布
最新推荐文章于 2024-05-15 12:13:31 发布
阅读量928 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript highlight 高亮显示 innerHTML IE8 ViewUI

插件经过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;
}

 

这里要注意各匹配的优先级关系，匹配嵌套时的以最外层颜色为准。

 

下载代码请看附件，有任何问题请私信联系~

tjuking
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pre 显示html代码插件,pre标签内JavaScript代码的高亮显示插件
weixin_42275078的博客
06-07 627
插件经过IE6-10、Chrome、Firefox等浏览器的测试。目前支持关键字、字符串、注释、正则表达式的高亮显示，现在逻辑可能比较简单，后期会继续完善。使用示例：Html代码Page Title//this is commentvar me = "tjuking";var reg = /[0-9]*/g;需要在head标签内引入CSS文件，在body标签结束前引入JS文件，需要加亮的pre标签...
标签内JavaScript代码的高亮显示插件
04-19
NULL 博文链接：https://tjuking.iteye.com/blog/1865994
CKEditor5 代码块美化、代码高亮
最新发布
一个小白
05-15 170
CKEditor5 代码块美化、代码高亮
插件insertpre+语法高亮插件google-code-prettify，解决CKEditor4代码高亮显示问题
dongxldante的专栏
12-21 1223
CKEditor4的外观界面我很喜欢，所以一直在使用，但是对代码高亮没有很好的支持，如何使代码高亮显示呢？使用插件insertpre+语法高亮插件google-code-prettify可以很好地解决这个问题。 一 下载地址 CKEditor4下载地址：http://ckeditor.com/download insertpre plugin下载地址：http://ckeditor.
代码语法高亮踩坑-原理，问题, PRE元素及htmlentity
weixin_30897079的博客
08-20 337
语法高亮库基础原理 在研究使用能够在web页面上代码语法高显的解决方案时，发现有很多现成的开源库。比较中意的有prism.js,highlightjs。他们的原理基本上核心就两点: 1. 利用html的<pre>特性:即原封不动显示code 2. 针对不同源代码其语法结构特点，设计该语言的正则匹配规则集。库代码将针对待高显的源代码做正则匹配，形成新的显示内容，该内容由浏...
html pre 显示script,BootStrap网页中代码显示<code><pre>用法详解
weixin_34515820的博客
06-27 301
网页中代码的显示，包括行中代码显示；成段的代码显示，效果图如下String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>质量录入代码的使用Bootstrap是基...
js比较两个字符串，高亮标出不同处
DongGu0417的博客
08-16 7251
下面是测试图，各位自己看一下。 话不多说，直接Push代码，至于是为什么，就自己研究了，因为我这边也是因为客户需求才会写这一段。 CSS代码 textarea { border: 1; overflow: auto; height: 100%; width: 100% } input { border: 1; overflow: aut...
js代码高亮显示 JavaScript代码高亮 jsp
05-17
<pre><code class="language-javascript">你的JavaScript代码</code></pre> <script>hljs.highlightAll();</script> ``` 4. 自定义样式：如果你需要自定义高亮风格，可以创建自己的CSS样式覆盖默认样式，或者使用库...
Highlightjs是一个用JavaScript写的代码高亮插件
08-09
3. **语言指定**：对于某些代码块，你可能需要明确指定语言，可以添加`class="language-name"`属性到`<code>`标签，例如`<code class="language-javascript">`。 4. **应用主题**：通过更改CSS类名或引入预设的主题...
JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 <font color=red>原创</font>
10-21
3. **加载库**：在`<body>`标签内，使用以下JavaScript代码初始化`highlight.js`库： ```html <script>hljs.initHighlightingOnLoad();</script> ``` 这个函数会在页面加载完成后自动处理页面中的代码块。 ###...
代码高亮prism插件
06-05
Prism是一款广泛使用的开源代码高亮插件，尤其在网页和博客中常见，它能够将源代码美化，使得代码段更易于阅读和理解。这款插件以轻量级和高效著称，支持多种编程语言，包括但不限于JavaScript。下面我们将详细讨论...
让pre标签自动换行示例代码
12-14
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。对于技术博客经常会用到pre标签输出代码或是代码高亮，而默认情况下，pre 标签中的内容若超出范围不会自动换行。 下面介绍一个方法让 <pre> 标签中的内容自动换行并符合 W3C 标准（多浏览器支持） 复制代码代码如下: pre{ white-space:pre-wrap; /* css3.0 */ white-space:-moz-pre-wrap; /* Firefox */ white-space:-pre-w
vue—highlight.js在Vue中的使用（pre标签代码高亮）
qq_45997679的博客
03-20 5973
1、highlight.js介绍。 highlight.js用于在web界面对pre标签的美化。 2、在Vue中highlight.js环境的配置。 此处参考highlight官网给出的文档：如何使用Highlight.js 首先cnpm安装依赖： cnpm install highlight.js 其次在main.js 中导入所需配置： import hljs from "highlight.js"; import "highlight.js/styles/atelier-cave-dark.css"
页面标签pre和code标签添加高亮的样式
m0_49304996的博客
04-14 2983
pre和code标签代码块高亮显示 基于 highlight.js 美化详情页的代码片段 （1） 下载此插件到项目中如果(yarn或node基于自己环境决定) yarn add highlight.js@10.6.0 -D npm i highlight.js@10.6.0 -D （2）.在main.js 引入即可 import 'highlight.js/styles/default.css' // 代码高亮的样式 它会自动给页面标签pre和code标签添加高亮的样式 ...
HTML<pre>代码美化
李观杰的博客
10-16 6806
基于javascript的一款运行在web页面的漂亮荧光线插件。 你是否需要一款像本文一样优美的现实各种代码片段的需求，你是否还在苦苦寻找，那么我来帮助你了，本文将介绍一款基于javascript的一款运行在web页面的漂亮荧光线插件，效果非常漂亮呢。 SHJS 语法简单而高效一款javascript荧光线工具 // 下载 http://shjs.sourceforge.net/doc/downl...
pre 显示html代码插件,用<pre>和<code>显示源代码
weixin_29638241的博客
06-07 1147
在HTML中，这个元素表示在其中的内容，保留空格和换行，即保留原来就有的格式信息。而这个元素，就是告诉浏览器，这个元素里面的内容是源代码。由于源代码都有格式，比如换行和空格对齐等，因此在网页上显示源代码，就需要保留这些源代码的格式信息。比如下面这段python实现的冒泡排序算法在网页上的显示：def bubble_sort(array):for i in range(len(array)-1):f...
vue中使用＜pre＞＜code＞标签插入演示代码的高亮插件-vue-highlight的使用
hellenYuan的博客
03-27 2203
npm install vue-code-highlight --save 局部引入 import { component as VueCodeHighlight } from 'vue-code-highlight'; components:{ VueCodeHighlight, ... } <vue-code-highlight> //Paste your code here </vue-code-highlight> 全局引入 import VueCodeH.
pre标签的样式
weixin_39037804的博客
09-17 6857
　　你可能正在使用 <pre> 标签。这是一个 HTML 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一...
ideal 中实现js 高亮的插件
07-11
对于实现 JavaScript 高亮的插件，我推荐使用 Prism.js。Prism.js 是一个轻量级的、功能强大的代码语法高亮库，支持多种编程语言，包括 JavaScript。 要在你的网页中使用 Prism.js，你需要进行以下步骤： 1. 首先，下载 Prism.js 的最新版本。你可以从 Prism.js 的官方网站（https://prismjs.com/）上获取到它的最新版本。 2. 将 Prism.js 文件引入到你的网页中。你可以将其放置在 `<head>` 标签中，也可以放置在 `<body>` 标签的末尾。例如： ``` <head> <link rel="stylesheet" href="path/to/prism.css" /> <script src="path/to/prism.js"></script> </head> ``` 3. 在需要进行语法高亮的 `<pre>` 或 `<code>` 标签中添加对应的 class。例如，如果你想高亮一段 JavaScript 代码，可以这样写： ``` <pre><code class="language-javascript"> // Your JavaScript code goes here </code></pre> ``` 4. 在页面加载完成后，调用 Prism.highlightAll() 函数来进行语法高亮。例如，在 `<body>` 标签的末尾添加以下代码： ``` <script> Prism.highlightAll(); </script> ``` 这样，你就可以在网页中实现 JavaScript 代码的高亮了。你可以根据自己的需求自定义 Prism.js 的样式，并通过它提供的丰富的 API 进行更多的定制化操作。希望这能帮到你！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值