ソースコード表示の選定

WordPressでソースコードを見やすく表示する方法はいくつかありますが、

プラグインの更新などで影響をあまり受けたくないのと、パフォーマンスも低下させたくないので、

JavaScript ライブラリのhighlight.jsでソースコードを表示することにしました。

あと、オンラインかオフラインで取得するかですが、特別な環境で行っていないので、オンラインとしました。

下記がhighlight.jsの本家です。

highlight.js

変更箇所

header.phpのheadタグ内に下記を追記します。

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/hybrid.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  

使い方

WordPressのエディタのテキストに下記のようにpreタグにcodeタグを囲んでその中にソースコードを入れます。

<pre>

<code>

print(‘Hello, world’);

</code>

</pre>

※テキストからすべて書き込むと、表示が崩れるので(よくわからない)、ビジュアルからソースコード入れてテキストでタグを入れてます。

適宜スペースを入れてください。

表示は下記のようになります。

  print('Hello, world');