Advanced Usage

Specifying the styles

Any one of 89 styles may be enqueued that highlight.php/highlight.js provide. To change the default style, you may do so by picking a theme via Customizer in the Colors section. To override the default style programmatically, use the syntax_highlighting_code_block_style to supply the one of the style names, for example github:

add_filter(
	'syntax_highlighting_code_block_style',
	function() {
		return 'github';
	}
);

When a filter is provided, the theme selector in Customizer is automatically disabled.

Limiting auto-detection languages

You can now restrict which languages are used for auto-detection using the following filter:

add_filter(
	'syntax_highlighting_code_block_auto_detect_languages',
	function() {
		return [ 'ruby', 'python', 'perl' ];
	}
);

This can ensure the right language is used when the source is ambiguous.

Change block defaults

The default block attributes are defined in PHP and can be manipulated with a normal WordPress plugin. For example, if you want all blocks to have wrapped lines and have PHP selected by default, you can do so with this PHP plugin code:

add_action(
	'init',
	function() {
		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core/code' );
		$block_type->attributes['language']['default'] = 'php';
		$block_type->attributes['wrapLines']['default'] = true;
	},
	101 // After \Syntax_Highlighting_Code_Block\init() runs.
);

This will affect not only new Code blocks you create but also previous Code blocks which may have been added before activating the Syntax-Highlighting Code Block.

Supported attributes:

• language
• highlightedLines
• showLineNumbers
• wrapLines

Suppress all plugin styles

If you don't want any of the plugin's styles to be added to the frontend, since perhaps you want to use your own instead, you can do so with the syntax_highlighting_code_block_styling filter. For example, this PHP plugin code:

add_filter( 'syntax_highlighting_code_block_styling', '__return_false' );

Display code language

If you want to display the language that a given Code block is displaying, you have a couple options. Given a code block that is normally rendered as:

This results in the following HTML markup being added to the page:

<pre class="wp-block-code" aria-describedby="shcb-language-3" data-shcb-language-name="JavaScript" data-shcb-language-slug="javascript"><div><code class="hljs language-javascript shcb-code-table"><span class='shcb-loc'><span><span class="hljs-keyword">if</span> ( a &lt; b ) {
</span></span><mark class='shcb-loc'><span>   alert( <span class="hljs-string">'A is less than B!'</span> );
</span></mark><span class='shcb-loc'><span>}
</span></span></code></div><small class="shcb-language" id="shcb-language-3"><span class="shcb-language__label">Code language:</span> <span class="shcb-language__name">JavaScript</span> <span class="shcb-language__paren">(</span><span class="shcb-language__slug">javascript</span><span class="shcb-language__paren">)</span></small></pre>

Notice the small.shcb-language element at the end which is not shown. This is an accessibility description that includes the language name and slug. If the plugin's styles are removed then the element is displayed:

You can override the default styles that hide the overall label to instead just display the part you want in the location you want. So if you want to display the language alone as follows:

You can do so with the following CSS:

.wp-block-code {
	position: relative;
}

.wp-block-code .shcb-language {
	clip: initial;
	width: auto;
	height: auto;
	margin: auto;
	clip-path: none;

	top: 6px;
	right: 6px;
	line-height: 1em;
	white-space: normal;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
}

.wp-block-code .shcb-language__label,
.wp-block-code .shcb-language__paren,
.wp-block-code .shcb-language__slug {
	display: none;
}

Alternatively, you could write CSS that targets the data-shcb-language-name="JavaScript" or data-shcb-language-slug="javascript" attributes on the pre element, to use the attribute value in generated content. For example:

pre.wp-block-code {
    position: relative;
}
pre.wp-block-code::after {
    content: attr(data-shcb-language-slug);
    font-weight: bold;
    top: 0px;
    right: 5px;
}

Syntax Highlighting in Comments

By default the plugin does not add syntax highlighting to code in comments (i.e. replies to a post/page). If you'd like to make that possible, you can activate the Syntax-highlighting Code Comments extension plugin. This plugin automatically wraps <code>...</code> inside of <pre> when it appears on a separate line, and then it adds the markup for syntax highlighting. For more, see syntax-highlighting-code-block#24.