ScrapBoxで暗記カード

ScrapBoxでチェックシート（暗記カード）を作っているという話を聞いた

https://gyazo.com/525fac0036ae6fc980d7655c82cdb5b2

めちゃくちゃ面白そうだし良いアイデアだと思ったので実装する

追記

この記事から機能を追加してカスタマイズコレクションに追加してくれた方が居たので紹介

PopupMenuや一括付け外しとかとても良い

暗記カード

https://gyazo.com/4903660e3d1aa834dcbc18fb10fb7147

[! TEXT] という形で括られると class .deco-! が付与され、文字色が #ff0000 になる

script.js で右側に暗記シートのボタンを追加し、2つのメニューで class hidden-spanをadd/remove することでスタイルを変更している

TypeScript には String Number Boolean などの型がある

以下のstyleを修正するだけで変更前と変更後のスタイルを変更できる

code:style.css

.deco-\! {

}

.hidden-span {

color: transparent;

border-bottom: 2px solid red;

}

code:script.js

scrapbox.PageMenu.addMenu({

title: '暗記シート',

});

scrapbox.PageMenu(暗記シート).addItem({

title: () => '赤文字を隠す',

onClick: () => $('spanclass="deco-\!"').addClass('hidden-span')

});

scrapbox.PageMenu(暗記シート).addItem({

title: () => '赤文字を表示する',

onClick: () => $('spanclass="deco-\! hidden-span"').removeClass('hidden-span')

})

Scrapboxすごい！チェックシート作るっていう発想もすごい！

参考