>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

簡単で軽量！プラグインなしでシンタックスハイライター「Prism.js」を利用する

WordPress・使い方
この記事は約9分で読めます。
     


 

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

テキストエディタの機能で文字の一部をカラー表示したりハイライトする事で、プログラミング言語などの表示が見やすくなるものです。

6430_04

シンタックスハイライト表示サンプル

6869_01

シンタックスハイライト表示サンプル

 

ルクセリタスをお使いの方へ

ルクセリタスのVer3.6.1以前までの機能にあったショートコードで利用されていた方は、今回の「Prism.js」導入の後に、少し作業が必要です。
方法は最後に書いておきますので参考にして下さい。

 

 

「Prism.js」とは

シンタックスハイライト表示する為のライブラリです。

特徴

  • デザインが詳細に設定できる
  • 必要な機能だけを使える
  • 軽量

上記の通り、必要なものだけ選択する事でプラグインで導入する場合に比べて格段に軽量です。

 

 

「Prism.js」導入

手順

  1. JavaSctiptとCSSファイルをダウンロード
  2. サーバーへアップロード
  3. JavaSctiptとCSSファイルの読み込みを記述する
  4. コードで利用する

ざっと上記の手順です。では早速。

 

ダウンロード

以下からJavaSctiptとCSSファイルをダウンロードします。

ダウンロード

 

9019_01

 

デザインテーマをクリックすると画面下の方にサンプルが表示され、最後にクリックしたサンプルが選択された状態で、次の画面になります。

 

「DOWNLOAD」ボタンを押します。

 

デザイン選択

デザインを選択します。

9019_02

 

テンプレートは８種類あり、好きなデザインのものをダウンロードできます。

サンプルを表示
Default

6430_09

Dark

6430_10

Okaidia

6430_11

Twilight

6430_12

coy

6430_04

Solarized Light

6430_13

Tommrow Night

6430_14

 

言語選択

画面をスクロールして言語を選択します。

9019_03

200種近く選択肢はありますが、使用する言語だけを選択出来ます。

デフォルトで選択されているものは以下です。

  • Markup + HTML + XML + SVG + MathML 1.55KB
  • CSS 0.93KB
  • C-like 0.69KB
  • JavaScript 2.99KB

うちではデフォルト＋PHPにチェックを入れました。

 

プラグイン（機能）選択

以下の機能から必要なものだけを選択します。

通常、ピンクで記述したものぐらいあれば十分だと思います。

  • Line Highlight（ラインハイライト） 　3.74KB
  • Line Numbers kuba-kubula（行番号）　2.63KB
  • Show Invisibles 　1.01KB
  • Autolinker 　1.13KB
  • WebPlatform Docs 　3.37KB
  • Custom Class dvkndn　0.45KB
  • File Highlight 　1.53KB
  • Show Language nauzilus　2.78KB
  • JSONP Highlight nauzilus　2.3KB
  • Highlight Keywords vkbansal　0.17KB
  • Remove initial line feed Golmote　0.31KB
  • Previewers Golmote　16.86KB
  • Autoloader Golmote　3.66KB
  • Keep Markup Golmote　1.22KB
  • Command Line chriswells0　2.82KB
  • Unescaped Markup 　1.5KB
  • Normalize Whitespace zeitgeist　872.41KB
  • Data-URI Highlight Golmote　1.43KB
  • Toolbar mAAdhaTTah　2.96KB
  • Copy to Clipboard Button mAAdhaTTah（コピーボタン）　0.9KB

 

ラインハイライト、行番号、ツールバー、コピーボタンをチェックした画面例

9019_04

↑

選択した言語、プラグインによってサイズがどのくらいになるかも分かりやすく、トータルファイルサイズが表示されています。

 

ダウンロード

9019_05

 

青いボタンからJSファイル、オレンジのボタンからCSSファイルをそれぞれダウンロードします。

 

サーバーへアップロード

ダウンロードしたファイルを適当なフォルダへ入れ、サーバーへアップロードします。

私のやった方法では以下の通り。

  1. フォルダ作成し（名称「library」）ダウンロードした「prism.js」と「prism.css」を入れる
  2. 対象サイトのワードプレスがあるディレクトリの「wp-content」直下にアップロード
/public_html/wp-conte/library/

 

9019_06

 

FTP操作がわからない場合は、以下をご覧ください。

FTPクライアントの使い方（FFFTP）とワードプレスのファイル構成
今回は、私が何十年も変わらず使っているソフト「FFFTP」でFTPクライアントの使い方と、ワードプレスでのファイル構成を紹介します。 既にワードプレスが稼働している方向けの説明になっています。 ワードプレスをこれからインストールされる方は以...
ayaito.net
2019.03.20

 

ファイルの読み込みを記述する

上記でアップロードしたファイルへのパスをテーマファイルの「header.php」や「footer.php」などに記述します。

<script src="https://XXXXX/wp-content/library/prism.js"></script>
<link rel="stylesheet" href="https://XXXXX/wp-content/library/prism.css">

 

ルクセリタスの場合

9019_09

 

以下を追記
<link rel="stylesheet" href="https://XXXXX/wp-content/library/prism.css">
<script src="https://XXXXX/wp-content/library/prism.js"></script>

 

JavaScriptは、「JavaScriptタブ」や「フッタータブ」でも動きますが、AMPでエラーが出たので、両方をヘッダーに入れました。
本当は、ハイライターを使うページでだけ読み込みたいと思っていますが、また未対応。

 

Cocoonの場合

方法１

Cocoon設定→アクセス解析・認証タブの「ヘッダーコード」欄に以下を

<link rel="stylesheet" href=https://XXXXX/wp-content/library/prism.css">

Cocoonヘッダー用コードエリア

 

フッター用コード欄に以下を記述します。

<script src="https://XXXXX/wp-content/library/prism.js"></script>

Cocoonフッター用コードエリア

 

 

方法２

ソースコード表示を利用するページにのみJavaScriptとCSS内容をコピペしてもOKです。

方法は、利用する記事の下部にあるカスタムCSSのエリアに「prism.css」の内容を、カスタムJavaScriptのエリアに「prism.js」の内容をベタっと貼付けると、該当記事でのみ有効になります。

コクーンの記事下設定エリア

 

以上で準備は完了です。

 

記事内で利用するコード

言語選択で選択したものにより、クラス名を変えて以下のように記述します。

 

<pre>
<code class="language-css">

</code>
</pre>

<pre>
<code class="language-markup">

</code>
</pre>

<pre>
<code class="language-php">

</code>
</pre>

 

 

定型文登録機能やプラグインを利用していれば、上記コードをひとつずつ登録しておくと便利に使えます。

9019_08

 

旧ルクセリタスでハイライターショートコードを使っていた場合

ルクセリタスのVer.3.6.1までは、シンタックスハイライトをショートコードで利用する機能があり、そのショートコードを利用していた場合、上記導入後、これまでに書いた記事内のショートコードを置換する必要があります。

 

利用していたショートコードは、これまで通り表示はされますので、以下の機能が必要なければ置換する必要はありません。

  • ハイライトされない
  • Copyボタンが出ない

 

Ver.3.6.2～　以下がなくなりました。

8982_03

 

文字の置換には「Search Regex」プラグインを使うと便利です。

プラグインについては以下を参考にして下さい。

検索・置換プラグインSearch Regexの使い方と正規表現＆削除は危険！
指定した文字列を検索し、指定した文字列に置換してくれるプラグインです。 いろいろな場面で便利に使えます。 最初にやってはいけない事から・・・。 絶対やってはいけないこと データベース削除 検索結果に出る「このデータベース行を削除」という部分...
ayaito.net
2019.04.03

 

ショートコード置換

CSSやPHPなど、それぞれのショートコード開始タグと終了タグで２回ずつ検索置換をします。

注意：以下のショートコードには最初に半角スペースが１つ入っているので削除して利用して下さい。


CSS

検索文字列　[ highlight_css]
置換文字列　<pre><code class="language-css">

検索文字列　[ /highlight_css]
置換文字列　</code></pre>

markup

検索文字列　[ highlight_markup]
置換文字列　<pre><code class="language-markup">

検索文字列　[ /highlight_markup]
置換文字列　</code></pre>

json

検索文字列　[ highlight_json]
置換文字列　<pre><code class="language-json">

検索文字列　[ /highlight_json]
置換文字列　</code></pre>

PHP

検索文字列　[ highlight_php]
置換文字列　<pre><code class="language-php">

検索文字列　[ /highlight_php]
置換文字列　</code></pre>

 

以上です。

 

コメント

タイトルとURLをコピーしました