こんにちは。菜笑[なえ]です。
今回は「WordPress にコードを綺麗に表示したい！GitHubGist と Highlighting Code Block」という内容で書いていきます。
事象
普段記事はMarkdownで書いているものを、WordPressのエディタに貼り付けています。
そのためコードは```で囲んでいると、自動でソースコードブロックとして入力できます。
が、表示がは背景が黒くなるだけで、あまり綺麗ではありません。
解決方法
今回は２パターン試してみました。
1. GitHub Gist
GitHub Gist はGitHubのアカウントがあれば使用できます。
コードとファイル名を記述して保存すれば、埋め込み用のURLができます。
<script src="https://gist.github.com/N310/***.js"></script>これをカスタムHTMLのブロックに貼り付ければOKです。
表示はこんな感じ。
GitHubのサービスなので、編集したら履歴も残ります。
自分の書いたコードを残していくという意味でも良いかもしれません。
2. Highlighting Code Block
こちらはWordPressのプラグインです。
説明はこちらに詳しく書いてあります。
WordPressでソースコードの記述がめちゃくちゃ簡単に！新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方
このプラグインをインストールすると、エディタのブロックに「Highlighing Code Block」というものが追加されます。
そこにコードを記入して、言語を選べばOKです。
表示はこんな感じ。
行数や言語名の表示・非表示は選べます。
こちらも綺麗にカラーが付いて良い感じですね。
おわりに
今回は2つ紹介しましたが、結局「Highlighting Code Block」を使うことにしました。
GitHubGistもコードを溜めていけるし、表示には何ら不満はないんです。
ただ、一行のコードを表示するのに使うかと言われると、それは違うかなということで、なしにしました。
Highlighting Code Block の方にも難点はありまして。
Markdownで書いてて、貼り付けても自動でHighlighingCodeBlock が適応されないんです。
なので今はエディだ上で、ソースコードブロックにあるものをコピペしてHighlighingCodeBlockに移す。ということを行なっています。
自動で挿入できる方法があれば、どなたか教えてください。
