コードブロックの空白を可視化するUserScript

https://gyazo.com/a015fba4c9f3f323f7ab8e08f965e39d

code:script.js

(() => {

const defaultStyle = 'color: lightgray;';

const unUsedStyle = 'background-color: red;';

const darkStyle = 'background-color: #e0e0e0;';

scrapbox.on('lines:changed', showWhitespaceCharacter);

showWhitespaceCharacter();

function showWhitespaceCharacter() {

if (!window.scrapbox.Page.lines) return;

// コードブロック内のchar-indexを全部取ってきて、半角スペースか全角スペースかタブか比較する

const codeCharList =

document.querySelectorAll('.line span.code-block span.indent span.char-index');

for (const c of codeCharList) {

if(c.textContent === ' ') {

c.style = defaultStyle;

c.textContent = '•';

} else if (c.textContent === '　') {

c.style = unUsedStyle;

//c.textContent = '□';

} else if (c.textContent === '\t') {

c.style = darkStyle;

//c.textContent = '＾';

}

})();

内容

lines:changedイベントを監視して、コードブロック内に半角スペース、全角スペース、タブがあったらtextContentを無理やり書き換えている

code:例

半角スペース半角スペース終わり

全角スペース　　　全角スペース終わり

タブタブ終わり

更新履歴

これでちょうどやりたい事できたんじゃないか…？(2021/11/26)

コード量が大きいページだと重いかも？

全角スペースとタブを背景色変更にしてみた(2022/06/02)

当然ながらコードブロック中の半角スペースは「•」に置き換わっているのでブラウザの検索機能だと一致しない(2023/04/15)

すごい今更気づいた