機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

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

プログラミング

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

[Download ▲ Prism](https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript)

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

デモページ作りました。: [prismjs demo | yuipro](https://yuis-programming.com/prismjs-demo/)

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

[Download ▲ Prism](https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript)

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

“`


<?php

```

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

以下参照。

* ブラック

![https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_9b6c8a6b-970d-44d7-b167-8d7ed11f0461.png](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](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_5b690855-75ea-41ad-a7bf-d6f47877ed4c.png)

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

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

ごめんなさい!この記事には関連記事が1つも見つかりませんでした。

管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu