Supports multiple languages, themes, fonts, highlighting from a URL, local file or post text.

Written in PHP and jQuery. Crayon is a Wordpress plugin, but can be used in any PHP environment.

• Beta Development Releases
• Stable Releases

The Tag Editor makes adding code, changing settings and all that much easier with a simple dialog. I'd recommend it over the manual approach, since you can fine-tune the Crayon after the editor generates it :)

You can also use <pre class="attributes" title="something">...</pre> so that:

• Disabling Crayon still presents the code as pre-formatted text and is readable
• Enforces proper encoding of entities (< in HTML view and not <)
• The code snippets are reusable with other syntax highlighters

The Tag Editor generates tags like these. Attributes names are separated from values by either : (default) or _. E.g. <pre class="lang:php theme:twilight mark:1,2-4" title="something">...</pre> You can optionally provide the following attributes:

You can even mix code together like on a real HTML page, by having <script>, <style> and <?php...?> tags all in a single Crayon and setting the language to HTML.

Language information is found here in the Wordpress Admin: Settings > Crayon > Languages > Show Languages You can customise and create new languages and define how to capture each element (keywords, comments, strings, etc.) with regular expressions. Languages are structured langs/lang-name/lang-name.txt. Take a look at langs/default/default.txt and check out the neat regex of the default/generic language. See the readme in langs/readme.md for more information about the language file syntax.

You can add custom languages in wp-content/uploads/crayon-syntax-highlighter/languages with the same format as those in the plugin directory and they will remain after plugin updates.

Crayon comes with built-in Themes to style your code. See a sample of the current set of themes. Themes are structured themes/theme-name/theme-name.css. If you know CSS, take a look at themes/default/default.css to get an idea of how they work and how you can change/create them. The specification for CSS classes is here.

You can add custom themes in wp-content/uploads/crayon-syntax-highlighter/themes with the same format as those in the plugin directory and they will remain after plugin updates. This is where user themes are stored when you customise stock themes in the Theme Editor.

You can enable support for Crayon comments by adding TinyMCE to the comment box. Add this code at the end of your theme's functions.php file. This requires at least version 3.3 of Wordpress.

add_filter('comment_form_defaults', 'tinymce_comment_enable');
function tinymce_comment_enable ( $args ) {
    ob_start();
    wp_editor('', 'comment', array('tinymce'));
    $args['comment_field'] = ob_get_clean();
    return $args;
}

Then enable these settings in Wordpress Admin > Settings > Crayon:

• "Display the Tag Editor in any TinyMCE instances on the frontend (e.g. bbPress)"
• "Allow Crayons inside comments"

Crayon comes translated in several languages already, and if yours is included it will translate Crayon given you've followed instructions about how to show Wordpress in Your Language. If Crayon doesn't support your language or you'd like to help improve it:

• Download POEdit. Add .. to the source paths under catalog preferences, and crayon__, crayon_n and crayon_e under source keywords.
• Update and start making translations.
• Send the .po file to me at crayon.syntax@gmail.com and give me your name and a URL to your blog for credit. Alternatively, fork this repo and make a push request :)

You can define fonts and font-sizes within Themes, but you can also override the theme's font with those inside fonts/ and also provide @font-face fonts just like in themes - it's just CSS after all.

You can add custom fonts in wp-content/uploads/crayon-syntax-highlighter/fonts with the same format as those in the plugin directory and they will remain after plugin updates.

You can temporarily disable highlighting for a piece of code using the highlight="false" attribute. You can also prevent Crayon from touching any kind of tag by using the crayon="false" attribute. If using pre tags, put crayon:false in the class.

Crayon's CSS and JavaScript resources is already minified (see css and js).

Crayon is versatile so you can override global settings for individual Crayons with attributes. The Tag Editor lets you do all this using a simple dialog!

Using the legacy tag [crayon attributes] some code [/crayon] is possible but I highly recommend using <pre> tags instead. You can also convert legacy tags automatically in the Wordpress settings screen.

Using Mini Tags like [php]some code[/php] is supported but also deprecated in favour of <pre> tags.

Crayon is released under the GPLv3 licence. See license.txt.