リンクとメディア

MarkNodeは、ドキュメント内のすべてのリンクと画像を対話的な参照として扱います。リンクにカーソルを合わせてリンク先を確認したり、修飾キーを押しながらクリックして開いたり、クリップボードから画像を直接貼り付けたり、ローカルファイルをファイルエクスプローラーで表示したりできます — すべてエディターから離れることなく行えます。

リンクのホバー

プレビューペインでリンクや画像にカーソルを合わせると、下端の細い帯にリンク先が表示されます。ローカル参照はプロジェクトルートからの相対パス(./docs/install.md)として表示されるため、すぐに見分けられます。外部リンクは完全なURLで表示されます。

リンクを開く

クリックの動作は、どこをクリックするか、どの修飾キーを押しているかによって変わります。

  • プレビューでの操作 — 通常のクリックでリンクが開きます。外部URL(httphttpsmailto)は既定のブラウザーで開きます。プロジェクト内の他のMarkdownファイルへのリンクはエディターで開きます。その他のローカルファイル(PDF、画像、スプレッドシート)はファイルエクスプローラーのサイドバーで表示されます — プロジェクト外にある場合はシステムのファイルマネージャーで表示されます。
  • エディターでの操作 — 通常のクリックでは、一般的なMarkdownテキストと同様にカーソルが配置されます。リンクをたどるには、修飾キー — macOSではCmd、WindowsとLinuxではCtrl — を押しながらクリックします。リンク先のルールは同じです。
  • ハッシュアンカー#anchorへのリンクは、現在のドキュメント内の該当する見出しにジャンプします。./guide.md#setupのようなファイル間のアンカーは、そのファイルを開いて見出しまでスクロールします。

リンク切れのローカルリンク(ファイルが存在しない)をクリックした場合、MarkNodeは何も起こさずに黙って終わるのではなく、短いエラー通知を表示します。

右クリックメニュー

リンクや画像を右クリックすると、リンクの種類に応じた項目を持つコンテキストメニューが開きます。

  • 外部URLの場合: URLをブラウザーで開くURLをコピー
  • ローカルファイルの場合: ファイルを開く(Markdownファイル)、ファイルエクスプローラーで表示(MarkNodeのサイドバーでファイルを選択)、Finderで表示 / エクスプローラーで表示 / ファイルアプリで表示(システムのファイルマネージャーを開いてファイルを選択した状態にする)、ファイルパスをコピーすべての参照を検索(Markdownファイルの場合、対象へリンクしているすべての箇所をプロジェクト内から検索 — 結果は下部パネルに表示されます)。
  • #anchorリンクの場合: 開くリンクをコピー

表示用の修飾キー

macOSではCmd+Alt、WindowsとLinuxではCtrl+Altを押しながらローカルリンクをクリックすると、リンク先を開く代わりにファイルエクスプローラーのサイドバーで表示します。そのファイルをどう扱うか決める前に、プロジェクト内のどこにあるかを確認したいときに便利です。

画像の貼り付け

画像をコピーして — 例えばスクリーンショットやブラウザーからの画像を — Cmd+V(Windows/Linux: Ctrl+V)でエディターに貼り付けると、MarkNodeは次の処理を行います。

  1. 画像をプロジェクトのメディアフォルダー(既定ではmedia/)に保存します。
  2. pasted-1715680222.pngのようなタイムスタンプ付きのファイル名を生成し、名前の衝突を防ぎます。
  3. カーソル位置に相対パスのMarkdown画像リンクを挿入します。

3ステップの流れ: クリップボード上の画像をCmd+Vで貼り付けると、MarkNodeがプロジェクトのメディアフォルダー内にタイムスタンプ付きファイルとして保存し、カーソル位置に相対パスのMarkdown画像リンクが挿入されます。

メディアフォルダーは、存在しない場合は最初の貼り付け時に作成されます。MarkNodeが使用するフォルダーは設定 > 一般 > 画像インポートで変更できます — 「プロジェクト内の既定フォルダー」を設定するか、ドキュメントと同じフォルダーに画像を保存するよう選択できます。

クリップボードにテキストと画像の両方が含まれている場合は、テキストが優先されます — 標準的な貼り付けの動作です。

画像のドラッグ&ドロップ

Finder(macOS)やエクスプローラー(Windows/Linux)から画像をエディターに直接ドラッグすることもできます。MarkNodeはそのファイルをプロジェクトのメディアフォルダーにコピーし、ドロップ位置に相対パスのMarkdownリンクを挿入します。

プロジェクトツリーから画像を開く

ファイルエクスプローラーで画像ファイルをダブルクリックすると、エディター領域に埋め込み画像ビューとして開きます — 執筆中のドキュメントから参照しているスクリーンショットを、アプリを離れずに確認したいときに便利です。

画像の記法

インライン画像には、先頭に!を付けた標準のMarkdown記法を使用します。

![Alt text](media/diagram.png)

幅を指定したい場合は、インラインHTMLを使うこともできます。

<img src="media/diagram.png" alt="Diagram" width="400">

どちらの形式もホバー、修飾キー+クリック、右クリックメニューに対応しています。