Поскольку этот вебсайт вобщем-то – технический блог, то тут часто приводятся примеры кода, которые по умолчанию выглядели так (просто розовый шрифт):
Я думал найти соответствующий CSS style/class с твердым намерением закастомизировать его до основания (не только шрифт), но опять оказалось, что профессионалы решают такие вопросы по-другому.
Профессиональный совет от Артёма Дёмина:
1. Для таких целей люди обычно используют плагины. Их огромный выбор в
Dashboard -> Plugins -> Add New
В моем случае наиболее подходящим оказался “SyntaxHighlighter Evolved”.
Установил. Активировал.
Теперь у моего Block Editor-а дополнительная функция: не только “<> Code”, но еще и “<> SyntaxHighlighter Code”.
Результат:
Только 1 проблема – он не scrollable по вертикали.
- ТОЛЬКО ЕСЛИ это тоже Вас раздражает, то вот решение:
a: Надо подправить их CSS на Вашем сервере (Additional CSS для этого работать не будет). Файл:
../public_html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css
Найдите строку .syntaxhighlighter
Замените overflow настройки на overflow: visible !important;
- В будущем, в случае апдэта плагина придется это сделать заново…
- или можно поменять версию в ../public_html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php файле на, скажем, 33.6.0
b: Теперь идем в Dashboard -> Appearance -> Customize -> Additional CSS
и добавляем
/*scroll*/
.wp-block-syntaxhighlighter-code{
border: 1px solid silver;
max-height:400px;
overflow:auto!important;
}
Publish.
Результат:
Но это еще не все.
2. Чтобы он не “декодировал” спец-символы (которых в примерах кода хватает), надо добавить дополнительную функцию в Dashboard -> Appearance -> Theme Editor:
Открываем справа Theme Functions.
Добавляем следующий код в конец файла:
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' );
И – Update File
3. Другой полезный плагин – Antispam Bee – бесплатный и эффективный.