ブログ運営

JINのシンタックスハイライトが反映されないときの対処法【WordPressテーマ】

JIN アイキャッチ

こんにちは、シューヘーです。

 

当ブログのWordpressテーマは「JIN」を使用させていただいているのですが、Rubyのシンタックスハイライトがうまく反映されないことに気が付きました。

 

(正確には、RubyだけでなくC, C#, C++, Javaのシンタックスハイライトも反映されません)

 

※ちなみにシンタックスハイライト(Syntax Highlight)というのは、以下のようにプログラミングのコードに色がつく機能のことです。

class Hoge
  def hello
    'こんにちは'
  end
end

上記はシンタックスハイライトされない不具合の対処後なので、うまく色がついていると思います。

 

そこで、今回はその原因と解決策を、現役エンジニアの僕が解説しようと思います。

JINのシンタックスハイライトが反映されないときの対処法

原因

JINでは、シンタックスハイライトの機能を実現するためにPRISMという外部のライブラリが利用されています。

 

PRISMをダウンロードするときに、どの言語に対してシンタックスハイライトを有効にするかを選べるのですが、そこにRubyが含まれていないことが原因でした。

(以下がPRISMのダウンロード画面で、ダウンロードする前に言語を選択できます)

PRISMの言語選択画面

解決策

手順は以下のとおりです。

1.PRISMのダウンロードページへ行き、Rubyを選択してダウンロードする

2.ダウンロードしたファイルをサーバーにアップロードする

順に解説していきます。

1.PRISMのダウンロードページへ行き、Rubyを選択してダウンロードする

まず、PRISMのダウンロードページへ行きます。

 

次に、「Ruby」にチェックを入れます。

※上記のリンクからPRISMのダウンロードページへ飛んだ人は、もとからRubyにチェックが入った状態になっていると思うので、チェックがついていることを確認するだけでOKです。

Rubyのチェック

※ついでに、C, C#, C++, Javaにもチェックが入っていることを確認します。チェックがついていれば、これらの言語のシンタックスハイライトも有効になります。

 

下までスクロールし、「DOWNLOAD JS」と「DOWNLOAD CSS」のボタンをクリックして、JSとCSSのファイルをダウンロードします。

PRISM ダウンロード

これであなたのPCの中に、prism.jsとprism.cssという2つのファイルがダウンロードされました。

2.ダウンロードしたファイルをサーバーにアップロードする

先程ダウンロードしたprism.jsとprism.cssという2つのファイルを、Wordpressが設置してあるサーバーへアップロードします。

 

サーバーというのは、「エックスサーバー」とか「ロリポップ」とか「さくらのサーバー」とかそういう類です。(エックスサーバーの人が多いんじゃないでしょうか。)

 

サーバーへファイルをアップロードするには、FTPソフトというアプリを使います。FTPソフトの使い方を説明すると長くなるので、サルワカさんの【FileZillaの使い方】WordPressでFTPソフトを使おうを参考にしてください。

 

※ちょっとここらへんは初心者には難しいかもしれませんが、がんばってください。。笑 最悪どうしても分からなければ、僕にTwitterで質問いただければと思います。

 

FileZillaでサーバーにつなぐと、以下のような画面になります。

ファイルアップロード画面

アップロード手順は以下のとおりです。

1.サーバー側の「public_html/wp-content/themes」を自分のPCにダウンロードしておく(万が一失敗したときのバックアップ用)

2.サーバー側の「public_html/wp-content/themes/jin/css/prism.css」を削除

3.自分のPCにある「prism.css」をサーバー側の「public_html/wp-content/themes/jin/css/」にアップロードする

4.サーバー側の「public_html/wp-content/themes/jin/js/prism.js」を削除

5.自分のPCにある「prism.css」をサーバー側の「public_html/wp-content/themes/jin/js/」にアップロードする

これで、サーバー側の「prism.js」と「prism.css」が最新版に更新されました。

 

新規投稿でコードを埋め込んでみると、Rubyを選択したときもコードに色がついていることが確認できると思います。

class Hoge
  def hello
    'こんにちは'
  end
end

さいごに

以上、JINのシンタックスハイライトの不具合解消法でした。

 

一応JINの運営さんに「ハイライトうまくできてませんよ〜」と連絡しておくので、次のアップデートぐらいで直っているかもしれません。

 

では、今回は以上です。

 

P.S.

アイキャッチはJINさんのサイトから拝借しました。悪いこと書いていないのでお許しを。問題があればご連絡くださいませ。