Setting up WordPress to display syntax-highlighted code was a struggle due to different plugins that don’t all seem to work together, the various types of editors, etc. I don’t want to learn all about WordPress; I just want to write some simple articles.
I am at the point where I am productive and don’t destroy my articles accidentally by switching between Visual editor and Text editor. However, I am still not totally happy. Writing articles in pure HTML is not the best solution. Even with help buttons, this is the realm of the web developer that needs to lay out elements perfectly. The article writer (blogger) needs text to flow and highlight with a smattering of subtle color. I prefer some slightly higher level markup such as in Stackoverflow
or github
. If you have worked through this problem and have a good solution, drop me a line.
Here is a list of things I did to make myself productive:
- Turn off the Visual Editor
Switching between the
visual
editor and the text
editor always seems to destroy something in the code. What survived and what was mutated depended on the plugins, but the result was always disastrous. Therefore, turn it off.
Of course, this means I am now writing in HTML (not perfect, but I can manage).
Goto Users->Your Profile
. The first option allows you to disable the visual editor
- Install the plugins:
- Crayon Syntax Highlighter:
There are many syntax highlighters out there. It does not matter which one you choose, as they all seem to use the same back-end to do the coloring. This one worked for me.
- Preserve Code Formatting:
This prevents WordPress from mucking with the spaces between the <pre> tags.