CONTENTS

[highlight.js] WordPressサイトでコードを埋め込むために実装しておきたいJS

[highlight.js] WordPressサイトでコードを埋め込むために実装しておきたいJS
目次

Highlight.js とは

highlight.js は HTML にソースコードを表示するとき、キーワードなどを強調表示するためのJavaScriptライブラリです。対応言語がとても多くパレットが豊富で、そして設置が簡単です。

 

準備編

まずサイトで動かすのに必要な、jsやcssを読み込む設定をします。
2021/3/31時点での最新はversion 10.7.1でした。

CDNでの設置の方向け

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

公式サイトからダウンロードして設定したい方向け

Syntax highlighting for the Web 公式サイト

<link rel="stylesheet" href="ダウンロードしたフォルダ名/default.min.css">
<script src="ダウンロードしたフォルダ名/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

 

使い方編

<pre>
 <code>
  表示したいコードをここに書く
 </code>
</pre>

WordPressで使いたい場合は、下記のように投稿画面の「コード」を選択してその中に表示したいコードを書けば表示されます。

 

パレット(コードや背景色)の変更

パレットの変更は、準備編にあるlink タグの href 属性を変更します。
default.css の「default」の部分を変更します。

各パレットのデモはhighlight.js demoで確認できます。

highlight.js demo

私の場合は普段の実装がSublime Textを利用しているので、パレットもわかりやすいように「Monokai Sublime」を選びました。

変更前

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/default.min.css">

変更後

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/monokai-sublime.min.css">

 

まとめ

コードのハイライト系プラグインは色々ありますが、ページ速度がかなり落ちるので今回を機にJSでの実装を行いました。

テーマのカスタマイズが苦手な方は、プラグインでの設置をおすすめしますができればこっちに変えた方がいいのではないかなとは思います。

プラグインで設定する人におすすめなのは下記の3つかな。
個人的にはEnlighterが更新頻度が多いのでいいかなと思いますが、対応言語についてはその他2つの方が多めです。

  • URLをコピーしました!

この記事を書いた人

埼玉県川口市で、自営業や起業家のホームページ制作を行っいます。
Web制作会社に7年務めたのち独立。Web制作歴12年、2500件以上のサイト制作に携わり、WordPressサイトを得意とし「作って終わり」にしない、結果が出るサイトであることを大切にしてます。「10人いれば10通りの最適なサイトがある」という信念のもと、型にハマったサイトづくりではなく、マーケティングから考えた、その人のビジネスにとって一番最適なサイトをご提案。技術面で不安のあるWebデザイナーのシステム面のサポートも行っております。

目次