【WordPress】プラグインやPrism.jsでシンタックスハイライトが動かないときは「Gist」がおすすめ│おったんの日記 wotablog

この記事の目次

【WordPress】プラグインやPrism.jsでシンタックスハイライトが動かないときは「Gist」がおすすめ

こんにちは。サラリーマンで育児に奮闘しているおったんです。

この記事では、「Gist」を使ったシンタックスハイライトの方法をご紹介します。

プログラムのコードをシンタックスハイライトさせるには、Gistを使い方法以外に、プラグインやPrism.jsを使った方法もあります。当ブログでは、WordPress上で「The Thor」のテーマ使用していますが、プラグインやPrism.jsのどちらもとうまく表示されませんでした。試しにGistを使ってみたところ、「The Thor」のテーマでもシンタックスハイライトをうまく表示させることができました。

「The Thor」のテーマを使用していなくても、シンタックスハイライトがうまく表示されないとお困りの方に参考になればと思います。

1 【WordPress】プラグインやPrism.jsでシンタックスハイライトが動かないときは「Gist」がおすすめ
2 シンタックスハイライトとは？
3 The Thorではシンタックスハイライトがうまく表示されない？
4 Gistでシンタックスハイライトを埋め込むには
- 4.1 GitHubのアカウントの作成
- 4.2 Gistの作成とシンタックスハイライトの埋め込み
5 まとめ

シンタックスハイライトとは？

プログラムのコードの可読性をあげるためにテキスト中の一部分を異なる色やフォントで表示させることです。

例えば、以下のようなJava言語のコードがあったとします。通常WordPress上でコードを整形済みテキストで表示すると以下のようになります。

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("Hello World!!");
   }
}

ちょっと見た目が味気ないかな

これをシンタックスハイライトさせた場合、下のような表示になります。

シンタクスハイライトさせるとやはり見栄えが良いですね

The Thorではシンタックスハイライトがうまく表示されない？

当ブログはWordpressを使って運用し、テーマには「The Thor」を使用しています。

以前、The Thorのトップページでアーカイブ記事の抜粋が長くなってしまうことの対応策を記事にしてみました。

【THE THOR】アーカイブ記事の抜粋が長い場合の対応策と解決策こんにちは。サラリーマンで育児に奮闘している「おったん」です。この記事では、WordPressの「The Thor」のテーマでアーカイブ記事の抜粋が長く表[…]

その際に用いたCSSのコードをシンタックスハイライトさせようとしたのですが、何故かうまく表示されませんでした。

WordPressの下書き中のプレビューではシンタックスハイライトがうまく表示されるのに、なぜか公開すると通常の灰色の整形済みの表示に切り替わってしまいました。プラグインだけでなく、Prism.jsも試してみたのですが、同様の結果でした。

できればCSSのコードをシンタックスハイライトにしたいなと考え、試行錯誤した結果、Gistを使うと問題なくシンタックスハイライトさせることができたのでその方法を次でご説明します。

Gistでシンタックスハイライトを埋め込むには

Gistはソースコードを1ファイル単位でバージョン管理をし、公開することができるGitHubのサービスの一つです。

アカウントを作成しないと使えないデメリットはあるものの、プラグインによる不具合や自身のサーバー負担がないメリットがあります。

GitHubのアカウントの作成

Gistを使用するためにGitHubのアカウント作成を行います。GitHubのアカウントをお持ちの方は次の項目に進んでください。

GitHubからアカウントの作成を行います。
任意のユーザー名、Eメールアドレス、パスワードを入力して「サインアップ」のボタンを押します。
次にプランを選択しますが、Gistは無料プランで使用できるので、「Unlimited public repositories for free.」を選択して「Continue」のボタンを押します。
登録したメールアドレスにメールが届くので、「Verify email address」のリンクをクリックします。
Githubの画面上部に「Your email was verified.」と表示されGitHubのアカウントが作成されます。

おったん

これでGitHubのアカウントの作成は完了です

Gistの作成とシンタックスハイライトの埋め込み

次にGistの作成とシンタックスハイライトのコードの埋め込みを行います。

GitHubへアクセスし、サインインを行います。
サインイン後に画面右上部のベルの通知マークとアカウントのアイコンのマークの間にある「+」マークをクリックして、「New gist」をクリックします。
ソースコード画面が表示されるのでソースコードを入力します。
1. 上のテキストボックスでコードの登録名を入力します。
2. 下のテキストボックスでソースコードを入力します。
3. 「Create public gist」をクリックして保存します。
Gistの埋め込みコードが生成されるので、「Embeded」というドロップダウンボタンの横のテキストボックスにある”<script src…”という埋め込み用のコードをコピーします。
コピーしたコードをWordPressの投稿の編集画面のテキストエディターに張り付けます。
WordPressの投稿画面のプレビュー画面からGistによるシンタックスハイライトが埋め込まれていることを確認します。
プレビューで問題ないことを確認後、記事を公開します。