How To Display Code in WordPress (and Make It Look Pretty)
Click one of the Add Block buttons
Click the dropdown menu from the Language field to select the right coding language.
The Lineoffset field is a way to start your coding snippet at a specific numbered line, which is beneficial if you’re only displaying a subset of code that’s part of a larger collection of lines.
Some reliable encoder tools include:
This reveals the collection of blocks available. You can search for the Code block or type a keyword like “code” into the search bar.
If you are using the Classic WordPress editor, you must go to the Text tab, which is the same as the Code Editor from the Gutenberg Block Editor.
Step 5: Publish and View the Code
Once you have your document ready, it’s time to export everything to WordPress.
Encoder tools serve as alternative options when trying to display code in WordPress, especially if you don’t intend to do it that often (and would rather not mess with a plugin).
Your code now appears inside the box.
Go back to WordPress, and open the desired post or page.
Select the Options (three vertical dots) menu item in the upper-right corner. Click on the CodeEditor option.
However, we’d like to display the raw code in a blog post, not have it actually render into those blocks.
Click Publish or Update, then switch to the frontend to see your code in its original form. Similar to <code> tags, <pre> tags are lousy with formatting, so you’re left with the simplest possible look. However, there are ways to stylize these yourself.
Tips for Styling <pre> Tags
The Enlighter theme is the default theme from this plugin. However, the Theme field (still underneath the Block settings panel) presents a wide range of built-in themes to pick.
The Enlighter plugin offers a minimalist default theme for code display, with line numbers to help with organization and referencing.
Take a look at the below screenshot. In our example here, nothing has changed from the original code snippet; it has simply been presented on the frontend in a grey box.
Step 4: Consider Formatting the Code Block
The Enlighter plugin provides a tab inside the WordPress dashboard for customizing every aspect of the plugin and its highlighting features.
The Enlighter plugin comes with various themes and powerful customization tools to make the code box look however you want. If you’d rather not use the default theme, go back to your post inside WordPress and click on the currently open Enlighter Sourcecode block.
For instance, the Godzilla theme displays code as if it were on top of graph or drafting paper.
However, you must first set which type of code you’d like to preserve:
Go with HTML symbols when using HTML.
Step 2: Paste and Click to Encode
Now it’s time to copy the code you’d like to display and paste it into the box that says, “Write Code…”.
The second button is called CopyToClipboard, which instantly copies everything within the code box to the user’s clipboard, which they can take and paste into any program they’d like.
Switch to the VisualEditor (regardless of whether you’re in Gutenberg or Classic WordPress).
In this article, we covered many different methods illustrating how to display code in WordPress.
You should see the original code that was pasted into the encoder, before the tool added HTML encoding elements. As mentioned, there aren’t any styling features with the encoders, so this is a wonderful method for a clean, minimalistic appearance.
Method 4: Using a Custom Shortcode
As you can see, the Code block is fairly simple, but it provides necessary functionality for maintaining formatting when publishing code on blog posts.
Switch to the Visual editor to view what it looks like. You’ll notice that the section of text will have a “Preformatted” label, which is precisely what the <pre> tag is meant to do.
On the frontend, you’ll see that the inline code snippets and larger code blocks are nicely highlighted, and the formatting from that code has been preserved.
On the frontend of the post, you’ll now see the code preserved as it should be, and without any odd activity (like adding a break to your content).
There are plenty of markdown editors to pick from, but the ideal solutions share two features:
Direct exporting to WordPress
Markdown for code highlighting
In this guide, we’ll show you exactly how to display code in WordPress (regardless of your WordPress theme) using several different methods, and we’ll help you decide which method works best for your workflow.
What Happens When You Add Regular Code in WordPress?
You can also stylize the text formatting and box behind the code. Here’s a starter template that you can add to your CSS file:
The Enlighter plugin works slightly different for those still using the Classic WordPress Editor.
Here are some reputable plugins for displaying code on WordPress:
The Enlighter Highlighter block then shows up in the Block Editor, with a title for “Generic Highlighting” and a field to “Insert Sourcecode…”
Perhaps the oldest — yet still incredibly reliable — way to display code on WordPress is by simply adding specific HTML tags around the code snippet. This method is best for when working with the classic WordPress editor, or in any HTML editor.
What’s great about the Code block is that it respects all spaces and tabs you already had within the code snippet. As a result, it shouldn’t look any different from the source you copied it from.
Step 3: Publish and View Results
There are quite a few coding languages to choose from, so scroll through the list and pick the one that’s most appropriate.
Markdown editors offer the ability to not only type and format faster, but many of them connect directly to WordPress for instant publishing right from the editor.
Lengthier code snippets deserve their own blocks, separated from whatever content you’re writing into paragraphs. For those, we recommend sticking with <pre> tags.
Let’s take the <br> tag, for example — without <code> tags, it would simply add a break to your paragraph.
You should now see a field with the prompt “Write code…”.
Use these tips to improve how it looks:
Try your best to remove, or completely avoid, line breaks, since the <pre> tag often doesn’t recognize these. In general, it responds poorly to too many line breaks.
Consider adding an overflow-x:auto; property in your CSS to add scrolling functionality to the <pre> tag code. This helps with overflowing content, since the <pre> tag by itself lets your code run off the page.
Stick to monospaced fonts.
In Ulysses, go to the top of the document to find the toolbar. Click the PublishingPreview button.
This reveals the Block sidebar in WordPress. If it doesn’t appear, be sure to click the Settings (gear icon) button in the top-right corner of the WordPress window.
Based on our testing, the most effective encoder tool is the W3Docs HTML Encoder, so we’ll use it for this tutorial.
Step 1: Open the Encoder and Choose Settings
HTML encoders preserve the integrity of code formats, particularly those with special characters and tabs. Encoders can handle all types of code, but they then translate the inserted code into HTML-ready code that’s easy to paste into WordPress.
This method may seem a bit redundant considering that WordPress already has a built-in Code block, but some plugins offer additional features and formatting tools to make working with a plugin worthwhile. In short, you can make your code blocks prettier than what you’d get with the standard Gutenberg Code block.
This brings up a new window called Enlighter Code Insert.
If you’re using the WordPress Gutenberg Block Editor, open a post in which you’d like to display code. Click one of the Add Block (+ icon) buttons to reveal the collection of blocks available.
To begin, you must choose a “syntax highlighter” plugin, which is a fancy way of saying that the plugin will highlight your source code and keep its formatting intact.
Once you’ve hit the Publish button, visit the live version of that post to confirm your code chunk is displaying as raw code.
The Speciallines field highlights any lines you specify. To make this happen, type in line numbers separated by commas.
As a syntax highlighter, the plugin preserves all formatting choices and tabs. Once you’re happy with the result, click on the Publish button.
Step 4: Preview Code on the Frontend
However, you still need to highlight and preserve that code’s formatting. And some code may cause problems with the surrounding content if not preserved properly.
Another example is the Classic theme, which is a less minimalistic version of the Enlighter theme with brighter colors and more defined lines.
Step 7: Consider Building a Custom Theme
This markdown method is for longer blocks of code. It’s not usable in the middle of a paragraph, so you must create a new line in order for the markdown to activate.
As a result, site visitors see highlighted lines for all the ones you specified.
After clicking that menu item, the code highlighter field appears wherever the cursor was last.
This brings up a dropdown menu to select a platform and website to publish on. You can also use the ManageAccounts option in that menu to log into a WordPress website before exporting.
To gain full control over the design and display of your code boxes, go to the Enlighter tab (<> icon), then choose Appearance or ThemeCustomizer.
You’ll now see the CodeEditor rather than the visual Block Editor. Find the area you’d like to display the code and paste your encoded HTML into the editor.
Finally, the third button opens the code in a new window, presenting it in a plain text version of your browser window.
Step 5: Set Language and Line Settings for Code Box
These methods are listed from easiest to most difficult, and we have some special methods for those who enjoy writing code and content in markdown editors (as opposed to WordPress).
Method 1: Using the Gutenberg Block Editor (Default)
Once you’re done, click on the OK button. You can also make adjustments to the other features in that window, like adding line indentation.
border: 4px solid black;
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
<p>A nickname for Los Angeles is The City of Angels.</p>
<p>A nickname for New York is The Big Apple.</p>
Browse or type in a keyword for the Enlighten Sourcecode block. Click on that block to insert it into the post.
Step 3: Paste Code into the Syntax Highlighter Block
Simply put, if you write a blog post and put a code snippet example in there, you’ll want to prevent the code from actually working! This way, readers can see the code in its raw form, view the code in a nicely formatted block, and even copy its contents to use in their development work.
The first setting to customize is the Language field — this tells the plugin which code language is displayed so it can offer the proper formatting and highlighting.
To begin, open a post or page in WordPress, then click one of the Add Block buttons.
Here are the benefits of using custom shortcodes to display code:
Custom shortcodes let you save complicated code once, then reuse it, eliminating the need to type longer code snippets every time.
You can write your own styling CSS for the code highlighters and boxes.
Shortcodes can be used by anyone, so other contributors can take advantage of your code highlighters and blocks with the click of a button.
You can also:
Change the size of the text
Add padding and margins to the code box
Include a border with a custom width and color
The most important part, however, is to set the Status to Draft so as not to publish the post without reviewing it on WordPress first.
This, however, poses a problem for those writing about development and design, since you need a way to properly display the code without it doing its real job, like creating a button or adding styling to a paragraph block.