Edit with VSCode and Obsidian

はじめに

Build an “Edit Page” button in a Hugo template に、 Hugo で「Edit Page」ボタンを表示し、VS Code で Markdown ファイルを開く方法が紹介されていたので、試してみた。

Obsidian で編集することもできた。

Edit with VS Code

config.toml に下記を追加。

[security]
  [security.funcs]
    getenv = ['^HUGO_', 'PWD']

ページのどこかに、下記を追加。

{{ if eq hugo.Environment "development" }}
  {{ $projectPath := or (os.Getenv "HUGO_PROJECT_PATH" ) (os.Getenv "PWD") }}
  <a href="vscode://file/{{ $projectPath }}/content/{{ .File.Path }}">
    [edit page]
  </a>
{{ end }}

hugo server コマンドで仮想サーバーを起動してプレビューしているとき、Development 環境になっている。上記の方法を実装すると、プレビュー状態で閲覧中のページに「Edit Page」ボタンが現れて、これをクリックすると、現在表示しているページの Markdown ファイルが VS Code で開く。超便利。

Edit with Obsidian

少しだけコードを修正すると、VS Code ではなく、Obsidian で Markdown ファイルを開くこともできる。リンクの部分を下記のように変更すればオーケー。$vault_ID は、 ここ を参考にして、obsidian.jsonファイルから取得する。

<a href="obsidian://open?vault={{ $vault_ID }}&file={{ .File.Path }}">
  [edit page]
</a>

「Hugo + Obsidian」環境は、超快適。