Skip to content

Format breadcrumbs with inline markup and clickable links#35

Merged
twaugh merged 2 commits intomainfrom
breadcrumb-formatting
Mar 19, 2026
Merged

Format breadcrumbs with inline markup and clickable links#35
twaugh merged 2 commits intomainfrom
breadcrumb-formatting

Conversation

@twaugh
Copy link
Copy Markdown
Owner

@twaugh twaugh commented Mar 19, 2026

Summary

  • Render breadcrumb segments with rich formatting: code, bold, italic, strikethrough, ^^highlight^^
  • Make [[page links]], #tags, #[[tags]] clickable (navigate to page, shift-click opens sidebar) with faded markup characters
  • Render [text](url), bare https:// URLs (underlined), and [text](((...))) block references (dashed underline) as clickable links
  • Wrapping formats recursively format inner content so nested links remain clickable
  • Remove 50-char JS truncation of breadcrumbs, relying on existing CSS text-overflow: ellipsis instead (prevents broken URLs)

Test plan

  • Search for blocks whose parent blocks contain [[page links]] — verify faded brackets, hover background, click navigates, shift-click opens sidebar
  • Verify #tag and #[[tag]] breadcrumbs are clickable with faded #
  • Verify markdown links and bare URLs open in new tab, with underline styling
  • Verify block reference links show dashed underline and navigate to the block
  • Verify **bold**, *italic*, ~~strikethrough~~, ^^highlight^^ render correctly
  • Verify code renders in monospace without background
  • Verify nested markup like **see [[this page]]** renders bold with clickable link
  • Verify long breadcrumbs are visually truncated by CSS ellipsis
  • Verify clicking a breadcrumb link does NOT also navigate to the search result block

🤖 Generated with Claude Code

twaugh and others added 2 commits March 19, 2026 08:48
Render breadcrumb segments with basic formatting instead of plain text:
- `code` rendered in monospace
- **bold**, *italic*, ~~strikethrough~~, ^^highlight^^
- [[page links]] with faded brackets, click to navigate, shift-click for sidebar
- #tags and #[[tags]] as clickable page links with faded #
- [markdown links](url) and bare https:// URLs, underlined
- [block ref links](((...))) with dashed underline

Wrapping formats (bold, italic, etc.) recursively format inner content,
so links inside bold text remain clickable.

Remove JS-level 50-char breadcrumb truncation in favour of existing
CSS text-overflow: ellipsis, preventing truncated URLs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use --ls-tertiary-background-color for visible contrast on hover
for page links, block references, and URLs in breadcrumbs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@twaugh twaugh merged commit 9453bc9 into main Mar 19, 2026
1 check passed
@twaugh twaugh deleted the breadcrumb-formatting branch March 19, 2026 08:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant