Entering code blocks in the WordPress posts can be inconvenient at times. The article Posting Code Blocks on a WordPress describes various methods such as entering code blocks manually in the Text mode editor, using markdown, or using a 3rd party plugin. In this tutorial, which was inspired by a reader comment in the article, we will demonstrate how you can easily create easy-to-use code blocks in WordPress using ACF, Timber and Prism.js.
The method consists of creating code blocks with the ACF’s repeater field and entering them as shortcodes into the post. Prism.js will help us with the code highlighting.
This is how using code blocks will look like in the WordPress admin:
You can see how they display on the blog post in this live preview.
Let’s start with a WordPress setup using Chisel. It should be pretty straightforward, just don’t forget to select the ACF plugin.
If you need more information on Chisel and how to get it setup, check out our other tutorials:
Setting up code blocks with ACF
First, you will need ACF Pro, a paid version of Advanced Custom Fields plugin, which contains Repeater Field.
Then, create a new field group which will be displayed in the