WordPress fix 3. Code samples, plugins

Since this website is basically a technical blog, it has a bunch of code samples, that looked by default like this (simply pink font):

I hoped to find a CSS style/class with a firm intension to customize it to the ground (not only font color), but again, turned out that professionals do it differently.

Professional advice from Artem Demin:
For such purposes people usually use plugins. There is a huge choice available in

Dashboard -> Plugins -> Add New

In my case the best fit option was “SyntaxHighlighter Evolved”.

Install. Activate.

Now my Block Editor has an extra option. Not only “<> Code”, but also “<> SyntaxHighlighter Code”.

Result:

Only 1 problem - it's not scrollable.

• ONLY IF it irritates you too, then here is a cure:

a: we need to modify their CSS on your server (Additional CSS won't work for it). File:

../public_html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css

Find style .syntaxhighlighter

Replace overflow settings to overflow: visible !important;

• In case of plugin update in the future, you will need to do it again...
• or you can change version in ../public_html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php file to let's say 33.6.0

b: Go to Dashboard -> Appearance -> Customize -> Additional CSS

and add

/*scroll*/
.wp-block-syntaxhighlighter-code{
	border: 1px solid silver;
	max-height:400px;
	overflow:auto!important;
}

Publish.

Result:

However, it's not enough.

2. To prevent it from "decoding" special symbols (which is a common case in code samples), we need to add an extra function in Dashboard -> Appearance -> Theme Editor:

Open Theme Functions on the right.

Add following code to the very end of the file:

function kagg_syntaxhighlighter_precode( $code, $atts, $tag ) {
if ( 'code' === $tag ) {
$code = wp_specialchars_decode( $code );
}
return $code;
}
add_filter( 'syntaxhighlighter_precode', 'kagg_syntaxhighlighter_precode', 10, 3 );
add_filter( 'run_wptexturize', '__return_false' );

And then - Update File

3. Another useful plugin I installed - Antispam Bee - free and effective.