上でソースコードを見やすく表示するためのライブラリです。プラグインで実装されている方も多いようですが、一度入れてみたら重くてもっさりしていたので、私は数年前からずっとこちらを使用しています。導入すると↓こんな感じにソースコードを表示できます。セットになっていて、8種類のテンプレートの中から好きなデザインを選ぶことができます。ファイルを編集することで自分でデザインを変更することも可能。必要な機能だけを選んで使えるたくさんの言語とプラグインが用意されており、その中から自分の使いたい機能だけを選んでダウンロードできます。私が使用しているのは以下のものだけです。導入する方法Prism.jsにアクセスします。私が選んだものと同じで良い場合はこちらからアクセスすれば、言語(PHP)と各種プラグインを選んだ状態のダウンロードページに飛べます。テンプレートはデフォルトのままなので、好みのものを選択してください。デザインのサンプルをチェック右側の丸が連なっている部分をクリックすると、デザインのテンプレートが適用されたページが表示されます。好みのデザインをチェックしたら「Download」ボタンを押して選択・ダウンロードページに進んでください。テンプレートと言語を選ぶテンプレートと追加したい言語にチェックを入れます。プラグインを選びダウンロード追加したい機能を選んでチェックを入れてダウンロードします。ファイル、それぞれをダウンロードする必要がありますのでご注意ください。サーバーにアップロードする自分のサーバーの適当な場所にアップロードします。テーマの「library」フォルダーにアップロードすると不具合が出ることがあるそうなので、別の場所にアップロードしてください。私は「wp-content」直下に「library」というフォルダーを作ってそこに入れています。サイトに適用するテーマファイルの「header.php」や「footer.php」などに以下のように記述してください。テーマの機能で<head>内に追記できる場合はそこでも大丈夫です。使用する記事でだけ読み込むようにしています。サンプルを最下部に置いておきます。SANGO(とPORIPU)ユーザーの方は該当部分を同じように書き換えれば対応できると思います。マークアップする言語を指定します。場合は「language-markup」になりますのでご注意ください。<code>タグの後に改行を入れると1行目に空行が入ります。空行を入れたくない場合は、<code>の後に改行を入れず、続けてソースコードを記述してください。下記ではコードサンプルと同じようにハイライトする行を指定しています。使用言語の方は私はプラグインを入れていないので表示されていませんが、プラグインを入れている場合は、下記のように記述すればソースの右上に「Markup」と表示されると思います。/*使用言語の指定と使用言語の表示*/ここに表示したいソースコード</code></pre>基本的には「class」で使用する機能を指定して、「data-〇〇」で機能を使用します。「data-line」ではハイライトする行を指定していて、複数指定する場合は「,」で区切り、「-」で連続する複数行を指定できます。ソースコードのエスケープ処理そのままソースコードを記述するとブラウザにコードとして認識されてしまうので、エスケープ処理(実態参照に変換する処理)を行う必要があります。使用する場合プラグイン「AddQuictag」には特殊文字をエスケープするための拡張機能があるので、私は主にこれを使用しています。設定画面でここにチェックを入れて変更を保存します。テキストエディタではこんなボタンが出現します。Entities」というボタンを押すだけです。HTML」で、エスケープ処理された文字列をHTMLに戻すこともできます)各種ツールを使用する場合アプリやテキストエディタのエスケープ処理機能でも変換できますが、お手軽なのは上記の「AddQuicktag」の拡張機能か、下記のようなオンラインツールだと思います。ボタンを置いています。