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.