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.

Add your own language

By default, this code block doesn’t include every language supported by CodeMirror. But there is a hook to add your language. Add this code in your functions.php file:

<?php 
function my_custom_languages( $languages ) {
  $languages[] = array('slug' => 'rust', 'mode' => 'rust', 'label' => 'RUST') ;

  return $languages;
}
add_filter( 'advanced_gutenberg_blocks_code_languages', 'my_custom_languages' );

Slug : unique name of the language
Mode: the mode needed to get the right library as explained in the CodeMirror mode documentation
Label : displayed in menu