prismjsでソースコードハイライトを実装してみました

    >


当サイトのソースコードの表示が、一応wordpressのハイライトプラグイン入れているんですけど、なんかバグかな、使えないんですよね。
でずっと放置だったんですけど、prismjsっていうのを使う機会があったので、ついでに当サイトにも導入してみました。

Download ▲ Prism

Copy to Clipboard Buttonとか有効にしておくと幸せかもしれません。

デモページ作りました。: prismjs demo | yuipro



注意点:CDNは利用せずダウンロードして設置しよう

Download ▲ Prism

注意点:langを指定しても色が変わらなくて焦ったけど盲点だった

<script src="https://yuis.xsrv.jp/cdn/js/prism.js"></script>
<pre><code class="language-markup code-toolbar line-numbers lang-php">
<?php</code></pre>
<pre><code></code></pre>

留意点:テーマによって色のバリエーション違うから気をつけよう

以下参照。

  • ブラック

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_9b6c8a6b-970d-44d7-b167-8d7ed11f0461.png

  • デフォルト

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_5b690855-75ea-41ad-a7bf-d6f47877ed4c.png

ブラックだと明らかに色が減っていることがわかります。僕も最初見たとき、なんかすげー微妙じゃね?と思いました。デフォルトにしたら、まぁ背景色はちょっとアレだが、配色は良いんじゃないって感じで。




お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


Close Menu