logo
/
ObsidianでCard Linkを表示したい

動機

外部公開を見据えたノートなどの場合、文字だけの情報では味気ない。
レイアウトにメリハリが無いので流し見をしてしまう。

調査

HTMLタグを記述する方法

htmlタグを使えば今からでも実現可能 data-href属性に内部リンクを渡せば内部リンクをHTMLで記述できる
ObsidianでWikiリンク記法を使わずにInternal Linkを作成
<a data-href="Obsidian" class="internal-link">ObsidianへのInternal Link</a>
以下のようにリッチな表現も可能
<a class="link-card internal-link" data-href="Obsidian">
	<div class="link-card-content">
		<div  class="link-card-title">
			📘Title
		</div>
		<div class="link-card-description">
			Content
		</div>
	</div>
	<img
		src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2021-11-02.jpg"
		class="link-card-image"
	/>
	<a class="internal-link" data-href="kasahala"/>
</div>
※画像は内部リンク記法では記述できなそう?
※aタグはabsoluteにして全体に広げる

利点

HTMLになっているのでどのツールで表示しても基本レンダリング可能※絶対パスの場合

欠点

メンテナンスがしにくい
大げさすぎる
リンク切れが発生する
リンクとしては解釈されないのでバックリンクなどに表示されない

HTMLタグの記述を自動化する

Markdown構文やパーサをカスタマイズできないか

以下のようなmarkdown-likeな文法で実現させたい
  • 外部リンク:http://~~単体
  • 内部リンク:!?[[LINK]]単体

調査結果

obsidian custom syntaxobsidian own flavourで調べたが有用な情報は得られなかった。

Markdown post processing

Markdown -> HTMLに変換したに処理を追加できる。
別の場面では有用そうだが、今回の要望には合致しない

Codeblock

obsidian-auto-card-link や自分でプラグインを書けばcodeblock内の構文を独自のレンダリングできる機能がObsidianにはある。 以下のような感じで書くのはありだとは思う。
https://~~~
[[Link]]

メリット

実現が確実に可能
文法が簡単
メンテナンスがし易い

デメリット

codeblock内の内部リンクはObsidianの自動更新の対象ではないのでリンク切れが発生する
外部リンク切れは自分では対処できないので問題ない

コンポーネント機能はないか

以下の様に純粋なリンク構文の周りを囲めば展開できるようにできないか
<Link>
[[Link]]
</Link>
できない

結論

どうしても欲しい場合はHTMLタグで実現させる。