WordPressテーマ「JIN」でHTMLやCSSのスクリプトやプログラム言語のコードを見やすく表示するシンタックスハイライターの機能を使う方法とprism.jsを変更してテーマを変更する方法を解説します。
- WordPressテーマ「JIN」でシンタックスハイライター機能を使う方法がわかります
- prism.jsとprism.cssを変更してシンタックスハイライター機能をカスタマイズする方法がわかります
WordPressテーマ「JIN」のシンタックスハイライター機能
WordPressテーマ「JIN」はHTMLやCSSのスクリプトやプログラム言語のコードを見やすくする機能のシンタックスハイライターに、prism.jsという外部の仕組みを利用しています。
WordPressテーマ「JIN」のシンタックスハイライター機能を設定する方法
WordPressの管理画面(ダッシュボード)の「外観」内の「カスタマイズ」 に入って、その中の 「その他設定」に入ります。
WordPressの管理画面の「外観」の「カスタマイズ」の「その他設定」画面↑「コードのシンタックスハイライターを利用する」にチェックを入れて公開ボタンを押します。
ビジュアルエディターでシンタックスハイライターを使う方法
投稿ページの編集画面投稿ページのへ編集画面のツールバーにある「コードサンプルを挿入/編集」ボタンを押します。
コードサンプルを挿入/編集画面↑コードを入力してOKボタンを押します。
投稿ページの編集画面↑このようにビジュアルエディタで簡単にコードをシンタックスハイライター装飾することができます。
表示を確認
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の言語を指定「JIN」のシンタックスハイライターは最初からこのテーマになっています。
Okaidia
テーマ：「Okaidia」上からPHP、HTML、Bash、SQLの言語を指定Coy
テーマ：「Coy」上からPHP、HTML、Bash、SQLの言語を指定↑テキストボックスの下側に影が付いています。
Tomorrow Night
テーマ：「Tomorrow Night」上からPHP、HTML、Bash、SQLの言語を指定まとめ
WordPressの有料テーマ「JIN」には最初からprism.jsを使ったシンタックスハイライターの機能が実装されているため、こだわりがなければそのままの状態で利用可能です。
背景色を黒にしたい場合は好みにテーマを選択してprism.cssファイルをダウンロードし、既存のファイルを上書するだけです。
プラグインを利用するとセキュリティの脆弱性が弱まり、管理や表示速度の低下の原因にもなるので、prism.jsを利用したほうが何かと便利です。
ただ、prism.jsにはない好みのテーマデザインや機能がある場合はシンタックスハイライター(コードを見やすく表示する)プラグインを利用するのもありです。
とにかくデザインや視認性重視で、シンプルな白黒のデザインを使いたい場合は「Urvanov Syntax Highlighter」がおすすめです。
多機能で細かくカスタマイズしたい場合は「Enlighter – Customizable Syntax Highlighter」プラグインをおすすめします↓
