Wordpressのgutenberg（新しいWordpressの記事エディタ）ですが、
ソースコードブロックでコードを書いても
表示が残念すぎる。。

ただマーカーで色つけただけみたいな。
（テーマによるかも）

プラグインは？

シンタックスハイライト用のプラグインもたくさんあるみたいですが、
ちょっと試した感じgutenbergに対応してなかったり、
管理画面の動きがわるくなったりめんどくさかったです。

highlight.js

もっとシンプルにシンタックスハイライトだけ実現できないかといことで、highlight.jsを使います。

このライブラリはjavascriptとcssの2ファイルだけで構成されており、
htmlに設置するだけでcodeタグで囲まれたコードをきれいにレンダリングしてくれます。

Wordpressテーマに設置

// functions.php

<?php
    if(!is_admin()){
        function enqueue_hljs(){
            wp_enqueue_style('highlight_css', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/solarized-dark.min.css', array(), '9.15.8');
            wp_enqueue_script('highlight_js', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js', array(), '9.15.8', true);
        }
        add_action('wp_enqueue_scripts', 'enqueue_hljs');

        function footer_hljs(){
            echo '<script>hljs.initHighlightingOnLoad();</script>';
        }
        add_action('wp_footer', 'footer_hljs', 100);
    }
    
?>

functions.phpに上のコードを追加

css, jsファイルはネット上から取ってきます。
ちなみにハイライトのデザインは色々あって、highlight.jsのサイトでプレビューが見られます。
上でいう solarized-darkを好みのテーマ名で置き換えてください。

結果

きれいにコードが表示されるようになった。