a syntax highlighting of code snippets in a web page. using google-code-prettify for engine and support clipboard.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
chaoscodebox-min
chaoscodebox
LICENSE
README.md
README_CN.md
demo.html

README.md

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