ChaosCodebox網(wǎng)頁(yè)高亮庫(kù)
什么是ChaosCodebox?
ChaosCodebox是一個(gè)網(wǎng)頁(yè)的代碼高亮庫(kù)。它是使用google-code-prettify作為高亮引擎的。ChaosCodebox是一個(gè)ChaosBlog的一個(gè)子項(xiàng)目。
與google-code-prettify的區(qū)別
ChaosCodebox擁有一個(gè)復(fù)制到剪貼板的按鈕，同時(shí)還會(huì)當(dāng)前的顯示語(yǔ)言類型。
怎樣使用ChaosCodebox?
你需要在網(wǎng)頁(yè)的<head>標(biāo)簽中插入如下的代碼:
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/prettify/r298/prettify.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/chaopeng/chaoscodebox/v2.0/chaoscodebox-min/sons-of-obsidian.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/chaopeng/chaoscodebox/v2.0/chaoscodebox-min/chaoscodebox.css" />
<script type="text/javascript" src="http://cdn.staticfile.org/prettify/r298/prettify.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.0/clipboard.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/chaopeng/chaoscodebox/v2.0/chaoscodebox-min/chaoscodebox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
prettify();
var clipboard = new Clipboard('.copy');
clipboard.on('success', function(e) {
e.clearSelection();
});
})
</script>
如果你有一些比較特殊的語(yǔ)言的話，你需要去google-code-prettify，增加一些css來(lái)增加這樣語(yǔ)言的支持。同時(shí)你也可以通過(guò)修改css來(lái)修改配色主題。
我如何在wordpress中使用ChaosCodebox
- 將上述的代碼添加到
wp-content/themes/[current_theme]/header.php - 在你的文章中使用
<pre><code class="language">code...</code></pre>來(lái)插入代碼
如果你在使用ChaosCodebox有任何問(wèn)題你可以聯(lián)系我
weibo: http://weibo.com/chaojianpeng
更新日志
- v2.0
- 剪貼板實(shí)現(xiàn)由Flash遷移到clipboardjs
- 刪除倉(cāng)庫(kù)中g(shù)oogle-prettify的代碼
感謝
評(píng)論
圖片
表情