WordPressの記事でコードをかっこよく見せたい！

2023.06.05

本ブログはテックブログと謳うだけに、コードなどを紹介する機会が多いです。
そこで、コードの掲載をかっこよく見せるために、ちょっと手を加えました。
今回紹介するのは、WordPressでコードをかっこよく掲載するのに一番楽な方法のご紹介です。

※これはあくまで楽な方法の紹介です。実行するにあたっては自己責任でお願いします！

コードを関数など種類ごとに色分けなどして見やすくすることを、シンタックスハイライトというらしいです。
しかもそれを実装するコンポーネントをGoogleが提供しているという。先生なんでもやってくれるな。

最も簡単に実装する方法は、そのGoogle Code-Prettify をWEBから読み込むだけです。

<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js></script>

これをWordPressだったら、header.phpに追記するだけで、シンタックスハイライトは使用できます。簡単！

ただこれだけだと、あまりかっこよくないので、読み込み先URLにクエリ文字列でスキンを指定してやります。
スキンとは事前に用意されたスタイルのセットです。

<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian" async="async"></script>

?以降の部分のことですね。今回は「sons-of-obsidian」というスキンを使っています。

また上記の例ではasyncを記述して、jsの読み込み遅延を行ってページの速度判定への影響を緩和しようとしています。
外部ソースを読み込むとどうしてもページ速度は遅くなります。
これが許されない状況の方は、JSをダウンロードしてローカルで読み込むようにしましょう。
今回は簡単実装の説明なのでそれはナシで。

これでシンタックスハイライトで表示できるようになりました。
WordPressの投稿にコードを書いてみましょう。
今回はビジュアルエディタでの使用方法です。

「コード」ブロックにコードを書いてください。

このままだとCode-Prettifyが反映されていません。
コードを書いたブロックを選んだ状態で、右の「ブロック」の項目を選び、「高度な設定」をクリックします。

「追加CSSクラス」のところに prettyprint linenums と入れてください。
prettyprint がCode-Prettifyが反映されるクラス、linenumsが行番号が反映されるクラスです。

with open('test.php', mode='a') as f:

    title = "test-text"
    title = title.lstrip()

    f.write(title)
    f.write('\r\n')
    f.close()

files.download('test.php')

これで見やすいシンタックスハイライトが実現できました。
実に簡単だ。

なお、スキンを変えてやることで、色々見た目を変えてやることが出来ます。
ご興味のある方は調べてみてはいかがでしょうか。

では。

関連記事

タグ