Scrapboxで暗記シートを作る (CSSだけ使ったバージョン)
Scrapboxで暗記シートを作るは個人での使用を想定してUserScriptで作ったため、問題文を作成して他の人に配布するといった用途には利用できませんでした。
これを解決するため、穴あき部分の表示・非表示をUserCSSだけで行うバージョンを作りました。UserCSSは全ての閲覧者に適用されるため、閲覧者にScrapboxへのログインやスクリプトのコピペを要請する必要はありません。
ページトップに説明書きを表示したり、Scrapboxの Hide dots 機能を上書きしたりしているため、雑多な用途のプロジェクトには適していません。問題配布専用のプロジェクトを作成して導入することをお勧めします。
機能
[! ] で囲まれた文字列を非表示にする
行をクリックすると隠された文字が表示される
再び非表示にするためには行からフォーカスを外す必要があるため、行と行のあいだに空行を設けておく等の工夫が必要になると思います
ページメニューの
Show answers / Hide answers で表示、非表示を一括で切り替える
[! ] を付け外しするPopup Menu
選択されている文字列に
[! ] を付ける選択範囲に
[! ] が含まれる場合は一括で外すこの機能は自分だけに有効です
機能の紹介はここまで。
----------
閲覧者用のUserCSS
settings という名前のページに適用して下さい。下のコードブロックごとコピペする場合は、先頭の
code:style1.css を code:style.css に書き換えて下さい。style1.css/* ページトップの説明書き */
.page:before {
content: '行をクリックすると解答が表示されます。右上のページメニューの「Show answers」をクリックすると全ての解答が表示されます。';
display: block;
border-bottom: 1px solid #bbb;
margin-bottom: 2rem;
}
/* 表示色 */
.deco-\! {
color: #3cb371;
border-bottom: 2px solid #3cb371;
}
/* 非表示 */
.app:not(.hide-dots) .line:not(.cursor-line) .deco-\! {
color: transparent;
}
/* [! word] の記法部分を非表示にする */
.cursor-line .deco-\! :nth-child(-n+3),
.cursor-line .deco-\! :last-child {
display: none;
}
/* Hide dotsしてもドットを非表示にしない */
.line .indent-mark .dot {
display: block !important;
}
/* Hide dotsのラベル文字を書き換え */
ul[aria-labelledby="page-edit-menu"] a[title="Hide dots"],
ul[aria-labelledby="page-edit-menu"] a[title="Show dots"] {
font-size: 0;
}
ul[aria-labelledby="page-edit-menu"] a[title="Hide dots"]:before {
font-size: 14px;
content: 'Show answers';
}
ul[aria-labelledby="page-edit-menu"] a[title="Show dots"]:before {
font-size: 14px;
content: 'Hide answers';
}自分用のUserCSS
自分のページに適用して下さい。
下のコードブロックごとコピペする場合は、先頭の
code:style2.css を code:style.css に書き換えて下さい。style2.css/* [! word] の記法部分を非表示にしない */
.cursor-line .deco-\! :nth-child(-n+3),
.cursor-line .deco-\! :last-child {
display: inline;
} 自分と自分以外で行をクリックした時の解答部分の表示が異なります
自分
自分以外
自分用のUserScript
自分のページに適用して下さい。
script.js(() => {
const decoChar = '!';
// [! ]を付け外しするPopupMenu
scrapbox.PopupMenu.addButton({
title: text => {
const reg = new RegExp(`\\[${decoChar} (.+?)\\]`, 'g');
return reg.test(text) ? `remove [${decoChar}]` : `add [${decoChar}]`;
},
onClick: text => {
const reg = new RegExp(`\\[${decoChar} (.+?)\\]`, 'g');
if (reg.test(text)) {
return text.replace(reg, '$1');
} else {
if (!/\n/.test(text)) {
return `[${decoChar} ${text}]`;
}
}
}
});
})();