Code Highlighting

Notipo converts Notion code blocks into syntax-highlighted HTML for WordPress. You choose which highlighting library to use based on what your WordPress theme supports.

Supported Highlighters

Select your highlighter in Settings in the Notipo dashboard:

Highlighter	Description
Prismatic	WordPress plugin using Prism.js. Install and activate the Prismatic plugin from the WordPress plugin directory and set it to Prism mode. No additional code needed.
WP Code	Uses WordPress's built-in code block formatting. No plugins or extra code required.
Highlight.js	Outputs code blocks compatible with Highlight.js. Requires you to load the Highlight.js library and a theme stylesheet in your WordPress theme (see setup below).
Prism.js	Standard Prism.js class names. Requires you to load the Prism.js library and a theme stylesheet in your WordPress theme (see setup below).

WordPress Setup

Prismatic (easiest)

Install the Prismatic plugin from the WordPress plugin directory, or search for "Prismatic" under Plugins → Add New
Install and activate the plugin
Go to Settings → Prismatic and select Prism.js as the library
Choose a theme and the languages you want to support

WP Code

No setup needed. This uses WordPress's native code block markup. Styling depends on your theme.

Highlight.js

You need to load the Highlight.js library and a theme CSS in WordPress. The easiest way is to 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');

You can replace github-dark.min.css with any Highlight.js theme.

Prism.js

You need to load the Prism.js library and a theme CSS in WordPress. Add this to your theme's 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 automatically loads language grammars as needed. You can replace prism-tomorrow.min.css with any Prism theme.

How It Works

When Notipo syncs a post that contains code blocks:

Detects the language specified in Notion (e.g. JavaScript, Python, etc.)
Wraps the code in the appropriate HTML markup for your chosen highlighter
The WordPress theme or plugin handles the actual syntax coloring on the frontend

Tips

Always specify a language in your Notion code blocks for proper highlighting
If you switch highlighters, re-sync existing posts to update the HTML markup
Code highlighting is available on both Free and Pro plans