WordPressをハイライトで表示


WordPressのコードを表示するのに引用タグを使用していましたが、
見やすいハイライト表示するのにいい方法がないか探していたところ、
現在使用しているCDNのCloudflareでその機能があることがわかり、導入することにしました。プラグインで表示する方法もありますが、重くなるのでこちらの方法がおすすめです。

a11y-darkが見やすいと思ったのでこれを導入します。

投稿にテキストモードで以下を加えます。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/a11y-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script<hljs.initHighlightingOnLoad();</script>

後は以下のようにコードを挟めば有効化されます。

<pre><code> コード </code></pre>

highlight.jsの最新バージョンは10.3.2ですが、10.3.2では有効にならなかったので、9.xの最終バージョンの9.18.1を選択しています。
このサイトはcloudflareに依存してしまっているので仮に有料化することがあってもそのまま使っていくと思います。

WordPress

Posted by taroumaru