Using the Shortcode

Just add your code between [crayon attributes] ... [/crayon] in HTML view when editing posts. You can optionally provide the following attributes:

Attribute Description Example
lang Specify a Language ID, these are the folders in the langs directory and appears in the list of Languages. lang="java"
url Load a file from the web or a local path. You give a relative local path instead of absolute (see Files). You can use a closed tag when giving a url: [crayon url="java/code.java" /]. For languages with defined extensions (see Languages) you don't even need to provide the lang attribute, as this will be detected if your file ends with it, as in the example. url="http://example.com/code.java"
url="java/code.java"
title Give a title for your code snippet. Appears in the toolbar. title="Sample"
mark Mark some lines as important so they appear highlighted. You can specify single numbers, comma separted, a range, or a combination. mark="5-10,12"

Crayon is versatile so you can override global settings for individual Crayons with attributes. Here are some examples:

Setting Description Example
theme Specify a Theme ID, these are the folders in the '\themes' directory. theme="twilight"
height Set the height just like a css property, using 'height', 'max-height' or 'min-height'. You can also specify pixels or percentage, otherwise it will use global settings. min-height="100px"
width="50%"
toolbar-hide Show/hide the toolbar and controls. toolbar-hide="true"
toolbar-hide="false"
nums Show/hide line numbers. nums="false"
font-size Set the font size in pixels. font-size="20"
start-line Set the starting line number. start-line="184"

Here's a simple example of attributes:

[crayon lang="html" font-size="20" mark="1" width="200px"] <strong>This is great!</strong> [/crayon]

These are just a few examples. See the online documentation for the complete list and their uses. If you want to prevent the [crayon] shortcode from turning into a Crayon, use: $[crayon]...[/crayon]$

Themes

Crayon comes with built-in Themes to style your code. You can learn how to create your own and download more from here. 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.

Languages

You can customize 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. I've also spent considerable time putting together a quick guide in /langs/readme.txt that will be added to the online docs. If your language is missing, send me an email. There will be more languages added over time, of course.

Fonts

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.

Disabling Highlight

You can temporarily disable highlighting for a piece of code using the highlight="false" attribute.