在html页⾯中实现代码的⾼亮显⽰最近在做组内的组件库，⽤到代码的⾼亮显⽰~
我查到的资料有syntaxhighlighter、highlight.js、prism.js
highlight.js官⽹
syntaxhighlighter官⽹
prism.js官⽹参考资料：
基本实现原理都是引⼊需要的JS⽂件和CSS样式，将要显⽰的代码封装在<pre><code></code></pre>标签中syntaxhighlighter效果如图(shCoreDefault样式）
<link rel="stylesheet" type="text/css" href="../node_modules/syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
<pre class="brush: js;">
var myCustomFn = function ShowFn() {
Ext.Msg.alert('消息框', "你调⽤了客户端的JavaScript函数");
}
</pre>
<script src="../node_modules/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script src="../node_modules/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
<script src="../node_modules/syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>
<script>SyntaxHighlighter.all();</script>
highlight.js效果如图（default样式）
<link rel="stylesheet" href="../node_modules/highlight/lib/vendor/highlight.js/styles/default.css"/>
<script src="../node_modules/highlight/lib/vendor/highlight.js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre>
<code class="css">
@font-face {
font-family: Chunkfive; src: url('f');
}
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
</code>
</pre>
prism.js效果图
<link rel="stylesheet" href="../css/prism.css"/>
<pre class="language-html">
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
angular和angularjs<title></title>
</head>
<body>
<p>kjfeiwjoiefj</p>
</body>
</html>
</code>
</pre>
<script src="../js/prism.js"></script>
我们的项⽬前端⽤的是Anjularjs，据说⽤Angularjs和第三⽅js库结合的时候会有坑~有待研究。。。后来我们采⽤的是Angular-highlightjs，主要是和Angularjs更好的兼容吧~
github上的地址：
<link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css"/>
<script src="../node_modules/highlight.js/highlight.min.js"></script>
<body ng-app="myApp">
<div hljs>
@font-face {
font-family: Chunkfive; src: url('f');
}
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
</div>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-highlightjs/angular-highlightjs.min.js"></script>
<script>
var myApp = dule('myApp', ['hljs']);
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。