最近在做组内的组件库,用到代码的高亮显示~
我查到的资料有syntaxhighlighter、highlight.js、prism.js
基本实现原理都是引入需要的JS文件和CSS样式,将要显示的代码封装在
标签中
syntaxhighlighter效果如图(shCoreDefault样式)
var myCustomFn = function ShowFn() {
Ext.Msg.alert(‘消息框‘, "你调用了客户端的JavaScript函数");
}
highlight.js效果如图(default样式)
@font-face {
font-family: Chunkfive; src: url(‘Chunkfive.otf‘);
}
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
function foo(){
alert("aaa");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>kjfeiwjoiefj</p>
</body>
</html>
prism.js效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>kjfeiwjoiefj</p>
</body>
</html>
原文:http://www.cnblogs.com/LJJ1010/p/5050660.html