Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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

About

a syntax highlighting of code snippets in a web page. using google-code-prettify for engine and support clipboard.

Resources

License

You can’t perform that action at this time.