はじめに

私は普段、次のUserCSSでインデントの入った行のリストマーカー、つまり黒丸を「Hide dot」を押さなくても消えている状態にしています。

setting.css

.line .dot {
	display: none !important;
}

しかし、場合によってはマーカーを表示させたいときもあります。たしかにUserCSSと任意の記号がついたリンクを使って、マーカーを表示することもできます。

例えば、[-]というリンクが行頭にあるときだけ、マーカーを表示したいなら次のコードで実現できます。これでは（ついでに）行頭文字を示す[-]を非表示にしました。

setting.css

.indent-mark:has(~.indent>*:first-child a[href$='/-']) {
	display: block !important;
}
.line:not(.cursor-line) .indent>*:first-child a[href$='/-'] {
	display: none;
}

けれど、実際に使ってみるといちいちリンクを入力するのが面倒です……。

そこで、Markdown形式の表記でリストを示す記号と空欄が行頭にあるときだけ、マーカーを表示してくれるコードを作りました。

使い方

使い方は、マークダウン風に「リストを示す記号("-", "+", "*" のいずれか) + 半角空欄」を普通の文として行頭に入れるだけです。すると、その行のリストマーカーを表示します。

普通の文(マーカーが表示されない)
  	- マーカーが表示される
  	  	+ インデントがたくさん入っていてもOK
* この行にはマーカーが表示されない

ただし、行頭にインデントが入っていない場合はリストではない扱いとしています。

ソースコード

script.js

 scrapbox.Project.script = {}// グローバル汚染回避用
 
 /* --- Show list markers like Markdown --- */
 scrapbox.Project.script.displayMarkers = function() {
  	const indexes = scrapbox.Page.lines.flatMap((line, index) => {
  		return /^\s+[-+*] +/.test(line.text) ? index : [];
  	}, []);
  	if(indexes.length === 0) return;
    
  	const lines = document.querySelectorAll(".lines .line");
  	lines.forEach((line, index) => {
  		const dot = line.querySelector(".dot");
  		if(!dot) return;
  		let value = (indexes.includes(index) && !line.classList.contains("number-list")) ? "block" : "none";
  		dot.style.setProperty("display", value, "important");
  	});
 }
 
 scrapbox.on("lines:changed", () => {
 	scrapbox.Project.script.displayMarkers();
 });

参考資料