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

WordPress記事にソースコードを埋め込みたいんだけど、プラグインなしで見た目をかっこよくしたコードを埋め込む方法とかありますか?
あったら教えてほしいです!

悩んでる人

ゆうが

こういった疑問に答えます!

記事を読むメリット

  • WordPressにかっこいい見た目で、コードを埋め込む方法がわかる
  • プラグインを入れないので、バグや不具合を回避できる

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

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

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

またプラグインではないのでサイトのスピードが落ちたり、バグが発生するなどの不具合も回避できます。
本記事のもくじ
  • WordPressでかっこよくコードを埋め込むなら「highlight.js」を使おう
  • highlight.jsの実装方法
  • ソースコードの色の変え方

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

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

スポンサーリンク

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

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

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

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

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

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

たとえば、こんな感じ

highlight.jsを使用しない場合

highlight.jsを使用しない場合

highlight.jsを使用した場合

highlight.jsを使用した場合

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

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

スポンサーリンク

highlight.jsの実装方法

highlight.jsの実装方法

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

STEP1:CDNをheadタグの直上に読み込ませる

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

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

JavaScript
<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のファイルを開きます。

STEP1:CDNをheadタグの直上に読み込ませる

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

STEP1:CDNをheadタグの直上に読み込ませる

STEP2:CDNをbodyタグの直上に読み込ませる

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

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

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

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

STEP2:CDNをbodyタグの直上に読み込ませる

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

以上で実装完了です!

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

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

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

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

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

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

埋め込みソースコードの色の変え方

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

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

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

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