If you do any coding whatsoever – either for a website, your blog or an Arduino, you have seen code blocks in a web page. Every now and then I need to do the same in this website. My first thought was – this is WordPress, the most popular blogging software in the world. The functionality I need is either built-in or a plug-in is readily available. While I found that belief to be true, it was not nearly as easy as I had expected it to be. Instead of readily finding a quick and simple solution, I found a lot of confusing and non-working ideas and articles. I have put together what I consider a simple and straightforward solution which I will detail here. It requires two plugins and is a WYSIWYG implementation.
Fixing TinyMCE
The first thing you must do is to make some changes to the default TinyMCE configuration. This is the editor called Visual in your WordPress admin page. This is easily done with a very safe plugin called Visual Code Editor. This plugin basically facilitates writing code in the TinyMCE editor. Some of its more necessary features are:
- Adds
<pre>and<code>to block