DEV Community

Kjetil Furås
Kjetil Furås

Posted on • Originally published at notipo.com

How to Add Syntax Highlighting to WordPress (Without Plugins)

#webdev #javascript #tutorial #wordpress

If you publish code snippets on your WordPress blog, syntax highlighting makes them readable. Most tutorials point you to plugins, but you don't need one. Loading Highlight.js or Prism.js from a CDN gives you the same result with less overhead — no plugin updates, no compatibility issues, no bloat.

Option 1: Highlight.js

Highlight.js is a lightweight library that automatically detects the language of code blocks and applies syntax coloring. It supports 190+ languages and has dozens of themes.

Add this to your theme's functions.php:

function enqueue_highlightjs() {
    wp_enqueue_style('highlightjs-theme',
        'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css');
    wp_enqueue_script('highlightjs',
        'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js',
        array(), null, true);
    wp_add_inline_script('highlightjs', 'hljs.highlightAll();');
}
add_action('wp_enqueue_scripts', 'enqueue_highlightjs');
Enter fullscreen mode Exit fullscreen mode

That's it. Highlight.js looks for <pre><code> blocks and highlights them automatically. Replace github-dark.min.css with any theme from the Highlight.js demo page.

Popular Highlight.js Themes

  • github-dark — dark theme matching GitHub's code view
  • github — light theme matching GitHub
  • monokai — classic dark theme popular in editors
  • atom-one-dark — Atom editor's default dark theme
  • vs2015 — Visual Studio dark theme

Option 2: Prism.js

Prism.js uses class-based targeting (language-* classes) and has an autoloader plugin that fetches language grammars on demand.

Add this to functions.php:

function enqueue_prismjs() {
    wp_enqueue_style('prismjs-theme',
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css');
    wp_enqueue_script('prismjs',
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
        array(), null, true);
    wp_enqueue_script('prismjs-autoloader',
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js',
        array('prismjs'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_prismjs');
Enter fullscreen mode Exit fullscreen mode

The autoloader plugin means you don't have to bundle every language upfront.

Option 3: The Prismatic Plugin

If you prefer a plugin, Prismatic is lightweight and wraps Prism.js with a settings page. Install from Plugins → Add New, activate it, then go to Settings → Prismatic and select Prism.js as the library.

Which Should You Use?

Approach Best For Setup
Highlight.js Auto-detection, minimal config functions.php snippet
Prism.js Explicit language classes, lazy loading functions.php snippet
Prismatic Plugin with settings UI Install and configure

If your code blocks have language-* classes (which tools like Notipo add automatically), Prism.js or Prismatic will work best. If you want automatic language detection, go with Highlight.js.

Code Highlighting with Notion and Notipo

If you write blog posts in Notion and publish to WordPress with Notipo, syntax highlighting works out of the box. Notion code blocks include the language you select, and Notipo preserves it when converting to WordPress Gutenberg blocks.

Originally published at notipo.com/blog/wordpress-syntax-highlighting

Top comments (0)