ScrapCalc
Scrapboxのページ上で、JavaScriptを用いた計算や処理を行うことをできるようにするUserScript %を使えるようにソースコードを書き換えた
CSS
2種類あるので、どちらか好きな方を使う
https://gyazo.com/1d603f4dfa77cb1c196fadbd41f52a52
code:style.css
.deco-\% {
padding: 0.1em 0.2em 0.1em 0.2em;
}
.scrapcalc_result {
font-style:italic;
font-weight:bold;
background-color:yellow;
}
https://gyazo.com/1ca60184a38e15c44e6a4e1e765cd9f3
code:inline-code-like.css
.deco-\%,
.scrapcalc_result {
padding: 0 .5em;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
font-size: 90%;
border-radius: 4px;
background-color: var(--code-bg, rgba(0, 0, 0, 0.04));
}
span.scrapcalc_result {
}
JavaScript
code:script.js
function scrapcalc_exec(){
for(let e of document.querySelectorAll('.deco-\\%')){
let text = e.innerText;
// 全角カギカッコを配列などで使えるようにする苦しい工夫
//if(text.match(/=/)){
if(false) { // 常時計算結果を表示するようにした
(0,eval)(expr); // 何故かこれでstrictが有効でなくなる?
}
else {
let span = document.createElement('span');
span.classList.add("scrapcalc_result");
span.innerText = (0,eval)(expr);
e.parentNode.appendChild(span)
e.classList.add("scrapcalc_exp")
e.style.display = 'none';
}
}
}
function scrapcalc_reset(){
for(let e of document.querySelectorAll('.scrapcalc_result')){
e.remove();
}
for(let e of document.querySelectorAll('.scrapcalc_exp')){
e.style.display = 'inline';
}
}
export function scrapcalc_toggle() {
if(document.querySelectorAll('.scrapcalc_result').length == 0){
scrapcalc_exec();
}
else {
scrapcalc_reset();
}
}
document.addEventListener('keydown', e => {
if (e.key == 'q' && e.ctrlKey){ // Ctrl-Qで実行
scrapcalc_toggle();
}
})