Using Crayon Syntax Highlighter WordPress plugin to post code snippets on your blog
Posted on July 11, 2013
Recently I was trying to find a good WordPress plugin for displaying code snippets on this blog. Actually, I already had a good one. I had been using WP-Syntax for a long time and it had served me well.
But I wanted to find a syntax highlighter / code snippet plugin that would be a little bit easier to customize and that made it really easy for readers to copy code, etc. The one I ended up choosing was Crayon Syntax Highlighter by developer Aram Kocharyan. I haven’t been using it for long, but so far it’s working great. Here are some of the reasons I like it:
- Install and setup is a snap. About 3 minutes (if that) to get it working with mostly default settings just to see how it worked and looked.
- Further customization takes more than 3 minutes but not by much. It depends how much time you want to take to read over all the settings and tinker with them. So far I’ve been able to do all the customization I need right in the admin panel without even opening up the CSS file for my theme.
- You can easily set a max-width in pixels or percentage and the code box will flex nicely within your responsive website.
- You can set top and bottom margins right in the admin panel.
- The code block has a toolbar at the top and a scrollbar at the bottom (when needed) and you can set both of them (together or independently) to display always or on hover. You can also choose whether to show the language in the corner of the toolbar and choose whether or not to show a title.
- Things like language and title (and some other options) are set by adding certain attributes to the pre tag (which, like many other code snippet tools, is what you wrap your code in to make Crayon work in the first place).
- There are a bunch of other settings you can change but Aram did a good job of making the defaults pretty right on as far as I can tell. I messed with some of the stuff mentioned above but most things I left as they were on install.
- There are some well-conceived color schemes included but you can also make your own custom ones if you want to.
Here is a little bit of sample CSS code just to show you what Crayon looks like in a blog post.
If you know of a different syntax highlighter / code snippet plugin that you dig a lot, please feel free to mention it in the comments. Or if you have tips on getting the most out of Crayon, those would be good to hear/read too.