prism.js「ファイル更新」ができない問題解決！
どうしてもprism.jsでコード表示をしたくて再度挑戦してみました
「ファイルの更新」が出来ない問題に、今回も原点回帰で好転！実装にこぎつけた
「記事中にコードを埋め込む」集大成です
内容は過去記事と重複するけど、より詳しくメモっていきます
1.prism.jsとprism.cssをダウンロード
prismのダウンロードはこちら↓↓
ダウンロード前のカスタマイズ
「ダウンロード」をクリックするとこちらが開きます↓↓
たくさんある項目から必要なものを選択↓↓
———————————————–
1.圧縮レベルを選ぶ（基本どちらでも良い）
———————————————–
・Development version ←CSSをカスタマイズする人用
・Minified version ←初心者の私はこちらですね
———————————————–
2.テーマ（デザイン）を選択
———————————————–
背景色やコードのハイライトする文字色などです
選んだデザインは下の方に反映されるので確認出来ます（至れり尽くせりですね）
集大成なので一応画像も載せちゃいます(“＞ω＜)っ))
ダークにも惹かれたけどSolarized Lightを選びました
なので今日まで使っていたコード表示の背景色も変更しなくてはいけません
同系色のCoyを選べばこの作業は不要になったけどイメージがちょっと違う
Solarized Lightは背景色も柔らかくハイライトも優しい色使いです
———————————————–
3.言語を選ぶ
———————————————–
すごい数のIT言語があります（わたし的には誰が何に使うんだろ？？なレベルです）
「HTML」「CSS」「C-like」「JavaScript」あたりを選べばいいそうです
私は一応「Java」「Markup templating」「PHP」も選んでみました
———————————————–
4.プラグインを選ぶ
（WordPressのプラグインではなくPrism.jsの便利な機能を追加するという意味）
———————————————–
・Line Highlight：指定した行をハイライトする
・Line Numbers：ソースコード左側に行番号を表示
・Show Language：ソースコードの言語名を表示
・Copy to Clipboard Button：全文コピーボタンを設置←これですこれ！
・Unescaped Markup：エスケープをしないでマークアップ出来るようにする
・Tool bar：デフォルトでチェックが入ってます
———————————————–
5.cssファイルとjsファイルをそれぞれダウンロード
———————————————–
この種類のファイルは危険！！ダウンロードしちゃダメ！って出ちゃうけど迷わず保存
2.WordPressの任意の場所に「prism.js」「prism.css」をアップロード
どこにアップロードしたか、わからなくならないように任意の場所にフォルダを作る
それぞれ名前を js や css にすると良いとのことなので今回はthemes直下に置いてみた
3..サイトにPrism.jsを適用させる
「functions.php」のPHPファイルにjsファイルとCSSファイルを読み込むように指示を書き込む必要がありますが過去記事でサイトが真っ白になった失敗をして「header.php」から読み込むようにしてみました
「<header>～</header>」間に書き込む（コピペ）
「ファイルの更新」が出来なかったので、前回はここで終了でした
google先生、いろいろなサイトにお邪魔したけど皆さんプロの人たちみたいで専門用語など理解力不足のため解決には至らず
本家サイトを再訪問、トップページ下の方に詳しい使い方がちゃんと載ってました
wordpressの場合の説明がこちら↓↓
How to Add Prism.js Syntax Highlighting to Your WordPress Site
ここでプログラマーさんとかがコード表示にひと手間省けるツールだということに気づいた（笑）
素人だけどここまで来たんだからやり遂げよう__φ(￣^￣ )
上記サイトの下方に行くと「5. Use Prism in WordPress Gutenberg and Classic Editor」がある
その中のリンク「using the syntax highlighter」になります
全文英語だけど目を充血させながら頑張ってみました
You will need to include the prism.css and prism.js files you downloaded in your page. Example
<!DOCTYPE html><head><body>…..</head></body></html>
for wordpress siteの説明ではfunctions.phpに追記するようになってたけどfunctions.phpだとどこに追記すればいいのかがわからない
「head」間と「body」間ということは参考サイトさんにもあったように「header.php」で呼び出していいのでは？。。。と
「ファイルの更新」拒否問題、もう一度原点回帰！！
テーマエディタでheader.phpに直接追記するのではなくSFTPでダウンロードして追記してアップロード
前回真っ白になってしまったphpとは違うファイルだからもしかして出来るかも
念のためサーバーのWAF設定を解除してheader.phpをダウンロード
テキストエディタでcssやjsを呼びだすコード（以下）を追加してアップロード
テーマエディタで確認⇒反映されてました「Copy」「Copied」ついてます
「code」「pre」囲いに色をつけていたのでこうなった↑↑
今までのはこれ↓↓
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/prism.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/prism.js"></script>
CSSとHTMLでカスタマイズ表示していたのがこれ↓↓
<link rel="stylesheet" href="ディレクトリまでのパス/css/prism.css">
<script src="ディレクトリまでのパス/js/prism.js"></script>4.投稿欄で実際に使ってみる
HTMLやPHPの場合は埋め込むコードのエスケープ処理が必要です
背景色と枠線の色をSolarized Lightから拾って同色にしました↓↓出来ました！！Ｏ(≧∇≦)Ｏ イエイ！！
——————————————-
ハイライトのみで番号なしの場合
——————————————-
<pre><code class="language-xxx">
ここにソースコード
</code>
</pre>——————————————-
行番号を付ける場合がこちら
——————————————-
<pre class="line-numbers"><code class="language-xxx">
ここにソースコード
ここにソースコード
</code></pre>
pre要素にclass="line-numbers"を指定です
——————————————-
行番号と指定行をハイライトする場合はこちら
——————————————-
<pre class="line-numbers" data-line="1,3,5-6">
<code class="language-言語名">
ソースコード
ソースコード
ソースコード
</code>
</pre>
「data-line」が指定行のハイライト効果になります
上記の場合は1行目と3行目と5～6行目を指定してみました
prism.jsの設定と使い方はここまで
あとはADDQicktagに登録すればcomplete？
おつかれさんだべさ Ｕ＾ｴ＾Ｕ
細かな部分で調整したい箇所もありますが、あくまで私個人のための記録なので、ぼちぼち気長に学んで行きます
prism.js を実装したことで過去のコード表示にも影響が出たので調整
いろいろ干渉しあってるんですね
「クリックで一発コピー」でのコード表示も ↓↓ こうなった
最初のころに「code」や「pre」囲いに背景色を指定していたせいですね
なのでCSSの追記部分を削除、するとこうなりました ↓↓
もっと以前のは、デフォルトのグレーになってしまいましたがこれで良しとします
シンタックハイライトって必要？って思ってた自分を反省でした
とっても長い記事になってしまったけど満足です
今日からよく眠れそう(((o(^。^")o)))