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:

PrismaticEasiest

WordPress plugin using Prism.js. Install from the plugin directory, no code needed.

WP CodeNo setup

WordPress's built-in code block. Styling depends on your theme.

Highlight.jsManual setup

Requires loading the Highlight.js library and theme CSS in your WordPress theme.

Prism.jsManual setup

Standard Prism.js class names. Requires loading the library in your WordPress theme.

WordPress Setup

Prismatic (easiest)

1Install the Prismatic plugin from the WordPress plugin directory, or search for "Prismatic" under Plugins → Add New
2Install and activate the plugin
3Go to Settings → Prismatic and select Prism.js as the library
4Choose 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:

1Detects the language specified in Notion (e.g. JavaScript, Python, etc.)
2Wraps the code in the appropriate HTML markup for your chosen highlighter
3The 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

Featured Images

Billing & Plans