Alvin-codehighlight NPM

CodeHighlight

一款轻量可扩展的前端代码高亮插件

一、通过 Node 引用

npm i alvin-codehighlight

在 VUE 的 SPA 中的使用示例：

<template>
  <div id="main">
    <pre class="CodeHighlight">
&lt;html>
&lt;head>
&lt;title>Thumbnail Navigation&lt;/title>
&lt;meta name ="distribution" content="global" />
&lt;link type= "text/css" rel="stylesheet" href="assets/css/bootstrap.min.css"/>
&lt;style type="text/css" >
//...
&lt;/style>
&lt;/head>
&lt;body>
&lt;div id="image-container" style="width: 150px; height: 525px; border: solid 1px #ddd; display: inline-block">
    &lt;div id="black-bar" style="width: 100%; padding: 10px 0;">
        &lt;button onClick="cancelClick()" style="margin-left: 100px;">cancel&lt;/button>
        &lt;img class="img-responsive" src="../../" title="codehightlight" alt="codehightlight"/>
        &lt;p>Dynamic Web TWAIN is a browser-based document scanning SDK specifically designed for web applications. &lt;/p>
    &lt;/div>
&lt;/div>
&lt;button id="btn-grab" style="margin-left: 400px; display: block;" onClick="onBtnGrabClick()">Grab a Snapshot&lt;/button>
&lt;br />
&lt;script type="text/javascript" src="DCSResources/dynamsoft.camera.config.js"> &lt;/script> 
&lt;script type="text/javascript">
	for(var i=0;i&lt;10;i++){
		if(iArray[i]>20){
			//...
		}	 
	}
&lt;/script>
&lt;/body>
&lt;/html>
</pre>
  </div>
</template>
<script>
import createCodeHighlight from "alvin-codehighlight";
export default {
  name: "Codehighlight",
  data() {
    return {
      codehighlight: "",
    };
  },
  mounted() {
    var cfg = {
      //特殊的 element 样式
      jsColor: "#d10303",
      cssColor: "#f408af",
      metaColor: "#c1ad04",
      //特殊的 attribute 样式
      idColor: "#fe8e14",
      claColor: "green",
      styColor: "pink",
    };
    this.codehighlight = createCodeHighlight(cfg);
  },
};
</script>

二、通过 script 脚本引入

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="CodeHighlight.min.js"></script>
<pre class="CodeHighlight">
// ...
</pre>

引入上面两个文件之后，即可调用该插件了：

$(function(){
	// 插件调用
	$().codeHighlight({
		//特殊的 element 样式
		jsColor: "#d10303",
		cssColor: "#f408af",
		metaColor: "#c1ad04",
		//特殊的 attribute 样式
		idColor: "#fe8e14",
		claColor: "green",
		styColor: "pink"
	});
});

三、codeHighlight 提供的参数配置

$().codeHighlight({
		codePre: ".CodeHighlight", //需美化代码的容器，可为 class/id/element
		addElements: "", //添加需要美化的标签（div,span等），例："br,hr"（虽用了正则去除空格，但标签名之间最好不要有空格）
		addAttr: "", //添加需要美化的属性（id、title等）
		//默认的 style 参数
		elemColor: "#006699", //默认的标签颜色
		attrColor: "gray", //默认的属性颜色
		strColor: "blue", //默认的字符串颜色
		plainColor: "#333", //默认的字符（如 <、>、=等）颜色
		//特殊的 element 样式
		jsColor: "", //<script> 标签的颜色
		cssColor: "", //<style> 标签的颜色
		metaColor: "",
		//特殊的 attribute 样式
		idColor: "", //id 的颜色
		claColor: "", //class 的颜色
		styColor: "" //style 的颜色
	});
	
	//默认美化的标签有：("html", "head", "title", "meta", "link", "style", "script", "body", "div", "a", "p", "span", "input", "button", "select", "option", "link", "img", "br", "ul", "ol", "li", "i", "h1", "h2", "h3", "h4")
	//默认美化的属性有：("id", "class", "target", "content", "style", "value", "alt", "title", "type", "src", "href", "rel", "dir", "lang", "name", "onBlur", "onClick", "onFocus", "onKeyUp", "onKeyDown", "onKeyPress")