Flood

Inserting Code in WordPress: Challenges and Solutions

12 December, 2010

Have you ever tried inserting code into WordPress? No? Let me rephrase: why does the WordPress editor have a “CODE” button? I naively thought it was for inserting code into a post. I was too naive…

Attempts to insert code into your post using the <code> tag will first be met with surprise and then with disappointment. So, the question “Why is this tag here?” is quite relevant.

The issue is that WordPress, by default, uses the TinyMCE editor for writing posts, and TinyMCE does not support the inclusion of code for display in the post. So, why is there a button to add the <code> tag?

Wrapping your code in <code> tags results in the code being executed within the post, whether it’s HTML or PHP. Interestingly, the same result occurs if you include the code without the <code> tags. So, why have a redundant button in the editor? Hopefully, future updates will address this.

Solving the Problem

What do you get when you search Google or Yandex for “Insert code in WordPress”? Millions of results, ranging from irrelevant topics to frustrated newbies on forums and plugin advertisements. After extensive research, I found only three viable solutions.

Solution One: Manually edit each tag to ensure proper display by replacing < and > with &lt; and &gt;, respectively. The advantage is that the code won’t get consumed, but this method is tedious, especially for large blocks of code.

Solution Two: In the WordPress admin panel, navigate to “Settings – Writing” and uncheck the “WordPress should correct invalidly nested XHTML automatically” option. This should make the <code> tag work as intended. However, this solution might cause unpredictable issues with your site, so proceed with caution.

Solution Three: Use a plugin. Although I’m not a fan of adding extra plugins, this is often the best solution. Among the multitude of plugins, I found many to be either overly complex, slow, or simply ineffective. After extensive testing, I settled on wp-highlight.js by Igor Kalnitsky. It’s lightweight, simple, and functional, supporting almost all languages with automatic syntax highlighting. The code style can be customized in the admin panel.

How to Use wp-highlight.js:
  1. Write your code.
  2. Select the code and click the <code> button.
  3. Wrap the code block in <pre> tags.

The plugin does have minor drawbacks. By default, the code block spans the full width of the available space and adjusts its height to the content. You can fix this by setting the width and max-height properties in your CSS. Add the following to your style.css:

code {
    overflow: scroll;
    width: 500px;
    max-height: 500px;
}

This ensures that the content will scroll if it exceeds the specified dimensions.

You can download wp-highlight.js here. It supports multiple languages and has a straightforward installation process. Thanks, Igor!

PS: While the visual editor can also be used to insert code, I prefer to avoid it due to its limitations.

UPD: I encountered issues with wp-highlight.js inserting random characters, causing errors. After uninstalling, I discovered Qoate Simple Code Snippets, an excellent alternative for displaying code snippets without overloading your site. Highly recommended!