在html页面中实现代码的高亮显示

最近在做组内的组件库，用到代码的高亮显示~

我查到的资料有syntaxhighlighter、highlight.js、prism.js

highlight.js官网 https://highlightjs.org/

syntaxhighlighter官网 http://alexgorbatchev.com/SyntaxHighlighter/

prism.js官网 http://prismjs.com/ 参考资料：http://c7sky.com/syntax-highlighting-with-prismjs.html#0-qzone-1-94908-d020d2d2a4e8d1a374a433f596ad1440

基本实现原理都是引入需要的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('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)}}</code></pre>

prism.js效果图

<link rel="stylesheet" href="../css/prism.css"/>
<pre class="language-html">  <code>&lt!DOCTYPE html&gt&lthtml lang="en"&gt&lthead&gt&ltmeta charset="UTF-8"&gt&lttitle&gt&lt/title&gt&lt/head&gt&ltbody&gt&ltp&gtkjfeiwjoiefj&lt/p&gt&lt/body&gt&lt/html&gt
  </code></pre>
<script src="../js/prism.js"></script>

我们的项目前端用的是Anjularjs，据说用Angularjs和第三方js库结合的时候会有坑~有待研究。。。

后来我们采用的是Angular-highlightjs，主要是和Angularjs更好的兼容吧~

github上的地址：https://github.com/pc035860/angular-highlightjs

 <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('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)}}</div> <script src="../node_modules/angular/angular.min.js"></script><script src="../node_modules/angular-highlightjs/angular-highlightjs.min.js"></script>
<script>var myApp = angular.module('myApp', ['hljs']);
</script>

转载于:https://www.cnblogs.com/LJJ1010/p/5050660.html

在html页面中实现代码的高亮显示相关推荐

百度搜索引擎提供了一段嵌入到页面中的代码
百度搜索引擎提供了一段嵌入到页面中的代码 <form action="http://www.baidu.com/baidu" target="_blank" ...
代码放进word_在Word中插入代码并高亮显示（针对会编程的小伙伴）
有的时候需要将代码插入到文档当中,而你又不熟悉专门的排版语言.或者说只是临时需要.其实可以在Word中插入代码并使之进行高亮显示,达到和专用排版工具大致一样的效果,使代码的阅读体验更好. 如下图所示, ...
alert不会影响到页面中其他代码执行_JavaScript调试技巧合集——为什么不推荐使用alert调试代码？...
导读本文是<JavaScript调试技巧合集>系列分享中的一篇,笔者希望在每篇文章中介绍一个关于JS调试的小知识点,希望你在读完这个系列后,在调试技巧上能够更加运用自如.下面是知识点概览 ...
JSP 页面中java代码 ** can not be resolved to a type
有时候我们需要直接在页面上写一段java代码,然后在定义一个变量来接收,然后在别的页面直接引用,但是我们经常遇到 ** can not be resolved to a type的异常,今天百度了很长 ...
js中变量和jsp中java代码中变量互相访问解决方案
1.js变量获取jsp页面中java代码的变量值. 方法:var JS变量名 = <%=JAVA变量名 %> 2.java代码获取js变量的值. 说明:在JSP中:Java部分是在 ...
JSP页面中＜%!%＞与＜%%＞与＜%=%＞
首先,我们要了解jsp运行原理.JSP的本质就是一个Servlet,JSP的运行之前会先被Tomcat服务器翻译为.java文件,然后在将.java文本编译为.class文件,而我们在访问jsp时, ...
java中的%%%_JSP页面中%!%与%%与%=%
首先,我们要了解jsp运行原理.JSP的本质就是一个Servlet,JSP的运行之前会先被Tomcat服务器翻译为.java文件,然后在将.java文本编译为.class文件,而我们在访问jsp时, ...
ASP.NET 2.0 中的代码隐藏和编译
ASP.NET 2.0 中的代码隐藏和编译 Fritz Onion 本页内容代码隐藏编译程序集生成小结当我撰写本专栏的时候,Microsoft® .NET Framework 2. ...
js变量和java变量相等,js中变量和jsp中java代码中变量互相访问解决方案
1.js变量获取jsp页面中java代码的变量值. 方法:var JS变量名 = 我们常常会将js文件和jsp文件分开写,在js文件中,上面的方法似乎不管用了. 也可以通过变通的方法来解决: a.js ...

在html页面中实现代码的高亮显示

在html页面中实现代码的高亮显示相关推荐

最新文章

热门文章