Code Syntax Block

The Code Syntax Block plugin uses the Prism autoloader plugin to support all of the languages Prism supports. See the list of supported languages here.

The default color theme is A11y Dark optimized for accessibility. If you want to change the colorscheme, you can select from the plugin settings page a few different themes shipped with the plugin. You can also use a theme from the Prism themes repo or create your own.

The color theme is a single CSS file, there are a couple ways to customize:

1. The plugin will check the current theme for the file: assets/prism/prism.css and use that file if it exists. Add your custom file in that location, and it will be used.

2. If you do not like that file location, you can use the filter mkaz_prism_css_path and specify a path relative to your theme to use.

3. If you would prefer specifying a full URL, you can use the filter mkaz_prism_css_url and specify a full URL to the stylesheet to use.

An example adding a filter to change the URL, add the following to your theme’s function.php

add_filter( 'mkaz_prism_css_url', function() {
    return 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-hopscotch.css';

});

Note: if you use the title/filename feature and customize the CSS, you will need to apply your own style targeting the prism-titlename class.

Use the filter mkaz_code_syntax_language_list to customize the list of languages to select displayed in the editor. By default the code syntax block shows a shorter list of popular languages, but Prism supports close to 200, see list.

Use this filter to extend to support the languages you need. Additionally you can use the filter to shorten the list to just the languages you use to make it easier to select.

Here is an example shortening the list to a smaller set:

add_filter( 'mkaz_code_syntax_language_list', function() {
    return array(
        "bash" => "Bash",
        "go" => "Go",
        "html" => "HTML",
        "javascript" => "JavaScript",
        "json" => "JSON",
        "markdown" => "Markdown",
        "php" => "PHP",
        "python" => "Python",
        "jsx" => "React JSX",
        "sass" => "Sass",
        "sql" => "SQL",
        "svg" => "SVG",
        "toml" => "TOML",
        "vim" => "vim",
        "xml" => "XML",
        "yaml" => "YAML",
    );
} );

Yes, on the plugin settings page in the dashboard you can set a default language when inserting a code block. You can still change if you wish to show code not using the default language.

Yes, use the filter mkaz_code_syntax_force_loading to force always loading assets, otherwise it users has_block to check.

Example:

add_filter( 'mkaz_code_syntax_force_loading', '__return_true' );