QQ登录

交流互动,快速开始

登录    注册

您现在的位置: >首页 > javascript学习 > 常用代码分享高亮工具SyntaxHighlighter和Prism.JS介绍

常用代码分享高亮工具SyntaxHighlighter和Prism.JS介绍

编辑: Tony 发布日期: 2017-07-04 来源:网上收集 浏览: tags: 高亮 常用 代码 点击收藏文章

对于小编来说,网站代码经常需要分享一些代码,为了代码的美观和可读性,就需要进行高亮;本文推荐几款漂亮的代码高亮插件

1、SyntaxHighlighter - 最优秀的JavaScript代码高亮插件

SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,SyntaxHighlighter 可以对大部分编程语言进行着色渲染,而且代码高亮的性能也非常不错。SyntaxHighlighter 可以自定义主题文件,在初始化的时候指定自己喜欢的主题即可。

若你使用的是百度编辑器UEditor,那么完全无需修改任何代码,直接引入SyntaxHighlighter即可。

缺点是,一种语言就要引入一个对于的js文件

<script class="javascript" src="Scripts/shCore.js"></script> > 
<script class="javascript" src="Scripts/shBrushJScript.js"></script>  <script class="javascript" src="Scripts/shBrushXml.js"></script> <script class="javascript" src="Scripts/shBrushCss.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/><script type="text/javascript">SyntaxHighlighter.all();</script>

11.jpg

官方网站:http://alexgorbatchev.com/SyntaxHighlighter/


2、Prism.JS - 轻量级JavaScript代码高亮插件

Prism.JS是目前最为轻量级的JavaScript代码高亮插件,他压缩后只有2KB的大小,Prism.JS也支持大部分流行的编程语

言,并且支持多种主题样式,开发者只需要引用prism.css文件和prism.js这2个文件即可。

<link href="themes/prism.css" rel="stylesheet" /><script src="prism.js"></script>

22.jpg

prism支持这2种写法:

<pre class="language-css">.*</pre><pre><code class="language-css">.*</code></pre>

若你觉得加上"language-"不好用,想去掉?方法如下

第一步:把prism.css里的pre[class*="language-"]改成pre

第二步:把prism.js里var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;改成var lang = /\b(?:language-)?(?!\*)(\w+)\b/i;


若你的代码语言格式是:<pre class="brush:css;">...</pre>

第一步:把prism.css里的pre[class*="language-"]全部替换成pre[class*="brush:"],例如:

pre[class*="language-"] {background: #f5f2f0;}替换成:
pre[class*="brush:"] {background: #f5f2f0;}

第二步:修改prism.js

1、把19行的代码

var lang = /\blang(?:uage)?-(\w+)\b/i;替换成var lang = /\b(?:brush[:])?(?!\*)(\w+)\b/i;

2、在大约160行highlightAll函数,找到code[class*="language-"],在它前面新增代码[class*="brush:"]

selector: '[class*="brush:"],code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'

3、大约186行

element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;替换成
element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' brush:' + language;

4、大约192行

parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;替换成
parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' brush:' + language;


到这里就ok啦,赶紧试试~


官方网站:http://prismjs.com/

 

上一篇:JavaScript里面关于window对象介绍
下一篇:最后一页

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,请通知我们,我们会及时删除侵权内容,谢谢合作! 点击这里给我发消息

Copyright©2014-2017 免费网站模板www.freemoban.com Inc.All rights reserved. 备案号: 鄂ICP备14020052号-1