1. 免费模板网标签tags 更多...
          您的位置:首页 > javascript学习 > 常用代码分享高亮工具SyntaxHighlighter和Prism.JS介绍

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

          时间:2017-07-04 来源:网上收集 作者:Tony 阅读次数 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/

           

          本文地址:http://www.1198dvo.cn/javascript/h2834.html

          猜你喜欢
          栏目推荐
          模板推荐

          Copyright:2014-2019 www.freemoban.com Corporation,All Rights Reserved 免费模板网 版权所有 鄂ICP备19005084号

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

          建站咨询QQ
          67期香香精准内部资料 泾阳县| 越西县| 缙云县| 云林县| 奇台县| 武山县| 吉安市| 平湖市| 临桂县| 扎鲁特旗| 普格县| 西林县| 平阴县| 乌兰浩特市| 新河县| 岳普湖县| 梁山县| 岗巴县| 宜黄县| 南乐县| 休宁县| 朔州市| 舟曲县| 中西区| 青州市| 茶陵县| http://www.ezgqij.cn 濉溪县| 大宁县| 青铜峡市| 嵊泗县| 梁平县| 那曲县| 莱阳市| 敖汉旗| 法库县| 揭阳市| 南陵县| 铜梁县| 梁山县| 方山县| 甘孜县| 石台县| 明光市| 麻阳| 凤翔县| 保山市| 山丹县| 高清| 大连市| 革吉县| 博野县| 古丈县| 茌平县| 武宁县| 永年县| http://svwhiu.cn 开原市| 无锡市| 大姚县| 满城县| 什邡市| 漳州市| 耒阳市| 广南县| 扎赉特旗| 新沂市| 阳西县| 彰武县| 陈巴尔虎旗| 个旧市| 泉州市| 广德县| 江华| 南召县| 无棣县| 武宣县| 商南县| 嘉义县| 闽侯县| 南雄市| 黔西县| 木兰县| 江北区| 榆树市| 扶风县| 宝丰县| 本溪市| 乡宁县| 星子县| 阳高县| http://www.crwbah.cn 万荣县| 灵石县| 金山区| 南澳县| 涟水县| 娱乐| 桂平市| 丰顺县| 灯塔市| 安岳县| 蒙城县| 彰化县| 竹山县| 永宁县| 姜堰市| 定远县| 林西县| 河北省| 五台县| 会同县| 获嘉县| 广水市| 土默特右旗| 仪征市| 烟台市| 松滋市| 太白县| 浙江省| 广安市| http://www.vueqcu.cn 莒南县| 高阳县| 秭归县| 浏阳市| 宁德市| 怀化市| 普格县| 上高县| 凤山县| 资中县| 东乌| 阜阳市| 永吉县| 平遥县| 额敏县| 崇阳县| 雷州市| 黄梅县| 潮安县| 开阳县| 察雅县| 葫芦岛市| 永清县| 湖州市| 德江县| 呼和浩特市| 黑河市| 晋江市| 兰州市| http://urLogg.cn 象州县| 江北区| 秦安县| 中山市| 榆中县| 南京市| 罗源县| 绥滨县| 潜江市| 甘洛县| 新兴县| 西华县| 永泰县| 庄河市| 宜城市| 巴楚县| 团风县| 金溪县| 云和县| 闽清县| 丹东市| 炎陵县| 长垣县| 顺昌县| 车致| 鄂温| 图木舒克市| 祁连县| http://www.jnqmqq.cn 皮山县| 酒泉市| 武威市| 罗源县| 满洲里市| 丰原市| 肇东市| 南江县| 普陀区| 县级市| 肥城市| 洮南市| 嘉善县| 英德市| 湖州市| 天峻县| 柳河县|