Skip to content

feat: add TerminalMarkdown component#64

Open
clawgreen wants to merge 1 commit intoOpenKnots:mainfrom
clawgreen:feat/terminal-markdown
Open

feat: add TerminalMarkdown component#64
clawgreen wants to merge 1 commit intoOpenKnots:mainfrom
clawgreen:feat/terminal-markdown

Conversation

@clawgreen
Copy link
Copy Markdown
Contributor

What does this PR do?

Adds a new TerminalMarkdown component for rendering Markdown content in terminal-styled output using react-markdown.

Features

  • Full Markdown support: Headings, paragraphs, links, emphasis, code, lists, blockquotes, tables
  • Syntax highlighting: Custom colors for different elements
  • Terminal aesthetic: All elements styled to match terminal theme
  • Code blocks: Syntax-highlighted pre-formatted code
  • Inline code: Styled inline code snippets
  • Lists: Bullet points with terminal chars (•)
  • Blockquotes: Left border with dimmed text
  • Tables: Border-styled tables with proper formatting
  • Links: Colored and underlined with variant support

Example Usage

<TerminalMarkdown
  content={`
# Terminal UI

A **React** component library for building terminal-style interfaces.

## Features
- Beautiful themes
- Keyboard navigation
- TypeScript support

\`\`\`bash
npm install terminal-ui
\`\`\`
  `}
  variant="blue"
/>

Dependencies

  • ✅ Added react-markdown (~50KB) as requested

Type of Change

  • 📦 New component
  • ✨ Enhancement (playground example)
  • 📚 Dependencies (react-markdown)

Checklist

  • Component created in components/terminal-markdown.tsx
  • TypeScript interface with JSDoc
  • Exported from components/terminal.tsx
  • Playground example with full README
  • Build passes (pnpm run build)
  • Follows project patterns
  • Uses react-markdown as requested

Screenshots

See playground at /playground for live Markdown rendering example.


Part of NEW_COMPONENTS_PLAN.md (Phase 3)

- Render Markdown in terminal-styled output
- Maps Markdown elements to terminal components
- Syntax highlighting for headings, links, code
- Styled lists, blockquotes, tables
- Custom colors for different elements
- Uses react-markdown library
- Full playground example with README content
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 2, 2026

@clawgreen is attempting to deploy a commit to the 0xBuns Team on Vercel.

A member of the Team first needs to authorize it.

@BunsDev BunsDev added blocked-infra Blocked by external tooling or integration setup component New component work labels Mar 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

blocked-infra Blocked by external tooling or integration setup component New component work

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants