• 做习近平新闻思想的坚定实践者 2019-04-22
  • 社会主义是从私有制走向公有制,直至共产主义的到来。 2019-04-22
  • 从榜单看黑茶“热” 首批中国黑茶类制茶大师公布 2019-04-14
  • 《中国共产党问责条例》施行 问责的“板子”如何打? 2019-04-05
  • 钱念孙做客徽派以出世精神 做入世事业 2019-03-28
  • QS世界大学排名发布:中国11所大学进百强,清华排名创历史 2019-03-28
  • 标致5008当选法国总统座驾 防弹装甲加身外观低调 2019-03-27
  • 十年长出一座绿色新城(在习近平新时代中国特色社会主义思想指引下——新时代新作为新篇章) 2019-03-27
  • 智媒云图(Intell Vision):图书馆“书童” 2019-03-26
  • 京城斫琴师梵戈:中国人做东西就是和时间商量着来 2019-03-25
  • 长子县依托煤炭资源促进经济转型大发展 2019-03-21
  • 回复@“老笑头”,你的牛二逻辑确实很通透!论坛奇葩!哈哈哈哈! 2019-03-21
  • 保利尼奥:在恒大让我重拾自信 对中国球迷有特殊感情 2019-03-21
  • 山西省直机关第五届职工运动会开幕 2019-03-17
  • 中国遥感卫星地面站成功接收高分六号卫星数据 2019-03-17
  • 免费模板网标签tags 更多...
    您的位置:福彩喜乐彩15 > javascript学习 > 常用代码分享高亮工具SyntaxHighlighter和Prism.JS介绍

    新疆喜乐食品:常用代码分享高亮工具SyntaxHighlighter和Prism.JS介绍

    时间:2017-07-04 来源:网上收集 作者:Tony 阅读次数 tags高亮常用代码

    分享到:

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

    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

    官方网站://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啦,赶紧试试~


    官方网站://prismjs.com/

     

    本文地址://www.bld77.com/javascript/h2834.html

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

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

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

    建站咨询QQ
  • 做习近平新闻思想的坚定实践者 2019-04-22
  • 社会主义是从私有制走向公有制,直至共产主义的到来。 2019-04-22
  • 从榜单看黑茶“热” 首批中国黑茶类制茶大师公布 2019-04-14
  • 《中国共产党问责条例》施行 问责的“板子”如何打? 2019-04-05
  • 钱念孙做客徽派以出世精神 做入世事业 2019-03-28
  • QS世界大学排名发布:中国11所大学进百强,清华排名创历史 2019-03-28
  • 标致5008当选法国总统座驾 防弹装甲加身外观低调 2019-03-27
  • 十年长出一座绿色新城(在习近平新时代中国特色社会主义思想指引下——新时代新作为新篇章) 2019-03-27
  • 智媒云图(Intell Vision):图书馆“书童” 2019-03-26
  • 京城斫琴师梵戈:中国人做东西就是和时间商量着来 2019-03-25
  • 长子县依托煤炭资源促进经济转型大发展 2019-03-21
  • 回复@“老笑头”,你的牛二逻辑确实很通透!论坛奇葩!哈哈哈哈! 2019-03-21
  • 保利尼奥:在恒大让我重拾自信 对中国球迷有特殊感情 2019-03-21
  • 山西省直机关第五届职工运动会开幕 2019-03-17
  • 中国遥感卫星地面站成功接收高分六号卫星数据 2019-03-17
  • 澳门五分彩新骗局聊天 体彩20选5怎么中奖 江西多乐彩入口 上海基诺彩票 双色球开奖 重庆时时彩开奖官网 北京赛车pk10推荐计划 四川时时彩app 北京赛车pk10官网地址 北京快乐8选2稳赚 足彩半全场胜平 泉州福彩网点 八号彩票软件 香港六合彩全年资料 重庆欢乐生肖走势图乐彩网 中国竞彩足球比分直播lm0