What is ChaosCodebox?

ChaosCodebox is a syntax highlighting of code snippets in a web page. It uses google-code-prettify as engine. It is a subproject of ChaosBlog.

ChaosCodebox has a clipboard button so that you can copy code by one click.

DEMO

How to use ChaosCodebox?

You should include prettify, jquery and chaoscodebox. Call prettify() onloaded.

Here is a sample:

<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>

You can add other css of google-code-prettify to support more language or uses the other color theme.

How can I uses it in workpress?

1. add the sample code to wp-content/themes/[current_theme]/header.php.
2. using<pre><code class="language">code...</code></pre> to insert code into your article.

Contact me if you have any questions at chaoscodebox

weibo: http://weibo.com/chaojianpeng

Release Note

• v2.0
  • change clipboard from Flash to clipboardjs
  • remove google-prettify in repository

Thanks

• google-code-prettify
• clipboardjs