Add Syntax Highlighting to WordPress Code Blocks Using Prism

Adding syntax highlighting to your code blocks enhances readability and helps differentiate code elements using color and formatting. In this guide, we’ll show you how to integrate Prism.js into your WordPress site for syntax highlighting without relying on third-party plugins.

We’ll cover both methods—whether you’re using a child theme or not—based on a real-world implementation.

Why Use Prism.js?

Prism.js is a lightweight and highly customizable syntax highlighter that supports a wide range of programming languages. It’s a perfect solution for those who want full control over the appearance of their code blocks without the overhead of plugins.

While it’s easy to install a plugin for syntax highlighting on your WordPress site, I prefer to avoid adding extra plugins whenever possible to keep my site fast and lightweight. Plugins can be useful, but each plugin adds to your site’s load time and complexity. Reducing the number of plugins can help keep your site lean and running smoothly.

That’s where Prism.js comes in. It’s a highly efficient and lightweight syntax highlighter that won’t affect your site’s performance. The core code is just a few kilobytes when minified and gzipped—practically tiny.

Prism.js is built with modern web standards, making it not only lightweight but also highly extensible and customizable. It’s trusted by many popular websites, including CSS Tricks, Stripe, Mozilla, and even React’s main site, which speaks to its reliability and versatility.

Benefits of Prism.js

• Lightweight: At just a few kilobytes when minified, Prism won’t slow down your site.
• Customizable: Choose only the languages and features you need.
• Modern Standards: Built to work seamlessly with modern browsers and web standards.
• Trusted: Used by top companies like CSS Tricks, Stripe, Mozilla, and even React.

How to Add Syntax Highlighting to WordPress Using Prism

Now, let’s walk through how to integrate Prism.js into your WordPress site. We’ll cover both methods depending on whether you’re using a child theme or directly working with your parent theme.

Download Prism.js and Prism.css

1. Visit the Prism.js Download Page.
2. Select the theme of your choice.
3. Choose the languages and plugins you want. I recommend selecting the Copy to Clipboard Button plugin for enhanced user experience.
4. Download the generated prism.js and prism.css files.

Upload the Prism Files

For Child Themes:

1. Upload prism.js to wp-content/themes/your-child-theme/assets/js/
2. Upload prism.css to wp-content/themes/your-child-theme/assets/css/

Learn how to create child themes in WordPress.

Note: If the assets/js or assets/css folders don’t exist, you’ll need to create them manually.

If You’re Not Using a Child Theme:

1. Upload prism.js to wp-content/themes/your-theme/assets/js/
2. Upload prism.css to wp-content/themes/your-theme/assets/css/

Enqueue the Prism Files in Your Theme

To ensure that the Prism files are loaded only on the single post pages, you’ll need to enqueue them in your theme’s functions.php.

For Child Themes:

In your child theme’s functions.php, add the following code:

function enqueue_prism_assets() {
    if ( is_single() ) {
        // Enqueue prism.css from the child theme's assets folder
        wp_enqueue_style( 'prism-css', get_stylesheet_directory_uri() . '/assets/css/prism.css', array(), '1.0' );
        
        // Enqueue prism.js from the child theme's assets folder
        wp_enqueue_script( 'prism-js', get_stylesheet_directory_uri() . '/assets/js/prism.js', array(), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_prism_assets' );

For Parent Themes:

If you’re not using a child theme, replace get_stylesheet_directory_uri() with get_template_directory_uri() :

function enqueue_prism_assets() {
    if ( is_single() ) {
        wp_enqueue_style( 'prism-css', get_template_directory_uri() . '/assets/css/prism.css', array(), '1.0' );
        wp_enqueue_script( 'prism-js', get_template_directory_uri() . '/assets/js/prism.js', array(), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_prism_assets' );

Directory Structure

If you’re using a child theme, your directory should look like this:

wp-content/themes/your-child-theme/
    ├── assets/
    │   ├── css/
    │   │   └── prism.css
    │   └── js/
    │       └── prism.js

If you’re not using a child theme, then you would upload your prism.js and prism.css files directly into the parent theme’s assets folder.

wp-content/themes/your-theme/
    ├── assets/
    │   ├── css/
    │   │   └── prism.css
    │   └── js/
    │       └── prism.js

Use Gutenberg’s Code Block for Adding Code

In the WordPress block editor (Gutenberg), follow these steps to display code:

1. Select the Code Block from the block inserter.
2. Add your code directly into the block (no need to manually add <pre> or <code> tags).
3. Go to the Advanced settings in the right sidebar.
4. In the Additional CSS class(es) field, type the appropriate language class (e.g., language-php, language-css, language-js, etc.).

For example:

• For PHP code, add the language-php class.
• For CSS code, add the language-css class.

Prism.js will apply the correct syntax highlighting based on the language you’ve specified.

Check the Results

Once you’ve added the code block and applied the correct language class, Prism.js should style the code block according to the syntax rules for that language.

Troubleshooting Common Issues

If syntax highlighting isn’t working as expected, here are some common issues and fixes:

• Syntax highlighting not appearing: View the page source through your browser and search for prism.js and prism.css. If they’re not found in the page source, double-check the enqueuing of the files in your theme’s functions.php file.
• 404 Error on Prism.js or Prism.css: If you see a 404 error when loading Prism files, double-check the file paths in your functions.php. Ensure the files are located in the correct directory (e.g., assets/css and assets/js).
• Code Block Not Styled: Ensure that you’ve added the correct language class (e.g., language-php, language-css) in the Advanced settings of the Code Block. Also, make sure the Prism files are properly enqueued by inspecting the page source.
• Missing Languages: If the highlighting doesn’t work for a specific language, you may not have selected it during the download process. You’ll need to redownload Prism.js and Prism.css with the additional languages and replace the files in your theme.

Conclusion

By following these steps, you can easily add syntax highlighting to WordPress blog posts using Prism.js. Whether you’re working with a child theme or directly in the parent theme, this method gives you full control over the appearance of your code blocks without relying on third-party plugins.