記事中にコードを埋め込む（２）

2019年11月3日

記事中にコードを埋め込む（１）に修正を加えながらチョットだけ前進です

このコード表示（クリックで全選択できる）を実装すると前回の」「code」と「pre」で背景を色分けしたのがあだになったのです
なぜなら、これは「pre」だけだと全選択が効かないから

懸念はしてたけど、良くないです！なので「code」も「pre」と同じ色に直しました

そもそも「pre」と「code」って一緒に使うものでしょ？？と思われる方が多いと思います

実際コード表示はほとんどのサイトでは両方で囲うようになってます
記事中にコードを埋め込む（１）では説明不足なので改めて調べてみました

刃猫さんの「wordpressのpreとcode」

(^_^)／こちらに完璧な説明が掲載されていました

WordPressでのpreタグ使用は少し注意が必要です。
旧エディターで書く場合、基本はタグの通りに動きます。デザインはテーマによって違いますが、基本はpreで囲むと背景が変わったり枠線がついたりすることが多いですね。
旧エディターでは普通にコードを書くだけですが、「Gutenberg（グーテンベルグ）」には「整形済みテキスト」というものが用意されていて、この動作には自動でのエスケープ処理が追加されています(WordPress 5.5で確認)
「整形済みテキスト」ブロック内に記述したものは「pre」で囲まれるのですが、特殊文字が自動でエスケープ処理されます。
preは基本的には整形するだけなので、pre内にhtmlコードを書くことは普通は可能なのですが、このブロック内に書くと、エスケープ処理がされてしまい、実際に動作させたいHTMLタグではなく、文字列として処理されてしまいます。（バージョン5.5の時点）
codeタグを使う場合は、整形済みテキストではなく「コード」ブロックを選ぶと自動でcodeタグが入ります。
いくつかのテーマで試しましたが、大体のテーマは旧エディターでpreタグを使えば自動のエスケープ処理はきかないので、旧エディタで使う場合は問題ないことが多いです。

自分でも何故preなのかわけがわからなくなってたので、ちょっと安心しました

さて、本題に戻って↓を参考に

ソースコードをCSSのみでおしゃれに表示する・言語ラベルや枠パターン | 綾糸.net

シンタックスハイライト機能のあるテーマやプラグインを利用すれば言語ごとにタグやクラスの色付けが可 ...

https://ayaito.net/webtips/css/17088/

実際に使ってみました

「汎用」「言語ごとにラベルを変える」「クリックで選択できるようにする」「枠のパターン」とあります
それらに修正を加えながら全部組み合わせて、私がしたいことを実装しました

<pre class="code css"><code>ここにコード</code></pre>
<pre class="code html"><code>ここにコード</code></pre>
<pre class="code js"><code>ここにコード</code></pre>
<pre class="code php"><code>ここにコード</code></pre>

エディタにボタンが増え過ぎちゃうのでADDQicktagには一つだけにしてあとの言語は人力で入力

/*ソースコード用*/
.code{ 
position:relative;
margin-left: 0px;
padding:30px 0 10px 20px; /*余白：上・右・下・左*/
border: solid 1px #5fb3f5; /*枠の色・幅*/
border-left: double 3px #5fb3f5; /*左ラインの色・幅*/
background:#f0f8ff; /*背景色*/
list-style:none;
color: #2F3437; /*文字色*/
font-size:1em; /*文字サイズ*/
overflow: auto;
}
.code.css:after{content: 'CSS クリックで全選択'; background: #4169e1;}
.code.html:after{content: 'HTML クリックで全選択'; background: #834f3d;}
.code.js:after{content: 'JS クリックで全選択'; background: #ca8004;}
.code.php:after{content: 'PHP クリックで全選択'; background: #5e7e2c;}
.code.css:after, .code.html:after, .code.js:after, .code.php:after{
position: absolute;
top: 0px;
left: 0px;
padding: 5px 10px;
line-height: 1;
font-size: 0.9em;
color: #fff;
}
/*コピー可に*/
pre code{
user-select:all !important;
-moz-user-select:all !important;
-webkit-user-select:all !important;
-khtml-user-select:all !important;
}