Code Syntax Block

Description

Code Syntax Block extends the WordPress block editor by adding syntax highlighting support to the core code block using the Prism syntax highlighter.

The Prism syntax highlighter runs JavaScript loaded on the front-end to parse code blocks and apply syntax markup. A CSS file specifies the color and style to apply to that markup. See Prism syntax highlighter for full details.

Primary development and issues tracked on Github at: https://github.com/mkaz/code-syntax-block

Screenshots

  • Example Syntax Highlighting
  • In Editor Example

Installation

After installing and activating the plugin, use in the Block Editor by creating a standard code block and selecting a language format.

When creating a new code block, select Code block, and then in the Inspector (Block Controls on the Right) select the language for the code. The code will not change within the editor, but you’ll see a small label with the selected language.

On the front-end when the post is being viewed, the code will be color syntax highlighted.

FAQ

What languages are supported?

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.

How to customize the color scheme?

The default color theme is A11y Dark optimized for accessibility. If you want to change the colorscheme, you can select in the editor from 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.

How to customize the language list?

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",
    );
} );

Can I set a default language so I don’t have to select each time?

Yes, use the filter mkaz_code_syntax_default_lang to set a default language when inserting a code block. You can still change if you wish to show code not using the default language.

This example would set JavaScript as the default:

add_filter( 'mkaz_code_syntax_default_lang', function() { return 'javascript'; });

Can I override the conditional loading, so assets always load?

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' );

Reviews

Bug

28 June 2021
When I paste html snippet directly, code does not show correctly.
11 June 2021
This plugin uses prism.js to syntax highlight code snippets, is lightweight and very easy to use. However, it also introduces a few issues that probably really didn't need to exist. As it adds a "lang" attribute to the html element, with an invalid language (it's meant to be used for en-us/en-uk - not css/php) it breaks validation on w3c, google lighthouse etc, potentially also being an issue regarding accessibility. Also, when the plugin is disabled - probably due to the added attribute - the code blocks where the syntax highlighting were used, are considered "invalid" by Gutenberg. Luckily, they can just be repaired - no content is lost. It's still a little annoying. Not knowing the inner workings behind the plugin, the addition of this invalid attribute is probably not even needed, as a (completely valid and harmless) language-markup *class* is added to the code block, which could be used to trigger the prism code instead - that's how it works when you add it manually. So - to recap - the plugin will get your code syntax highlighted, but it will also break html validation. That might, or might not, be a problem for you. If not, Code Syntax Block could be your solution.
21 May 2021
I needed a syntax highlighter plugin for my new guide. I installed Enlighter and it looked nice, but was also super bloated. The CSS file it loads is nearly 80kb in size, 92% of which was unused code. I started looking for alternatives this morning and found Code Syntax Block. The CSS files are less than 4kb despite having all the features I needed. This is the perfect lightweight replacement for Enlighter!
Read all 34 reviews

Contributors and Developers

“Code Syntax Block” is open source software. The following people have contributed to this plugin.

Contributors

“Code Syntax Block” has been translated into 5 locales. Thank you to the translators for their contributions.

Translate “Code Syntax Block” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Change Log

2.1.0

  • Fix background color not being applied unless language specified.
  • Fixes issues with white text on light background.
  • Applies color syntax to all code blocks, language not required

2.0.4

  • Fix pasting plain text stripping elements
  • Removing formating tools that did not work

2.0.3

Compatibility fixes with TwentyTwentyOne theme
– Fixes default text when dark mode enabled
– Fixes linenumbers

2.0.2

Update package dependencies

2.0.1

Fix alignment with Twenty Twenty theme

2.0.0

Upgrade Prism to 1.22
Add Color Scheme options
Fix for WP 5.6 / GB 9.2

1.3.6

Update Prism language components
Adds new language support

1.3.5

Add Rust to default language list
Fix CSS issue with title
Upgrade Prism to 1.21

1.3.4

Fix setting default language using filter.

1.3.3

Fix block validation error for user roles with restricted permissions.

1.3.2

Fix issue with PHP warning when no posts

1.3.1

Fix compatibility issue with Gutenberg plugin 7.9
Removes in editor syntax preview added in 1.3.0

1.3.0

Upgrade Prism to 1.19
Add syntax preview in editor

1.2.4

Add filter to force loading assets, regardless of has_block

1.2.3

Conditionally load asset if has_blocks
Move Hack to front of default font list
Remove !important from font declaration
Change default font size to 15px for usability

1.2.2

Fix alignment issue with TwentyTwenty

1.2.1

Add Java and Kotlin to default language list

1.2.0

Upgrade Prism to 1.17.1

1.1.0

Add filters for customizing language list, and default language.

See full Release Notes on Github releases page