Crayon Theme Editor
The Theme Editor allows you to duplicate and modify custom themes compatible with Crayon using an integrated user interface and no CSS knowledge whatsoever. Of course, make changes to your theme by editing the CSS is also possible before and after using the theme editor.
You can access the theme editor in Wordpress admin under Settings > Crayon:
The Theme section displays the information about the current theme, a toolbar for performing theme editor actions and the Live Preview. Modifying any settings automatically refreshes this preview before submitting the settings page.
The theme is duplicated as a User Theme. Now click Edit to load the Theme Editor.
One handy feature of the editor is that modifications take place live just like in the regular settings page - so changing the language or settings will also change them in the theme editor, allowing you to see how your changes will look like for different settings.
On the right side you’ll see the editor controls. The first tab allows you to change information about the theme. Saving the theme is possible at any time and doesn’t require a reload unless you change the name of the theme. You can also look at the CSS with a link below the name.
Next, I might want to change the appearance of the frame and line colours.
Next, I can change the line numbers.
And then the toolbar.
Finally, we can take a look at the highlighting! I’ve left this till last since I wanted to make sure I have the overall look of the new theme first.
And there we have it, a new theme! Tinker with the settings until you have the right look. This theme is obviously a 5 minute demonstration and the some of the stock themes that people have put together look amazing comparatively - but the important thing to take away from this post is that creating themes is now super quick and very much integrated into Crayon!
The Theme section displays the information about the current theme, a toolbar for performing theme editor actions and the Live Preview. Modifying any settings automatically refreshes this preview before submitting the settings page.
Theme Types
Crayon stores the Stock Themes which come with the plugin under this path:wp-content/plugins/crayon-syntax-highlighter/themes
To allow modifying these themes and preserving changes, Crayon stores User Themes under this path:
wp-content/uploads/crayon-syntax-highlighter/themes
This avoids any changes being overwritten during updates to the plugin. Stock themes can’t be deleted or modified for this reason - unless you enable CRAYON_DEBUG in globals.php. Of course, modifying the theme CSS is independent of the Theme Editor, but keep in mind that your changes will be lost when updating the plugin.
Creating Themes
Start by selecting an existing theme which is the closest appearance you’re trying to create. To play it safe, start with the Classic theme. Click Duplicate and type in a new name.
The theme is duplicated as a User Theme. Now click Edit to load the Theme Editor.
One handy feature of the editor is that modifications take place live just like in the regular settings page - so changing the language or settings will also change them in the theme editor, allowing you to see how your changes will look like for different settings.
On the right side you’ll see the editor controls. The first tab allows you to change information about the theme. Saving the theme is possible at any time and doesn’t require a reload unless you change the name of the theme. You can also look at the CSS with a link below the name.
Next, I might want to change the appearance of the frame and line colours.
Next, I can change the line numbers.
And then the toolbar.
Finally, we can take a look at the highlighting! I’ve left this till last since I wanted to make sure I have the overall look of the new theme first.
And there we have it, a new theme! Tinker with the settings until you have the right look. This theme is obviously a 5 minute demonstration and the some of the stock themes that people have put together look amazing comparatively - but the important thing to take away from this post is that creating themes is now super quick and very much integrated into Crayon!