Syntax Highlighterをマイナーチェンジした。

WordPressのテーマを変更していちばん影響を受けたのが自家製のSyntax Highlighter尽くしだった「Syntax Highlighterを思いっきり変更してみた。」ページ。

<pre>タグで書いているほうはさほどでもなかったが、
<input>タイプのほうが無惨だったので、投稿ページをローカルに保存して睨めっこしたり、今のテーマと見比べたりと解決策を模索。

ついでに「Pre CodeブロックにCSS擬似要素で行番号をつける方法」でやりかけた行番号をつけるCSSもリベンジ作成。



不思議だったのが、いろんなページで黒い枠線が生きているのと、すっかり表示がおかしいものとが混在していることだったが、この原因は単純に「時代」

かなり古い記事はまだブロックエディタ登場前で、自分はクラシックエディタでも「テキストモード」を主に使っていたが、テキストモードにも<pre>タグを挿入するボタンはあって、これを押下で入るタグが<pre>・wp-block-preformatted・classつきだったらしい。

このclassスタイルを現行バージョン「Twenty Twenty One」のCSSでもフォローしているので<pre>タグだけで書かれたものは過去と同じ表示が保たれていた。

「Twenty Seventeen」の頃に<pre>タグで書いたものはこんな感じ。

「Twenty Twenty One」ではclass-nameが 「wp-block-code」 になっているが似たようなスタイル。ただし <pre class=”wp-block-code”><code> と続けて入力される。


いちばん簡単で近道な解消策は、自分が使ってきたclassのスタイルで .wp-block-code を上書きしてしまう方法だが、ブロックエディタ「Gutenberg」ならではの利用法を思いついた。

CSSセレクタでの解決。and/orのAであり・かつBであるならば法

.wp-block-code:classはそのまま残しつつ、.snippet:classと2つ名を持った時にはMyStyleになるように調整。

.wp-block-code {
	border-color: var(--global--color-border); //変数要素は#28303d
	border-radius: 0;
	border-style: solid;
	border-width: 0.1rem;
	padding: var(--global--spacing-unit); //変数要素は20px
}

.wp-block-code code {
	color: var(--global--color-primary); //変数要素は#28303d
	font-size: var(--global--font-size-xs); 1rem; //変数要素は16px
	white-space: pre;
	overflow-x: auto;
	display: block;
}

この指定は放置なので何も上書きしないまま

pre.wp-block-code.snippet {
	border-color: transparent;
	padding: 0;
}

<pre class="wp-block-code snippet"><code> と、
snippet:classが並んだときだけ、線色は透明・パディングはゼロリセット

ブロックエディタの「追加 CSS クラス」を使う

ブロックエディタの設定画面が表示されていると最下部に「高度な設定」があり、HTMLアンカーと追加クラスを指定できる。

半角スペースでいくつでも指定可能なら「Pre CodeブロックにCSS擬似要素で行番号をつける方法」で方法は思いついていたが、毎度毎度、短いコードにまで行番号が出るのはうざいよね・・と使えなかった手法も使える。


そして便利なアンカー補助機能の説明が今読むと素晴らしいわ。
id を付加することを、きちんと固有のアドレス=位置情報・番地であると明言してるのね。
勉強になりますっ


その名もナンプレ

だってまぁnumberもpreもあまりに頻出しそうで。
行番号というならline numberだったかと気づいても遅い

これ自分でもある意味「傑作」だと思う(笑)
擬似要素に content: counter; を使うでもなく、どこまでもアナログで

誰か長〜いコードを載せるまともなエンジニアさん使ってくれないかしらん。
この見てくれの中ではいちばん軽いと思うのよ
使ってくれるなら、アナログな配列をわたくしが100でも200でも千と千尋でも書くわよっ
(いや。まともなエンジニアなら自分でさっさとインクリメントしてくれるからw)

ところでご本家の方が、いつのまにか行番号を出さないタイプに変わってたな・・とこの作業しながら気づいたんですが、ページによりけりなんですね。あるページにはあった。
<var>ページ にはあって
counter-reset にはなかった

.numpre {
	code {
		position: relative;
		padding-left: 5rem;
		&::before {
			position: absolute;
			display: block;
			max-height: 100%;
			width: 3rem;
			text-align: right;
			padding-right: 1rem;
			border-right: 1px solid rgba($col-Fa,.4);
			content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A ";
			color: rgba($col-Fa,.4);
			left: .8rem;
			top: .5rem;
			bottom: 1rem;
			overflow: hidden;
			line-height: 1.6;
			font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;
			font-size: 1.2rem;
			z-index: 0;
		}
	}
}

たいした事はやってないけど、ここで素晴らしいのはRoot em の remでサイズ指定はフォントを使うものと相性良くて便利すぎる。
これをpx単位で見映え調整してたら工数のムダでやってられないと思う。
物事は相対的に!(ここ大事すぎて授業じゃ出ません


Gutenbergとhighlight.jsの相性良しめ

あとは「highlight.js」と「Gutenberg」の相性の良さ。

highlight.jsで言語のカラースキームを指定するには
<pre><code><span=”languageType”>
<pre><span=”languageType”> とspanタグで書く習慣でいましたが・・
<pre=”languageType”>でも反映されるんでした。

というわけで今回マイナーチェンジしたスタイル追加でアウトプットできる表示は3タイプ

WordPressテーマデフォルトは
<pre class="wp-block-code"><code>

clipboardへコピーする自家製スタイルへ戻すには
<pre class="wp-block-code snippet"><code>

行番号つきにする場合は.numpreスタイルを追加
<pre class="wp-block-code snippet numpre"><code>

highlight.js の言語別syntaxカラースキームを生かすには
<pre class="wp-block-code snippet languageType"><code>

ただし「html」だけは追加クラスとして崩れた。
・・・自家製ではエスケープ文字をそのまま使いたい場合に<span class=”html”>を指定名にしていたのが敗因。こういうclass名つけちゃダメだよなー。
しかも言語指定するhighlight.jsで使った自分が悪い。ごめんなさいオレ。後でなおすよ。

しかしHTMLをコピペしてみると、普通にカラースキームが充てられている状態。
PHPほかいくつか試して問題なく切り替わったし、その言語の構文とわかるコードならもともと自動で充てられる仕様らしかった。

<!DOCTYPE html>
<html lang="ja" itemscope itemtype="http://schema.org/WebPage" >
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="color-scheme" content="light dark">
	<title>Syntax Highlighterをマイナーチェンジした。 &#8211; Sakurai Rono PEN</title>
	<link rel='dns-prefetch' href='//s.w.org' />
	<link rel='dns-prefetch' href='//c0.wp.com' />

とりあえず上の「ナンプレ」の場合は「追加 CSS クラス」に「css」を足して色が変わったものの、あ。と気づいて「sass」と「scss」を試したら元の色だった。自動認識らしい。


さて、マイナーチェンジしてしまったので過去版は画像で

カラースキームをzenburnからoceanに変更し
highlight.js
clipboard.js
ともに最新バージョンへ差し替え。
クリップボードへコピーしたよ!のツールチップは青青とさせました。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/ocean.min.css"/>	

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>

Syntax Highlighterを思いっきり変更してみた。」にあるinputタイプのものは一応直してはみたものの、ブロックエディタにinput[text]をサクッと挿入する機能がない以上、カスタムHTMLで手書きするしかなく、効率悪くて使わないだろうなぁ

頻繁に使うならショートコードにしたほうが良いようなものだし。