Obsidianのソースを抜き出すアクション

モバイル版ではインスペクターが使えないので。

class

前回svgの抜き出しをしました。 こうしたときソース内のclassを調べます。 CSSでカスタマイズするときもそうですね。 classがわかればそれを対象に書き換えるだけ。

でもモバイル版だとそこがブラックボックスになっていて、ネット上で調べるしかありませんでした。 今までは。 そこを突破しようという試みです。

source.md

Templaterスクリプトです。

<%*
s = document.querySelector(".cm-focused").innerHTML
s = s.replace(/<\/div>/g, "</div>\n")
s = "~~~~html\n" + s + "\n~~~~\n"
f = "Source.md"
p = app.vault.getAbstractFileByPath(f)
if(p){
  await app.vault.modify(p, s)
}else{
  p = await app.vault.create(f, s)
}
app.workspace.activeLeaf.openFile(p)
%>

ルートに Source.md というファイルを作り、開いているタブのHTMLを表示します。

使用例

そうそう、これこれ。 どの部分がどのclassなのか、ベタだけど把握できる。 CSS Editor に応用すればほとんどのカスタマイズができます。

今回は「開いているタブ」を対象にしましたが、.cm-focused を body にすればもっと広い範囲を抜き出すことができます。 メニューとかもHTMLタグで書かれているし、弄りまわすとキリがないかも。

まとめ

Obsidianは「ブラウザ」なのだと実感します。 Templaterアクションも「ブックマークレット」と思えば扱いやすい。