ソースコード表示のためのPrism導入

１、下記のサイトにアクセス

https://prismjs.com/index.html

２、右上の「ダウンロード」をクリック

３、「Compression level:」「Core」はそのまま

４、「Themes」はデザインを選択

５、「Languages」では標準で選択されている以外に表示予定のあるプログラミング言語を選択

６、下記はオススメ

  • Line Highlight ・・・指定した行をハイライトする。
  • Line Numbers ・・・コード左端に行番号を表示させる。
  • Copy to Clipboard Button ・・・マウスオーバーすると右上にcopyボタンを表示する。

７、JSとCSSをダウンロード

８、子テーマ直下の任意の場所にアップロード

９、header.phpのhead部分に下記を記載


<link rel=""stylesheet"" href=""<?php echo get_stylesheet_directory_uri(); ?>/css/prism.css"" media=""all"" />

10、footer.phpの</body>直前に下記を記載


<script src=""https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js""></script>
<script  src=""<?php echo get_template_directory_uri(); ?>/js/prism.js""></script>

11、使い方


<pre><code class=""lang-言語名"">
紹介するコード
</code></pre>

※言語名をPHP/HTML/CSSなどに変更する

12、ワードプレスで使用する場合は、＜を「&lt;」に、＞を「&gt;」にする必要あり