スポンサーリンク

プラグインを使わずにソースコードを綺麗に表示！Prism.jsを使ってみた！

ブログ

今までHTMLやCSSのソースコードを綺麗に見やすく表示(ハイライト)するために『 Crayon Syntax Highlighter』というプラグインを使用していました。

その「Crayon Syntax Highlighter」がWordPressの最新バージョンに対応していないため、エラーが発生し一部の記事が表示されなくなりました。(プラグインの更新が数年ないらしい(^^;)

そこで代わりのプラグインを探しました。ですが、ソースコードを綺麗に見やすく(ハイライト)するプラグインはたくさんあります。その中からいくつか使ってみましたが…これというものが見つかりませんでした。

きらり
きらり

何がダメだったの？

結耶
結耶

「ショートコード」を使うものが多いんだよね。私はpreタグで出力できるプラグインがいいし～

ショートコードでソースコードを囲み表示するのもいいのですが、プラグインの更新が停止してしまったり、削除してしたりした場合ちゃんと表示されなくなってしまいます。

そんなわけでCrayon Syntax Highlighterの代替プラグインを探しているときに見つけた「プラグインを使わずにハイライト表示できるPrism.js」を導入することにしました！

スポンサーリンク

ハイライト表示って？

ハイライト表示とは、文書などの文字列の背景色を反転させたり、文字の色を変えたりして強調させたりすることをいいます。「ハイライト」ともいいます。

ソースコードをハイライト表示させるために『Syntax Highlighter(シンタックス ハイライト)』というJavaScriptを使用します。
Syntax HighlighterはHTMLやCSSなどのソースコードを見えやすくしてくれるJavaScriptです。プログラム言語によってハイライト表示したり行番号をつけたりすることができます。

きらり
きらり

それで結耶は「Crayon Syntax Highlighter」を使っていたわけね。それが使えなくなったから代わりを探してたんだね。

結耶
結耶

そういうこと！でもいい代わりのプラグインが見つからなかったからプラグインを使わずにハイライト表示できるPrism.jsというのを導入してみたよ！

Prism.jsとは

Prism.jp (公式)

Prism.jsは、Syntax Highlighter(シンタックス ハイライト)表示するためのJavaScriptライブラリです。

使いたい言語や機能が選択でき、プラグインを使うより軽量なのが特徴です。

きらり
きらり

導入は難しそうだね！

結耶
結耶

簡単だったよ！導入方法を説明するからきらりもやってみてね！

Luxeritasをお使いの方

Luxeritas バージョン3.6以前をお使いの方はPrism.jsは標準で実装されていて、［定型文登録］➡︎［ショートサンプル登録］で設定できます

スポンサーリンク

Prism.jsの導入方法

Prism.js の導入方法を説明します。

ダウンロード

サイトにを開く

まずはPrism.jpサイトを開いてください。

ダウンロードボタンをクリック

右上にあるDownloadをクリックしてください。

Compression(圧縮)レベルを選択

上が「圧縮しない」、下が「圧縮する」となりますので下の Minified version にチェックを入れてください。

tテーマの選択

テーマを選択します。テーマ名をクリックするとテーマを確認できます。

言語の選択

使用する言語の選択をします。

デフォルトでは以下の4つが選択されていますので他に使う言語があればチェックを入れてください。

  • Markup + HTML + XML + SVG + MathML
  • CSS
  • C-like
  • JavaScript
プラグインの の選択

プラグイン(機能)を選択します。プラグイン名をクリックすると確認できます。

私が選んだものは↓これです。

  • Line Highlight (指定した行の)色を変える
  • Line Numbers (行番号を付ける)
  • Previewer: Color（Previewer: Base） (カラーをポップアップ表示)
  • Toolbar (ツールバー)
  • Copy to Clipboard Button (コピーボタン)
ファイルをダウンロードする

下にJavaScriptとCSSのコードが表示されます。表示の下にある「Download JS」と「Download CSS」をクリックしてJavaScriptとCSSファイルをダウンロードしてください。

サーバーにアップロード

ダウンロードした「prism.js」と「prism.css」をFTPツールでサーバーにアップロードしてください。

私の場合は「wp-content」内にフォルダを作りそこに「prism.js」と「prism.css」をアップロードしました。

結耶
結耶

フォルダ名はお好きなものを付けてください。

読み込むための記述をする

アップロードしたファイルを読み込むためのコードをhead内に記述します。

<link rel="stylesheet" type="text/css" href="https://✕✕✕/wp-content/フォルダ名/prism.css" media="all" />
<script type="text/javascript" src="https://✕✕✕/wp-content/フォルダ名/prism.js">

※ファイルまでのURLは書き直してください。

結耶
結耶

これでPrism.jsが使えるようになります。

きらり
きらり

ファイルをアップロードして読み込むための記述…ボクもできたよ～！

結耶
結耶

じゃあ次は実際に使ってみよう！

使ってみよう！

実際に使ってみます。

<pre>
  <code class="language-markup">
    ここにコード
  </code>
</pre>

選択した言語によりクラス名が変わります。CSSなら「language-css」、JavaScriptなら「language-javascript」となります。

行番号をつける

上のコードでは行番号はつきません。行番号をつける場合は以下のように記述してください。

<pre class="line-numbers">
  <code class="language-markup">
    ここにコード
  </code>
</pre>
きらり
きらり

できた～♪意外と簡単だったよ。

結耶
結耶

よかった(^-^)きらりも使ってみてね。

最後に

今回はプラグインを使わずにソースコードを見やすく表示できるPrism.jsをご紹介しました。Prism.js

Prism.js以外にもハイライト表示できるJavaScriptライブラリはあります。プラグインも便利ですが、プラグインより軽量なのでこちらのほうがいいのではないでしょうか。

きらり
きらり

結耶はこれからこのPrism.jsを使うのね。

結耶
結耶

そのつもり～♪今プラグインで表示させてた箇所のコードの修正をしてますww

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶 フォロー

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています！
多発性硬化症(MS)という難病と闘っています。