雷速体育动画进球动图:

您的位置:雷速体育答题测试答案 > javascript學習 > 常用代碼分享高亮工具SyntaxHighlighter和Prism.JS介紹

常用代碼分享高亮工具SyntaxHighlighter和Prism.JS介紹

時間:2017-07-04 18:08:26  來源:免費模板網 作者:風雪 閱讀次數 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

官方網站://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.384142.live/javascript/2017/0704/2834.html

猜你喜歡
欄目推薦
模板推薦

Copyright:雷速体育答题测试答案 www.384142.live 免費模板網 All Rights Reserved 雷速体育答题测试答案   遼公網安備 21010602000376號  遼公網安備:42900402000182號

免責聲明:本站部分資源來自互聯網收集,版權歸原創者所有,如果侵犯了你的權益,我們會及時刪除侵權內容,聯系QQ:1615187561 謝謝合作!

{ganrao} 操盘联盟配资 追光棋牌旧版下载 时时乐上海今天走势 云南11选五走势图昨天 百度江西多乐彩开奖 太阳城娱乐 彩票开奖查询江苏快三 吉林科乐麻将群 河南体育彩票481开奖 七星彩海南论坛规律图4 1 二分彩彩票官网 股票融资余额是什么意思 双色球真有人中500万吗 2020赛季中超球队 科乐填大坑5毛微信群 个人如何炒股