Need help with code-syntax-block?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mkaz
263 Stars 41 Forks 203 Commits 35 Opened issues

Description

A WordPress plugin which extends Gutenberg adding color syntax highlighting to the code block.

Services available

!
?

Need anything else?

Contributors list

# 25,650
macOS
pkg
nsis
Electro...
158 commits
# 18,605
PHP
WordPre...
CSS
travis-...
7 commits
# 602,077
CSS
PHP
6 commits
# 620,679
CSS
PHP
5 commits
# 707,604
CSS
PHP
1 commit
# 394,267
C
PHP
caddy
nixpkgs
1 commit
# 73,202
PHP
WordPre...
wordpre...
gutenbe...
1 commit
# 284,814
CSS
WordPre...
PHP
dummy-d...
1 commit
# 279,014
PHP
Shell
HTML
debuggi...
1 commit
# 30,086
PHP
WordPre...
php-cur...
curl
1 commit
# 616,887
PHP
TypeScr...
angular...
Heroku
1 commit

Code Syntax Highlighting Block

A WordPress plugin which extends the WordPress Block Editor by adding syntax highlighting to the core code block.

Example:

screen shot

Install

Available on WordPress Plugin Directory at: https://wordpress.org/plugins/code-syntax-block/

You can install the code-syntax-block plugin from your WordPress plugins page, or download a zip from the releases page then upload and activate on your site.

Usage

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.

Customize

Colors

The default color theme is based off One Dark. If you want to change the colors, you can download a new 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 customize to a 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. An example, creating a
    prism-theme.css
    file at the top-level of my theme directory:
    // Use local prism theme
    add_filter( 'mkaz_prism_css_path', function() {
        return '/prism-theme.css';
    });
  1. 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 customize the theme and use the title/filename option, you will likely need to update your CSS adjusting the style targeting

prism-titlename
class.

Languages

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 even simpler 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/Shell",
        "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",
    );
} );

You can also set a default language using the filter

mkaz_code_syntax_default_lang
, by default no default is set requiring you to select the language. By setting a default language when inserting a code block the language will already be set, 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'; });

Conditional Loading

By default the plugin will check if the current loop

has_blocks
and will only load the assets if the blocks are detected. If you need to override this, and force loading of assets using the following filter in your theme:
add_filter( 'mkaz_code_syntax_force_loading', '__return_true' );

Alternative

For server-side rendering, consider using Weston Ruter's Syntax-highlighting Code Block, it was initially forked from this block. Weston's block changes the parsing engine to use

highlight.php
that renders server-side. My block uses PrismJS which renders on the front-end and requires loading additional JS file.

Colophon

  • Uses PrismJS syntax highlighter, http://prismjs.com/

  • Uses customized GH Colors theme, https://github.com/PrismJS/prism-themes

License

Copyright (c) 2018-2020 Marcus Kazmierczak.

Licensed under GPL 2.0 or later .

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.