Code Syntax Block

Beschreibung

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 One Dark based off Atom’s One Dark theme . 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.

  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

`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.

Rezensionen

9. Oktober 2019
Great! love the dark style very much.
30. Juli 2019
Nice simple plugin that extends the capabilities of the default code block in Gutenberg. I had tried using language-X classes on the block (the advanced option), to no avail (with a prism plugin enabled). Installed this plugin instead, and it worked like a charm. The only pain in the rear was getting WordPress' search to actually find it.
28. Juni 2019
Work fine with GT and due to prism customization can be nice fitted on your website
Lies alle 5 Rezensionen

Mitwirkende & Entwickler

„Code Syntax Block“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

Übersetze „Code Syntax Block“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

See Release Notes on Github releases page