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"

You can also use <pre attributes>...</pre> so that the code can be reused by other plugins even if you disable Crayon. Make sure to edit all your code in HTML mode, however, not Visual.

You can even use Mini Tags like:

[html]<strong>some code</strong>[/html]
[php]echo "whassup?";[/php]

The short name in brackets you use are called IDs and Aliases. For example, xml and hxml are Aliases to the language ID xhtml. The IDs and their Aliases are under:

Settings > Crayon > Languages > Show Languages

Perhaps best of all, you can mix code together like on a real HTML page, by having <script>, <style> and <?php...?> tags all in a single Crayon. Find out more here.

You can also display a quick unhighlighted snapshot of code using the [plain]...[/plain] tag. The code will look like it does in the HTML view of the post editor.

Settings

Crayon is versatile so you can override global settings for individual Crayons with attributes.

Setting Allowed Value Description
theme string ID of the theme to use
font string ID of the font to use
font-size number > 0 Custom font size in pixels
min-height/max-height number > 0 followed by px/% Minimum/maximum height in units
height number > 0 followed by px/% Height in units
min-width/max-width number > 0 followed by px/% Minimum/maximum width in units
width number > 0 followed by px/% Width in units
toolbar true/false/"always" Show or hide the toolbar. "always" shows always (without mouseover).
top-margin number >= 0 Top margin in pixels
bottom-margin number >= 0 Bottom margin in pixels
left-margin number >= 0 Left margin in pixels
right-margin number >= 0 Right margin in pixels
h-align "none/left/right/center" Horizontal alignment
float-enable true/false Allow floating elements to surround Crayon
toolbar-overlay true/false Overlay the toolbar on code rather than push it down when possible
toolbar-hide true/false Toggle the toolbar on single click when it is overlayed
toolbar-delay true/false Delay hiding the toolbar on MouseOut
show-title true/false Display the title when provided
show-lang "found/always/never" When to display the language.
striped true/false Display striped code lines
marking true/false Enable line marking for important lines
nums true/false Display line numbers by default
nums-toggle true/false Enable line number toggling
plain true/false Enable plain code. Disabling will also disable plain toggling and copy/paste which use the plain code.
plain-toggle true/false Enable plain code toggling
show-plain-default true/false Show the plain code by default instead of the highlighted code
copy true/false Enable code copy/paste
popup true/false Enable opening code in a window
scroll true/false Always show scrollbars
tab-size number >= 0 Tab size
trim-whitespace true/false Trim the whitespace around the code
mixed true/false Enable mixed highlighting (multiple languages in code)
show_mixed true/false Show the mixed highlighting plus sign
start-line number >= 0 When to start line numbers from
fallback-lang string ID of the language to use when none is detected
local-path string Local path to load file from
touchscreen true/false Disable mouse gestures for touchscreen devices (eg. MouseOver)
disable-anim true/false Disable animations
runtime true/false Disable runtime stats
error-log true/false Log errors for individual Crayons
error-log-sys true/false Log system-wide errors
error-msg-show true/false Display custom message for errors
error-msg string The error message to show for errors
mixed true/false Allow mixed languages using delimiters and tags

Here's a simple example of attributes:

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

If you want to prevent the [crayon] shortcode from turning into a Crayon, use: $[crayon]...[/crayon]. If you want to prevent a [/crayon] from ending a Crayon (say if you wanted to have the Crayon shortcode appear in a Crayon itself), then use $[crayon]...[/crayon]$. The same applies to <pre> and Mini Tags.

Themes

Crayon comes with built-in Themes to style your code. 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.