リンクとメディア

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

リンクのホバー

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

リンクを開く

クリックの動作は、クリックする場所と押している修飾キーによって変わります。

  • プレビュー内 — 通常のクリックでリンクが開きます。外部 URL (http、https、mailto) は既定のブラウザーで開きます。プロジェクト内の他の 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 が画像を保存する場所は 設定 > 一般 > アセットの保存場所 で変更でき、次の 3 つの選択肢があります。

  • プロジェクト内の既定フォルダー — プロジェクトルートにある共有フォルダー 1 つ (既定では media) を、編集中のドキュメントの場所にかかわらず使用します。
  • ドキュメントと同じ階層のサブフォルダー — 同じ名前のフォルダーですが、プロジェクトルートではなく各ドキュメントの隣に作成されます。ドキュメントのフォルダーを別の場所にコピーしても、そのフォルダーだけで完結した状態を保てます。
  • ドキュメントと同じフォルダー (サブフォルダーなし) — 画像がドキュメントのすぐ隣に直接保存され、画像用の独立したフォルダーは一切作られません。

フォルダー名 (既定では media) は、最初の 2 つの選択肢のいずれでも自由に変更できます。

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

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

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

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

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

画像の構文

インライン画像は、先頭に ! を付けた標準の Markdown 構文を使います。

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

幅を指定したい場合は、インライン HTML も使えます。

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

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