WordPress設定

WordPressテーマ「JIN」でコードを見やすく表示する設定方法とprism.jsのカスタマイズ読み終わるまで 1

WordPressテーマ「JIN」でコードを見やすく表示する設定方法とprism.jsのカスタマイズ アイキャッチ

WordPressテーマ「JIN」でHTMLやCSSのスクリプトやプログラム言語のコードを見やすく表示するシンタックスハイライターの機能を使う方法とprism.jsを変更してテーマを変更する方法を解説します。

この記事を見ることで得られるメリット
  • WordPressテーマ「JIN」でシンタックスハイライター機能を使う方法がわかります
  • prism.jsとprism.cssを変更してシンタックスハイライター機能をカスタマイズする方法がわかります

WordPressテーマ「JIN」のシンタックスハイライター機能

WordPressテーマ「JIN」はHTMLやCSSのスクリプトやプログラム言語のコードを見やすくする機能のシンタックスハイライターに、prism.jsという外部の仕組みを利用しています。

WordPressテーマ「JIN」のシンタックスハイライター機能を設定する方法

WordPressの管理画面(ダッシュボード)の「外観」内の「カスタマイズ」 に入って、その中の 「その他設定」に入ります。

WordPressの管理画面の「外観」の「カスタマイズ」の「その他設定」画面WordPressの管理画面の「外観」の「カスタマイズ」の「その他設定」画面

↑「コードのシンタックスハイライターを利用する」にチェックを入れて公開ボタンを押します。

ビジュアルエディターでシンタックスハイライターを使う方法

投稿ページの編集画面投稿ページの編集画面

投稿ページのへ編集画面のツールバーにある「コードサンプルを挿入/編集」ボタンを押します。

コードサンプルを挿入/編集画面コードサンプルを挿入/編集画面

↑コードを入力してOKボタンを押します。

投稿ページの編集画面投稿ページの編集画面

↑このようにビジュアルエディタで簡単にコードをシンタックスハイライター装飾することができます。

表示を確認

WordPressテーマ「JIN」のシンタックスハイライター機能で表示させたHTMLコードWordPressテーマ「JIN」のシンタックスハイライター機能で表示させたHTMLコード

↑右上のCopyボタンをクリックするとコードをコピーできます。

プログラム言語やスクリプトのなかでHTMLのタグだけはWordPressが自動的に変換するのでエスケープ処理が必要です。ですが「JIN」のツールバーにある「コードサンプルを挿入/編集」機能を使ってHTMLコードを挿入するとエスケープ処理は不要になります。

なお、prism.js単体で利用している場合や、JINを利用してもテキストエディタに手動で入力する場合はHTMLコードのエスケープ処理は必要です。

prism.jsを変更してシンタックスハイライター機能をカスタマイズする方法

WordPressテーマ「JIN」のシンタックスハイライターはprism.jsという外部サービスのファイルを利用しています。

ファイルを変更することでテーマの変更や機能を追加することができます。

WordPressテーマ「JIN」のシンタックスハイライター機能に実装されている言語

WordPressテーマ「JIN」に実装されているシンタックスハイライターのプログラミング言語は下記のとおりです。※今後のテーマのアップデートで変更される可能性があります。

  • HTML/XML
  • JavaScript
  • CSS
  • PHP
  • Ruby
  • Python
  • Java
  • C
  • C#
  • C++

既存のprism.jsとprism.cssファイルを置き換える

他に使いたい言語やテーマがある場合はprismのサイトで使いたいプログラム言語やテーマを選択した状態でprism.jsファイルとprism.cssファイルをダウンロードして、レンタルサーバーのディレクトリの既存ファイルを置き換えます。

prism.jsとprism.cssファイルをダウンロードする詳細な方法はこちらの記事を参考にしてください↓
prism.js コードを見やすく表示するシンタックスハイライター 設定方法と使い方

ダウンロードしたファイルを下記のレンタルサーバーのディレクトリに設定して上書き保存します。上書きする前に以前のファイルはバックアップをとっておいてください。

  • prism.jsの設置場所:ドメイン名/public_html/wp-content/themes/jin/js
  • prism.cssの設置場所:ドメイン名/public_html/wp-content/themes/jin/css

追加した言語はclass=”language-言語名”で指定

追加した言語は編集画面のツールバーにある「コードサンプルを挿入/編集」画面には反映されず表示されません。※最初からある言語だけ表示。

なので手動でテキストエディタで<code class=”language-言語名”>で指定する必要があります。例えばSQLだと下記のように指定します。

<pre class="language-sql"><code>
SQL文
</code></pre>

↓スクリプト、プログラム言語毎の指定は下記のサイトに載っています。
https://prismjs.com/index.html#supported-languages

手動で言語名を指定して表示させた実際の画面

下記の4つのprism.cssのテーマを比較してみます。

  • Default
  • Okaidia
  • Coy
  • Tomorrow Night
  • Coyは先頭行と最後行の隙間が狭いです
  • Tomorrow Nightは他の3つと比較すると文字色の種類が少ないです

上からPHP、HTML、Bash、SQLをテキストエディタで<code class=”language-言語名”>で指定しています。

テーマ導入の参考にしてください。

Default

テーマ:「Default」上からPHP、HTML、Bash、SQLの言語を指定テーマ:「Default」上からPHP、HTML、Bash、SQLの言語を指定

「JIN」のシンタックスハイライターは最初からこのテーマになっています。

Okaidia

テーマ:「Okaidia」上からPHP、HTML、Bash、SQLの言語を指定テーマ:「Okaidia」上からPHP、HTML、Bash、SQLの言語を指定

Coy

テーマ:「Coy」上からPHP、HTML、Bash、SQLの言語を指定テーマ:「Coy」上からPHP、HTML、Bash、SQLの言語を指定

↑テキストボックスの下側に影が付いています。

Tomorrow Night

テーマ:「Tomorrow Night」上からPHP、HTML、Bash、SQLの言語を指定テーマ:「Tomorrow Night」上からPHP、HTML、Bash、SQLの言語を指定

まとめ

WordPressの有料テーマ「JIN」には最初からprism.jsを使ったシンタックスハイライターの機能が実装されているため、こだわりがなければそのままの状態で利用可能です。

背景色を黒にしたい場合は好みにテーマを選択してprism.cssファイルをダウンロードし、既存のファイルを上書するだけです。

プラグインを利用するとセキュリティの脆弱性が弱まり、管理や表示速度の低下の原因にもなるので、prism.jsを利用したほうが何かと便利です。

ただ、prism.jsにはない好みのテーマデザインや機能がある場合はシンタックスハイライター(コードを見やすく表示する)プラグインを利用するのもありです。

とにかくデザインや視認性重視で、シンプルな白黒のデザインを使いたい場合は「Urvanov Syntax Highlighter」がおすすめです。

多機能で細かくカスタマイズしたい場合は「Enlighter – Customizable Syntax Highlighter」プラグインをおすすめします↓