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.
| 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 |
| 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 |
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]$
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.