ソースコードを一発でコピー[ prism.js]失敗！

2020年9月6日

プラグインを使わずに記事中のコードをコピーできるシンタックハイライタ
見た目もいいし、これだ！！と思ったのですが
またもやPHPファイルの編集で「ファイルを更新」が出来ない壁にぶち当たりました

私が理想とする「コード埋め込み」のパターン！！いつかは・・・その時のために備忘録として残しておきます

参考にさせていただいたのはちゃんブロ工房さんの
【Prism.js】wordpressのソースコードを一発でコピーするシンタックスハイライターの導入方法

1.prism.jsとprism.cssをダウンロード

prismのダウンロードはこちら↓↓

ダウンロード前のカスタマイズ
「ダウンロード」をクリックするとこちらが開きます↓↓

たくさんある項目から必要なものを選択↓↓

————————————————–
1.圧縮レベルを選ぶ（基本どちらでも良い）
————————————————–
・Development version ←CSSをカスタマイズする人用
・Minified version ←初心者の私はこちらですね

————————————————–
2.テーマ（デザイン）を選択
————————————————–
背景色やコードのハイライトする文字色などです
私は薄いブルーの背景色で黒、緑、青、のハイライトです

————————————————–
3.言語を選ぶ
————————————————–
すごい数のIT言語があります（誰が何に使うんだろ？？なレベルです）
「HTML」「CSS」「C-like」「JavaScript」あたりを選べばいいそうです
私は一応「PHP」も選んでみました

————————————————–
4.プラグインを選ぶ
（WordPressのプラグインではなくPrism.jsの便利な機能を追加するという意味）
————————————————–

・Line Highlight：指定した行をハイライトする
・Line Numbers：ソースコード左側に行番号を表示
・Show Language：ソースコードの言語名を表示
・Copy to Clipboard Button：全文コピーボタンを設置←これですこれ！
・Unescaped Markup：エスケープをしないでマークアップ出来るようにする

————————————————–
5.CSSファイルとjsファイルをダウンロード
————————————————–

————————————————–
6.WordPressの任意の場所に「prism.js」「prism.css」をアップロード
————————————————–
どこにアップロードしたか、わからなくならないように任意の場所にフォルダを作る
それぞれ名前を js や css にする良いとのことなのでwordpress直下に置いてみた

————————————————–
7.サイトにPrism.jsを適用させる
————————————————–
「header.php（ヘッダー）」「footer.php（フッター）」のPHPファイルにjsファイルと
CSSファイルを読み込むように指示を書き込む必要があります

<link rel="stylesheet" href="子テーマまでのパス/css/prism.css">
<script src="子テーマまでのパス/js/prism.js"></script>

子テーマは作ってないのでjsとcssまでのパスになるかと思います

・・・・と、現状はここまでです
ここから先はphpファイルの編集、保存が拒否されるので進めませんがいつかチャレンジします

ハイライトさせるだけの記述方法

<pre>
<code class="language-言語名">
ソースコード
</code>
</pre>

行番号の表示と指定行をハイライトする記述方法

<pre class="line-numbers" data-line="2,3-5">
<code class="language-言語名">
ソースコード
</code>
</pre>

—追記—- 6,Feb,2021
PHPファイルの更新解決しました⇒Prism.jsも無事実装出来ました ＼＼( ⌒▽⌒ )／／