highlight.js で <pre>～</pre> をシンタックス・ハイライトしたい

highlight.js では通常、<pre><code>～</code></pre> を対象に処理してくれます。

hljs.initHighlightingOnLoad();

WordPressでいえば「整形済み」で書いた、ただの<pre>～</pre>を対象に処理してもらうには、

以下のようにするとよいです。

<!-- highlight.js 読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/default.min.css" />
<!-- jQuery 読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- highlight.js に pre をハイライトしてもらう -->
<script>
$(function(){
  $('pre').each(function(){
    hljs.highlightBlock(this);
  });
});
</script>

特にWordPressで、記事の中だけを対象にしたいときは、セレクタをもう少し限定するとよいです。（以下はtwentynineteenの場合）

<!-- highlight.js に 記事の中の pre をハイライトしてもらう（twentynineteenの場合） -->
<script>
$(function(){
  $('.entry-content > pre').each(function(){
    hljs.highlightBlock(this);
  });
});
</script>