シンタックスハイライト prism.jsを導入してみた話

過去のお仕事一覧の方も入力が終わり ぼちぼちブログ周りを本格化していこうかなーと思っています。 それにあたり、ソースコードを見やすくするため、シンタックスハイライト

こんなやつを導入しました。

WordPressプラグイン「Crayon Syntax Highlighter」を入れてみたが……

「WordPress ソースコード」でGoogle検索をした結果 「Crayon Syntax Highlighter」というWordPressのプラグインをおすすめする記事が TOPに表示されたので、入れてみたのですが、すっごいエラーがでました。 あ、これは使えないやつと よく調べてみると、PHP7.3未対応とのこと

結局prism.jsに行き着いた話

「Crayon Syntax Highlighter」の代替を色々探した結果 軽くて、コピーしやすくて、行数も表示されるとのことで prism.js を導入することにしました。

prism.jsの入れ方

サイトprism.jsに行って

こちらのダウンロードボタンから各種設定画面へ

テーマ(見た目)、対象言語などを選択

プラグインを選択

※Line Numbersを入れないと行数表示ができないなど、結構機能が変わってくるので注意

設定が終わったらJSとCSSをダウンロード

サーバに配置後に、JSとCSSを読み込む

実際の使い方

表示例

p{color:red;}

入力例

<pre class="line-numbers">
    <code class="language-css">
        p{color:red;}
    </code>
</pre>

1行目のclass=”line-numbers”で、行番号の表示 2行目のclass=”language-css”で使用言語名を表示 language-php,language-javascriptなど言語ごとに変更の必要があります。

HTMLモードで、大なり（＞）小なり（＜）が表示されない件について

こんなソースコードをprism.jsで表示させようとすると <div>aaa</div> <div>aaa</div> <div>aaa</div>

aaa
aaa
aaa

といった感じで、表示したい形で表示されません。 こちらの対策としては<script type=”prism-html-markup”>を入れるといいみたいです。

<pre class="line-numbers">
    <code class="language-html">
        <script type="prism-html-markup">
            <div>aaa</div>
            <div>aaa</div>
            <div>aaa</div>
        </script>
    </code>
</pre>

以上です。 なにかの参考になれば幸いです。