●PageMenu：コードブロックのフォントを切り替える
概要
PageMenuによってCSSを変更したい
とりあえず私はコードブロックのフォントを適宜変更したいのでそれを実装する
参考
これはたまたま見た記事だけど同じことを書いてある記事は世の中にたくさんある
挙動
ボタンをクリックする度にCSSのオンオフが切り替わる
CSSを設定したclassを付けたり外したりしている
code:script.js
scrapbox.PageMenu.addMenu({
title: 'フォント変更',
onClick: () => {
const className = 'changefont'; // 適当なクラス名を用意する
let c = document.querySelectorAll('.line code'); // 変更したい部分を抽出する
for (let i = 0; i < c.length ;i++){ // そのそれぞれについて
// クラスが既に付与されていれば外す、付与されていなければ付与する
ci.classList.contains(className) ? ci.classList.remove(className) : ci.classList.add(className); };
},
})
code:style.css
.line code.changefont {
font-family: "UD デジタル 教科書体 NK-B", "MotoyaLMaru W3 mono", "Kosugi Maru", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
備考
コードブロックはdocument.querySelectorAll('.line code')で取得する
該当する部分が全部リストになっているので、その全てについて処理する
どのクラスを取得すればいいのかというのはデベロッパーツールを使って自力で探し出す
切り替えには条件演算子（三項演算子）を使っている
条件式 ? trueの時 : falseの時
