How to Add Syntax Highlighting to WordPress (Without Plugins)

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');

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 is another popular highlighting library. It 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');

The autoloader plugin means you don't have to bundle every language upfront — it loads grammars as needed. Replace prism-tomorrow.min.css with any Prism theme.

Option 3: The Prismatic Plugin

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

Which Should You Use?

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 with no class names required, 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. Choose your preferred highlighter in the Notipo dashboard under Settings — it supports Highlight.js, Prism.js, Prismatic, and WordPress's built-in code formatting.

See the full Code Highlighting documentation for details on each option, or follow the step-by-step publishing guide to get started.