久々にDynalistのカスタマイズの話。
MarkdownやScrapboxを常用していると、Dynalistでも似たような形で書式が反映されればいいのに、と思うことがある。例えば引用やコードブロック。
Dynalistでは各ノードに色を設定でき、そうするとノードのHTML要素にclassが適用されるので、CSSをいじれば「紫色設定は引用書式ということにする」みたいなことも可能である。最初はそうやっていた。
しかしこのやり方だとその情報はDynalist上でしか有効でないし、未来永劫同じルールで運用しなければならなくなる。色の設定も微妙に手間だ。だんだん苦しくなってきたので、別のやり方を考えることにした。
コピペで他のツールと行き来できた方が良いので、例えば引用は「> 」を頭に付けることで引用判定されるといい。つまり、本文が「> 」で始まるノードに引用スタイルを適用したclassを付けたい。
これはDynalistの機能ではできない操作なので、自分でスクリプトを書いて実行する。具体的にはChrome拡張機能を作る。あるいはブックマークレットにしてロード時に手動で実行する。
Chrome拡張機能開発については以前Chrome拡張機能を自分で作って活用する（Dynalist）でちょっと書いた。
class付与のタイミングをイベントで判定するのは面倒な気がしたので、setIntervalを使っている（試していないがblur時とかでもいいかも）。実際に使っているコードの一部がこちら。
// styleを記述しやすいようにclassを整理しておく
const IS_COMMENT = 'is-comment';
const IS_QUOTE = 'is-quote';
const IS_CODE = 'is-code';
const IS_BODY = 'is-body';
// スタイルを記述する（ここでは引用のみ例示）
const style = document.body.appendChild(document.createElement('style'));
style.textContent = `
.${IS_QUOTE} > .Node-self .Node-renderedContent {
background-color: #f0f0f0;
padding: 2px 4px;
font-size: 12px;
border: 1px solid #888;
}
`;
// 条件を整理しておく（今回は本文が何で始まるかで判定するものとする）
const condition = [
{ start: '🖋', className: IS_BODY },
{ start: '//', className: IS_COMMENT },
{ start: '> ', className: IS_QUOTE },
{ start: 'Code:', className: IS_CODE }
]
// 毎秒各条件をチェックしてclassを付け外し
setInterval(() => {
const lines = document.querySelectorAll('.node-line.Node-renderedContent');
lines.forEach(elm => {
condition.forEach(({ start, className }) => {
if (elm.textContent.startsWith(start)) {
elm.closest('.Node').classList.add(className);
} else {
elm.closest('.Node').classList.remove(className);
}
})
})
}, 1000);
ここでは「何で始まるか」だけで判定しているが、何を含むかや何で終わるかで判定しても良い。こうすると本文次第でスタイルを変更できるので、Dynalist固有のメタデータに依存することもなく、また条件の数も無制限に設定できる。（とはいえあんまり複雑にすると後で嫌になってくる可能性がある。意味が自明なルールに限った方が健康的だろう。）
現在実際に設定しているのはコード例に書いた四種だけで、それぞれ以下のような意味と見た目になっている。
（書き忘れたけどコードブロック風スタイルはフォントもコード用に変更している。）
Webブラウザの仕組みに頼ったものなのでスマホアプリでは反映されないのが難点だが、今現在はほとんどPCで編集しているのでPCだけでも効果は高い。
ちなみにこのようにしてからもう半年近く経っているけれど、今のところ飽きはないし便利に思っている。
