How To Display Code in WordPress (and Make It Look Pretty)

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.

<code> </code>

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:

• Pick JavaScript unicode if pasting in code with JavaScript elements.
• 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 Copy To Clipboard, 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 Visual Editor (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.

New blog post with code? Display it in raw form and make it ✨ pretty ✨ with this guide 👇Click to Tweet

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:

1. Direct exporting to WordPress
2. Markdown for code highlighting

Summary

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 Publishing Preview 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.

<pre> </pre>

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 Manage Accounts 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 Theme Customizer.

You’ll now see the Code Editor 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.

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>

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:

1. Custom shortcodes let you save complicated code once, then reuse it, eliminating the need to type longer code snippets every time.
2. You can write your own styling CSS for the code highlighters and boxes.
3. 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.

To make the Code block stand out a bit, think about changing its appearance from the default.

There are several methods to properly display code on WordPress, and it often depends on the WordPress editor being used, the code language you’d like to display, and how you’d like to display and format that code. For example, opting for a plugin will definitely provide a more creative formatting experience than the standard Code block in the WordPress Gutenberg editor.

Paste or type these tags somewhere in the editor; don’t insert the code you want to display just yet. Instead, add a space between the tags.

With that, you can view the frontend of your post to see what site visitors see.

As always, click on the Publish button when you’re done editing the block, then view the results on the frontend of your WordPress post.

Method 2: Using a Plugin

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>

The Shortcode block from Gutenberg is an option, but during our tests, some code snippets lost key formatting elements or characters.