Scrapboxのコードブロック記法で空白文字可視化
script.js(function(){
Array.prototype.slice.call(document.getElementsByClassName('code-body')).map((line) => {
Array.prototype.slice.call(line.getElementsByTagName('span')).map((char) => {
// タブのテスト:
if (char.innerText === "\t") {
char.className = char.className + " code-tab";
}
// 半角スペースのテスト:
if (char.innerText === " ") {
char.className = char.className + " code-whitespace";
}
// 全角スペースのテスト:
if (char.innerText === "\u3000") {
char.className = char.className + " code-double-byte-whitespace";
}
// タブと半角スペースと全角スペースのテスト:
});
});
})();
style.cssspan.code-tab {
background-color:rgba(169,169,169,0.4);
opacity: 0.5;
}
span.code-tab:after {
display: inline-block;
position: relative;
left: -0.7em;
content: "→";
width: 0px;
}
span.code-whitespace {
background-color:rgba(169,169,169,0.4);
opacity: 0.5;
}
span.code-whitespace:after {
display: inline-block;
position: relative;
left: -0.6em;
content: "・";
width: 0px;
}
span.code-double-byte-whitespace {
background-color:rgba(169,169,169,0.4);
opacity: 0.5;
}
span.code-double-byte-whitespace:after {
display: inline-block;
position: relative;
left: -1em;
content: "＿";
width: 0px;
}