什么是ChaosCodebox?
ChaosCodebox是一个网页的代码高亮库。它是使用google-code-prettify作为高亮引擎的。ChaosCodebox是一个ChaosBlog的一个子项目。
与google-code-prettify的区别
ChaosCodebox拥有一个复制到剪贴板的按钮，同时还会当前的显示语言类型。
怎样使用ChaosCodebox?
你需要在网页的<head>标签中插入如下的代码:
<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>
如果你有一些比较特殊的语言的话，你需要去google-code-prettify，增加一些css来增加这样语言的支持。同时你也可以通过修改css来修改配色主题。
我如何在wordpress中使用ChaosCodebox
- 将上述的代码添加到
wp-content/themes/[current_theme]/header.php - 在你的文章中使用
<pre><code class="language">code...</code></pre>来插入代码
如果你在使用ChaosCodebox有任何问题你可以联系我
weibo: http://weibo.com/chaojianpeng
更新日志
- v2.0
- 剪贴板实现由Flash迁移到clipboardjs
- 删除仓库中google-prettify的代码
感谢
-
本文向大家介绍jQuery实现高亮显示网页关键词的方法，包括了jQuery实现高亮显示网页关键词的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现高亮显示网页关键词的方法。分享给大家供大家参考。具体如下： 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码，当你在文本框中输入的时候，如果下面的正文中包括你输入的内容，也就是关键字，那么这些关键字是会高亮显示的，
-
问题内容： 当我将分析器与Edgengram（最小= 3，最大= 7，前面）+ term_vector = with_positions_offsets一起使用时 使用具有text =“ CouchDB”的文档 当我搜索“ couc”时 我的重点是“ cou”而不是“ couc” 看来我的重点只是在最小匹配令牌“ cou”上，而我希望是在精确令牌（如果可能）上或至少在找到的最长令牌上。 无需使用t
-
我试图刮此页上Flipkart： http://www.flipkart.com/moto-x-play/p/itmeajtqp9sfxgsk?pid=MOBEAJTQRH4CCRYM 我试图找到的div类"fk-ui-ccarousel超级容器相同的vreco部分reco-carousel-边界-顶部sameHorizontalReco"，但它返回空结果。 divs是空的。我使用inspect元
-
目前我们已经为Potion文件实现了简单的关键字和函数的语法高亮。 如果没有做上一章的练习，你需要回去完成。我将假设你做了练习。 事实上，你应该回去完成你跳过的任何练习。即使你觉得你不需要，为了更好的学习效果， 你都得把它们完成了。请在这一点上相信我。 高亮注释 接下来我们需要高亮Potion的一个重要组成部分——注释。 问题是，Potion的注释以#开头，而#并不在iskeyword里。 如果不
-
问题内容： 我正在使用ElasticSearch索引文档。 我的映射是： 为了突出显示全文，我将其设置为0。 如果我执行以下类似于Lucene的字符串查询： 对于结果集中的某些文档，突出显示的全文的长度小于全文本身的长度。由于我将值设置为0和/ ，所以不会发生这种情况。 现在出现奇怪的行为：如果我仅通过执行以下操作搜索失败的元素之一： 然后一切正常。 有任何想法吗？ 问题答案： 听起来像在0.14
-
docsify内置的代码高亮工具是 Prism。Prism 默认支持的语言如下： Markup - markup, html, xml, svg, mathml, ssml, atom, rss CSS - css C-like - clike JavaScript - javascript, js 添加额外的语法支持需要通过CDN添加相应的语法文件 : <script src="//cdn.js