WordPress にコードを綺麗に表示したい!GitHubGist と Highlighting Code Block

wordpress

こんにちは。菜笑[なえ]です。
今回は「WordPress にコードを綺麗に表示したい!GitHubGist と Highlighting Code Block」という内容で書いていきます。

事象

普段記事はMarkdownで書いているものを、WordPressのエディタに貼り付けています。

そのためコードは```で囲んでいると、自動でソースコードブロックとして入力できます。

が、表示がは背景が黒くなるだけで、あまり綺麗ではありません。

解決方法

今回は2パターン試してみました。

1. GitHub Gist

GitHub Gist はGitHubのアカウントがあれば使用できます。
コードとファイル名を記述して保存すれば、埋め込み用のURLができます。

<script src="https://gist.github.com/N310/***.js"></script>

これをカスタムHTMLのブロックに貼り付ければOKです。
表示はこんな感じ。

jQuery geolocation.getCurrentPositionを使った現在位置取得

かなり綺麗に表示できます。

GitHubのサービスなので、編集したら履歴も残ります。
自分の書いたコードを残していくという意味でも良いかもしれません。

2. Highlighting Code Block

こちらはWordPressのプラグインです。
説明はこちらに詳しく書いてあります。

WordPressでソースコードの記述がめちゃくちゃ簡単に!新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方

このプラグインをインストールすると、エディタのブロックに「Highlighing Code Block」というものが追加されます。

そこにコードを記入して、言語を選べばOKです。
表示はこんな感じ。

SQL 同一テーブルでの値の比較

行数や言語名の表示・非表示は選べます。

こちらも綺麗にカラーが付いて良い感じですね。

おわりに

今回は2つ紹介しましたが、結局「Highlighting Code Block」を使うことにしました。

GitHubGistもコードを溜めていけるし、表示には何ら不満はないんです。
ただ、一行のコードを表示するのに使うかと言われると、それは違うかなということで、なしにしました。

Highlighting Code Block の方にも難点はありまして。
Markdownで書いてて、貼り付けても自動でHighlighingCodeBlock が適応されないんです。

なので今はエディだ上で、ソースコードブロックにあるものをコピペしてHighlighingCodeBlockに移す。ということを行なっています。
自動で挿入できる方法があれば、どなたか教えてください。

SNS

Twitter:@nae310_
Instagram:310nae