Skip to content

feat: render markdown in detail view descriptions#50

Open
kevglynn wants to merge 1 commit into
raychaser:mainfrom
kevglynn:feat/markdown-description
Open

feat: render markdown in detail view descriptions#50
kevglynn wants to merge 1 commit into
raychaser:mainfrom
kevglynn:feat/markdown-description

Conversation

@kevglynn

Copy link
Copy Markdown

Summary

Renders issue descriptions as formatted markdown instead of plain text in the detail webview panel.

Before: Raw markdown syntax displayed as-is (code fences, bullet markers, headers with #, etc.)
After: Descriptions render with proper formatting — headings, code blocks, inline code, lists, tables, blockquotes, and links.

Implementation

File Change
package.json Added marked v17 as a runtime dependency
src/extension.ts Lazy-initialized Marked instance with GFM + breaks; renderMarkdown() helper replaces escapeHtml() for descriptions; .markdown-body CSS using VS Code theme variables

Key design choices

  • Server-side rendering: Markdown is converted to HTML in the extension host (Node.js), not in the webview. Works within the existing CSP.
  • Lazy initialization: Avoids ESM/CJS issues at module load time. esbuild handles the conversion at bundle time.
  • Graceful fallback: If marked fails to load or parse, falls back to escaped plain text — no breakage.
  • Theme-aware CSS: All markdown styles use VS Code CSS variables (--vscode-textCodeBlock-background, --vscode-textLink-foreground, --vscode-panel-border, etc.) for native look in any theme.

Test Plan

  • TypeScript compiles clean (tsc --noEmit)
  • Biome lint passes (via pre-commit check)
  • Descriptions with code blocks render with syntax formatting
  • Descriptions with lists render as bullet/numbered lists
  • Descriptions with links render as clickable links
  • Plain text descriptions still render correctly
  • Works in both dark and light themes

Closes #49

Made with Cursor

Beads descriptions frequently contain markdown (code blocks, links,
bullet lists, tables) but were rendered as plain text. Now uses the
'marked' library to convert markdown to formatted HTML.

- Adds 'marked' as a runtime dependency (bundled by esbuild)
- Lazy-initializes the Marked instance to avoid ESM/CJS issues
- Falls back to escaped plain text if marked fails to load
- Adds .markdown-body CSS with VS Code theme-aware styles for
  headings, code blocks, lists, tables, blockquotes, and links

Made-with: Cursor
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.

feat: render markdown in detail view descriptions

1 participant