Skip to content

chaopeng/chaoscodebox

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Packages

No packages published