WindowsのLogseqでローカルネットワーク上(wsl含む)にある画像を表示する

かなりニッチだけど誰かは救われるかもしれないのでメモ
ほかの方法あったら教えてください (サーバー立てる以外で)

markdownで表示しようとしてみる

Logseqではmarkdownを描けるので![](sample.jpg)として画像を表示できる。

この場合、書き込んでいるファイルからの相対パスが使用される。

file:///C:/Users/USER_NAME/AppData/Local/Logseq/app-0.10.6/resources/app/journals/sample.jpg

そしてwslのファイルパスは以下のようなもの。

file://wsl.localhost/Ubuntu/home/USER_NAME/sample.png

なので以下のようにすればいいように思える。

![](file://wsl.localhost/Ubuntu/home/USER_NAME/sample.png)

だがこうした場合、Logseqが相対パスと見なしてしまうので画像は表示されない。

![](file:///C:/Users/USER_NAME/AppData/Local/Logseq/app-0.10.6/resources/app/journals/wsl.localhost/Ubuntu/home/USER_NAME/sample.png)

imgタグを使う

勝手に相対パスと見なされるので仕方がない
markdownにはhtmlタグを直接かけるので、srcに直接アドレスを書けば表示される。

<img src="file://wsl.localhost/Ubuntu/home/USER_NAME/sample.png" />

・・・けどそんなの書いてられないよね

マクロを設定する

マクロは{{macro_name arg_1 arg_2}}のように書いた箇所を、指定した文字列で置換する機能。

設定ファイル(config.edn)を開き:macrosを設定する
コメントを頼りにimgタグのマクロを追加してみる

 ;; Macros replace texts and will make you more productive.
 ;; Example usage:
 ;; Change the :macros value below to:
 ;; {"poem" "Rose is $1, violet's $2. Life's ordered: Org assists you."}
 ;; input "{{poem red,blue}}"
 ;; becomes
 ;; Rose is red, violet's blue. Life's ordered: Org assists you.
 :macros {
            {"img" '<img src="$1" />'}
          }

これでどこでもmacroが利用可能となる以下のように記載すれば画像が表示される

{{img file://wsl.localhost/Ubuntu/home/USER_NAME/sample.png}}

ドキュメント: https://docs.logseq.com/#/page/macros

備考

• この場合、画像の拡大縮小ができない
  • markdownで表示する画像は画像の右下のハンドルで拡大縮小できる
• マクロで文字列が置換されるのはLogseqで見ているときだけ
  • markdownではないのでvscodeなどで開くともちろん画像は表示されない

おまけ: hiccupを使う

LogseqはClojureScriptで書かれており、Clojureのhtmlテンプレートエンジンであるhiccupを使える。
これを利用するとimgタグは以下のようになる。

[:img {:src file://wsl.localhost/Ubuntu/home/USER_NAME/sample.png}]

なのでマクロもこう書ける。

 :macros {
            {"img" '[:img {:src $1}]'}
          }

マクロで書くならどっちでもいいが手書きするならhiccupのほうが少し短い。それだけ。

ドキュメント: https://docs.logseq.com/#/page/hiccup