#WordPress にコードを記載した際に、コードブロックを使うと横スクロールが現れることがある。これを右端で折り返して表示するべきか否か、悩んでしまった。
次のコードのブックマークレットをブラウザに設置すれば、このサイトに関しては、そのブックマークレットで折り返しを切り替えることができる。
javascript:(function() {
const targetSelector = '.wp-block-code code';
const elements = document.querySelectorAll(targetSelector);
if (elements.length === 0) {
alert('対象の要素が見つかりませんでした: ' + targetSelector);
return;
}
elements.forEach(function(element) {
const currentWhiteSpace = getComputedStyle(element).whiteSpace;
if (currentWhiteSpace === 'pre') {
element.style.whiteSpace = 'pre-wrap';
} else {
element.style.whiteSpace = 'pre';
}
});
})();このブックマークレットのようなコードのボタンをコードブロックの下にでも設置すれば親切だろうとは思って次のようなコードを functions.php に追加して[]というショートコードをコードブロックの下に置く方法を試したのだけど、マストドンでの見た目が良くない。
// codeブロックの折り返しを切り替えるショートコード作成
function whitespace_pre_wrap() {
$onclick_wrap = 'const targetSelector=\'.wp-block-code code\';const elements=document.querySelectorAll(targetSelector);elements.forEach(function(element){const currentWhiteSpace=getComputedStyle(element).whiteSpace;if(currentWhiteSpace===\'pre\'){element.style.whiteSpace=\'pre-wrap\';}else{element.style.whiteSpace=\'pre\';}});';
return '<div style="margin-top:-1.8em; margin-bottom:1.8em;"><button onclick="'.$onclick_wrap.'">折り返し切替</button></div>';
}
add_shortcode('whitespace_pre_wrap', 'whitespace_pre_wrap');[折り返し切替]（これはショートコードを利用せず、ブックマークレットのコードをリンクにしたもの）
#Gemini に相談したら複雑なコードで外部Javascriptファイルの用意を求められたりして、気に入った回答が得られなかった。とりあえず、ショートコードを利用するのはやめる。
コメント
#Gemini でも使える一般的なコード折り返し切り替えのためのブックマークレットのコード。
setPropertyが重要で、例えば、次のようなコードでは機能しない。
#Gemini に教えてもらった最初のコードがこちらで、機能しないことを指摘したら、どんどん複雑になって行って、最後に「Geminiでも使えるように」と指定したら、上のシンプルなコードに戻った。ただし、最初に教えてもらった時と違って、setPropertyが使われていた。
似てるけれど機能したコード。
コメント付きでコピーしてブックマークレットにしてはいけないということらしい。
いつもはテキストエディタにコピーしてコメントを削除して、改行も余分なスペースもインデントも削除してからブックマークレットに登録しているのだけど、横着して #Gemini のコードをそのままコピーしてブックマークレットに登録していたから、それで機能しなかったらしい。以前は、それで機能したこともあった気がするのだが…。
「element.style.whiteSpace = 'pre-wrap';」ではダメで「element.style.setProperty('white-space', 'pre-wrap');」なら機能する理由を探していて答えが見つからなくて疲れた。結局、どちらでも良いのだった。時間を無駄にした。
次のコードなら機能する。コメントの書き方の違い。
検索して見つけたヒント。『「/* */」は削除しない』は削除しなくても大丈夫ということだろう。『行の途中にあるコメントは削除しないから、セミコロンがないとその後に続くコードが実行されなくなる。』は、このマクロの仕様であり「バグ」の指摘だろう。このことから//をコメントの最初に付けるだけのコメントは、その後のコードが全てコメント扱いになって機能しなくなるのだと判断した。試しにコメントの最後にセミコロンを;を付けてみたが、それでも機能しなかった。 #Gemini に尋ねたら、「//のコメントも削除する必要はない。Javascriptはコメントを許容してる！」という主旨の理由でコメント削除の必要性を否定した。
"マクロの内容
・空白を削除。行の前後の空白（半角）を削除しているだけ。
・タブを削除。空白と同じように行の前後のタブを削除。
・コメントの「//」を削除。行の前にある場合だけ、コメントのある行を削除。行の途中にあるコメントは削除しないから、セミコロンがないとその後に続くコードが実行されなくなる。「/* */」は削除しない。
・すべての改行（\n,\r）を削除。何の考慮もせず削除するから、セミコロンを付けてないと、エラーが出るかと。
・スクリプトの先頭に「javascript:」がある時は、何もしない。スクリプトの先頭に「(function(){」があり、最後に「})();」がある時は、「javascript:」だけを付ける。その他の場合は、スクリプトの前に「javascript:(function(){」を、後ろに「})();」を付け足す。
"
Karafuto Blog - サクラエディタのマクロ - ブックマークレットを簡易的に作成する
http://karafuto50.blog117.fc2.com/blog-entry-194.html
次のコードなら、コメントごとコピーして利用できる。