Creating Pretty Code Blocks in WordPress Sites

Getting Started

I use CodeMirror Blocks for WordPress by Vicky Agravat to create pretty little code blocks as opposed to the boring vanilla ones. To install it, simply go to plugins -> add new -> search -> “CodeMirror Blocks” and install the CodeMirror Blocks plugin.

Once it’s installed all you need to do is change the block type you’re working in to CodeMirror block.

Changing the CodeMirror Block Font Size

One thing I noticed is that the default font size of these code blocks was different from the default text size which created an aesthetic that I didn’t particularly like. To change this, you can simply go to appearance -> customize -> Additional CSS and insert the following CSS code snippet:

.code-block .CodeMirror {font-size: .8em;}

Where 8em corresponds to a font size of 8 points.

Now you can make blocks that look like this:

#include <iostream>

int main(int argc, char** argv) {
    std::cout << "Wow, this codeblock is so pretty!" << std::endl;
    return 0;
}

There you have it, the shortest guide ever to creating pretty formatted code blocks for your WordPress site.