Code block

A syntax highlighting block for Gutenberg with custom themes for every languages.

Examples

<header class="head">
    <h1>My Title</h1>
</header>

.head {
	text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

<?php 
function theme_setup() {

    // Text Domain
    load_theme_textdomain('agb', get_template_directory() . '/languages');

    //  Thumbnails
    add_theme_support('post-thumbnails');
    set_post_thumbnail_size(800, 600, false);
   
    //  Page Title
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_theme_setup') );

Customization

More than 30 themes
20 languages
Display / hide line number
Display File name
Customize start line number
Add your own language with filter

Configuration

Add a Code Block, paste your code, select the language in the inspector, add a file name (optionnal). Choose if you want to display line number, define a line start number and that’s it!

Performances: WordPress only loads in front the minimum scripts/styles required according to languages used in the post.

This block uses Code Mirror and React Code Mirror from Marijn Haverbeke and Jed Watson.