スポンサーリンク

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

2019年12月22日ブログ

  • 2021年5月23日
    少し書き直しと追記しました。

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

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

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

きらり

きらり

何がダメだったの？

結耶

結耶

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

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

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

ひこ

Luxeritasをお使いの方

Luxeritasをお使いの場合、ブロックエディタに「シンタックスハイライターブロック」が標準搭載されていますので導入する必要はありません。

ただし、旧エディタはシンタックスハイライター機能は廃止されています。(廃止前に設置したものは表示はされます。)

ブロックエディタでの使い方は以下の記事を参考にしてください。

スポンサーリンク

ハイライト表示って？

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

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

きらり

きらり

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

結耶

結耶

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

Prism.jsとは

Prism.jp (公式)

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

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

きらり

きらり

導入は難しそうだね！

結耶

結耶

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

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">

※1行目「href="ファイルまでのURL“」を入力してください。

結耶

結耶

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

きらり

きらり

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

結耶

結耶

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

使ってみよう！

実際に使ってみます。

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

HTMLは上記のようになります。2行目のクラス名(language-言語)は表示する言語を入力してください。例えばHTMLなら「language-markup」、CSSなら「language-css」、JavaScriptなら「language-javascript」となります。

行番号をつける

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

行番号を表示させる場合はpreタグに「class="line-numbers」と入力してください。クラス名(class="line-numbers)を付けなければ行番号は表示されません。

きらり

きらり

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

結耶

結耶

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

最後に

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

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

きらり

きらり

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

結耶

結耶

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

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

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

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM