Search

How to Add Syntax Highlighting for Code Block in WordPress (Without Plugin)

If you find the default code block in the WordPress block editor a bit dull, you might want to give syntax highlighting a shot. Syntax highlighting contributes to the overall aesthetic of the content. The visually appealing colors not only make the code stand out but also create a more engaging appearance for the post or page and help retain the reader’s attention. The example below illustrates how syntax highlighting operates.

From this:

To this:

In addition to enhancing the visual appeal, syntax highlighting first and foremost improves code comprehension, even for those who might not be well-versed in the programming language being used. With highlighted syntax, readers can quickly identify important elements and grasp the code’s structure, logic, and flow. This is particularly valuable for tutorials, technical documentation, and educational content where a clear understanding of code is essential.

How to Add Syntax Highlighting for Code in WordPress

Adding syntax highlighting to your WordPress website involves a crucial choice: selecting the ideal syntax highlighter library to integrate. Among the array of options, you’ll find a couple of standout choices featuring lightweight scripts that seamlessly elevate your content. Notably, two of the most widely recognized contenders are Highlight.js and Prism.js.

For this tutorial, we use Highlight.js to demonstrate how you can add syntax highlighting for your WordPress code block without installing an additional plugin for it. Let’s get started!

Load and Run the Syntax Highlighting Script

Start by logging in to your WordPress admin dashboard then navigate to Appearance  Theme File Editor. Select the functions.php file from the Theme Files list then add the following snippet to load and run the Highlight.js library on your WordPress site.

function wpp_highlight() {
	wp_enqueue_style( 'highlightjs-css', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css' );

	wp_enqueue_script( 'highlightjs', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js', '', 'latest', true );

	wp_add_inline_script( 'highlightjs', 'hljs.highlightAll();' );
}
add_action('wp_enqueue_scripts', 'wpp_highlight');

If you’re working with a block theme, you can find the Theme File Editor menu located within the Tools menu. In the case that your chosen theme, like “Twenty Twenty Three,” doesn’t include the functions.php file, you might have to create it via SFTP or your site’s file manager initially.

Alternatively, you can make use of the Code Snippets plugin to conveniently manage all of your custom code. This approach ensures that you won’t need to be concerned about the potential issues of switching themes or encountering disruptions to your custom functions when updating your theme.

Once you’ve applied the code to your site, Highlight.js will find and highlight the code inside your WordPress code block that uses the <pre><code> tags. And you don’t need to choose the code language you want to highlight, as Highlight.js has automatic language detection built-in.

Customize the Code Block Style

Still, an issue has emerged. As shown in the screenshot above, there’s a noticeable difference between the background color of the code block and the background style of Highlight.js. To address it, we already prepared a custom CSS snippet for you. Copy the following snippet to the Additional CSS editor which is located on Appearance  Customizer from your WordPress dashboard (you need to enable theme customizer first for block theme).

pre.wp-block-code {
	background-color: #FAFAFA;
	padding: 8px;
	border-radius: 10px 10px 10px 10px;
	font-size: 14px;
}

The CSS snippet provided will add a lighter background color to the code block. Additionally, it incorporates added padding to establish an inner background frame, featuring slightly rounded corners. Moreover, the code font size will be set at “14px”. Feel welcome to adjust the style according to your personal preferences.

The Bottom Line

In summary, syntax highlighting not only adds visual appeal by making code stand out through attractive colors but also enhances comprehension. This is particularly valuable for tutorials, technical documentation, and educational content, where it helps both beginners and experienced individuals quickly identify key elements, understand code structure and logic, and maintain engagement.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Add Syntax Highlighting for Code Block in WordPress (Without Plugin)”

    • Thank you for your kind words Jan,
      And for sharing your experience with manually adding syntax highlighting to WordPress.

      Reply

Leave a Comment