ContentLiquid Glass
Markdown Viewer
Glass-styled markdown with Shiki syntax highlighting. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add markdown-viewerRendered markdown
About this component
Markdown Viewer is part of Content. Glass-styled markdown with Shiki syntax highlighting.
Install with npx @intellihelper/cli@latest add markdown-viewer. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Markdown Viewer
Use when
- Use Markdown Viewer when glass-styled markdown with Shiki syntax highlighting.
- Typography, markdown, code viewers, and documentation surfaces.
- Long-form help, changelogs, or in-app guides.
Avoid when
- Dense data tables (use data components).
- Primary navigation (use navigation components).
Accessibility notes
- Preserve heading hierarchy in markdown rendering.
- Code blocks should not trap focus; copy actions need labels.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Keep content panels readable: higher opacity and stronger text contrast than pure chrome.
- Separate chrome toolbars from the reading column.