Scrapboxのコードブロック記法で空白文字可視化

code: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";

}

// タブと半角スペースと全角スペースのテスト: 　

});

});

})();

code:style.css

span.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;

}