Source Links
The <Source> component renders styled links that point directly to source code on your repository host. It supports GitHub, GitLab, and Bitbucket with optional line range anchors.
Basic Usage#
Link to a single file:
<Source>
Sources
clidey/dory · src/mdx/code.tsx
Open on GitHubLoading excerpt…
Multiple Files#
Link to multiple files at once:
<Source>
Sources
clidey/dory · src/mdx/accordion.tsx
Open on GitHubLoading excerpt…
With Line Range#
Link to a specific range of lines:
<Source>
Sources
clidey/dory · src/mdx/code.tsx1-50
Open on GitHubLoading excerpt…
Platform Support#
| Platform | URL Format | Line Anchor Format |
|---|---|---|
| GitHub | github.com/owner/repo | #L{start}-L{end} |
| GitLab | gitlab.com/owner/repo | #L{range} |
| Bitbucket | bitbucket.org/owner/repo | #lines-{start}:{end} |
Dory automatically detects the platform from the URL and formats the link accordingly.
Use Case: Inline Source References#
Source links are ideal for documentation that references implementation details:
<Source>
The MDX preprocessing pipeline is defined here:
Sources
clidey/dory · src/mdx/processor.ts
Open on GitHubLoading excerpt…
This file is the single source of truth for MDX compilation settings.
Props Reference#
| Prop | Type | Default | Description |
|---|---|---|---|
url | string | — | Base URL of the repository (e.g. https://github.com/owner/repo). |
branch | string | "main" | Branch name. |
paths | Array<{ path: string, range?: string }> | — | Files to link. range format: "start-end" (e.g. "10-50"). |
Was this page helpful?