【プラグインなし！】WordPressでかっこよくコードを埋め込むなら「highlight.js」を使おう

記事を読むメリット

今回は、WordPressの記事にかっこいい見た目でコードを埋め込む方法を解説していきます。

結論としては、highlight.jsというソースコードの見た目をよくしてくれる、javascriptライブラリを使用します。

WordPressのコードを少しいじるだけなので、初心者の方でも簡単に実装できます。
※スクショ付きで丁寧に解説していきます。

本記事の信頼性として、僕は実際にプログラミングの記事を書いているので、信頼性は担保されていると思います。
プログラミングの記事一覧

それでは、前置きはこれくらいにして、さっそくいきましょう！

スポンサーリンク

WordPressでかっこよくコードを埋め込むなら「highlight.js」を使おう

WordPressにソースコードを埋め込む際に超絶役立つのが「highlight.js」です。

これは先程も紹介しましたが、javascriptのライブラリで、CDNというサーバーの負担があまりかからない方法なので、重くならずにコードを貼り付けるだけで実装できます。

ソースコードの見た目が雲泥の差

また、highlight.jsを使ったのと、使わないのでは大きな差が生まれます。

たとえば、こんな感じ

highlight.jsを使用しない場合

highlight.jsを使用した場合

どっちがわかりやすいかと言われたら、絶対後者ですよね。

今後、「プログラミング系の記事を書いていきたい！」という方は、絶対実装したほうがいいです。

スポンサーリンク

highlight.jsの実装方法

それでは、実際に実装方法を2STEPで解説していきます。

STEP１：CDNをheadタグの直上に読み込ませる

まずは、CDNをhighlight.jsの公式サイトからコピーしていきます。

下記のコードをコピーでもOKです。

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

つぎにWordPressに行き、「外観→テーマエディター」を選択して、header.phpのファイルを開きます。

そしたら、先程のコードを</head>の直上にペーストして、ファイルを更新をクリック。

STEP２：CDNをbodyタグの直上に読み込ませる

続いて、こちらのコードをコピーしてください。

<script>hljs.initHighlightingOnLoad();</script>

つぎに先程のように、footer.phpのファイルを開きます。

そしたら、一番下に</body>があるので、その直上に先程のコードをペーストして、ファイルを更新をクリック。

実際にコードが埋め込まれているかの確認

以上で実装完了です！

試しにちゃんと実装できているか、下記のようにコードをWordPressの投稿画面に埋め込んで見てください。

<pre><code>ここにコードを入れる</code></pre>

上記の画像のようになっていれば実装完了です！

ソースコードの色の変え方

もし、「ソースコードの色が微妙だな」と思ったら、highlight.js demoで上記の画像のように、色のデモをみれるので自分がお気に入りなコードデザインを選択して、デザインを変えてみてください。

ソースコードの色の変え方は、たとえばNordに変更したい場合は、
「monokai-sublime.min.css」の部分を「nord.min.css」に変えればOKです。

こうすることで、デザインを変更できます。

それでは、今回は以上です。
記事が参考になれば幸いです。