I have used WordPress on and off for a number of years and I think I can say it does the job. However, it does annoy me sometimes.
With this blog, I intend to share quite a lot of code and I like code to be embedded in the text. Just find the right plugin I thought. If only it was that simple. Firstly the Plugin search seems to generate the results at random and secondly, there is the no way of filtering or sorting them by ranking, install base, last updated etc.
So I resorted to Google, but this route had it’s own problems. There are lots of blogs and items about this problem, but some are way out of date and more annoyingly, the blogs do not have dates on them so you don’t know they are out of date.
I had a couple of key requirements;
- Obviously, must highlight syntax.
- Provide a means to copy the code.
- Put the code in a scrollable box.
After much searching I settled on 2 different solutions.
Firstly I am using Crayon Syntax Highlighter for code blocks and in-line code or commands. This has an amazing number of options (almost too many) so you really can make it do what you want it to do. That is except include code from a Gist.
For that I have settled on oEmbed Gist and some custom CSS to limit the box size. The plugin is great in that you simply put the public URL in your text and it does the rest. However, long code snippets are just that, long, and I wanted to limit that within a scroll box. After yet more much searching I came across this CSS code on StackExchange which does exactly that (displayed using Crayon!).
|
1 2 3 4 |
.gist-data{ height:250px; // Any height overflow-y: visible; } |
To use it, on the site dashboard go to Appearance / Customise and then select Additional CSS. Paste in the CSS above and then save. As simple as that.
I have also installed TinyMCE Advanced which gives a few more options for general blog writing as well.
Plugin List
Finally, this task would have been so much easier if folk listed the plugins they use! You will find a list of active plugins on this site from the top menu and I’d encourage all WordPress users to do the same. It does of course use a plugin (Plugins List) to do it 🙂
All you need to do is create a new page and insert the short code [plugins_list] (if you are wondering how to display a shortcode without it being expanded you need double square brackets). Please, do it now!
Other Plugins
Finally, to possibly save you time, a list of the other plugins I looked at:
- Google Syntax Highlighter for WordPress
- Code Prettify
- Pastacode
- Prismatic
- TinyMCE Pre Button
- WP-Syntax
by 