Figma Component / Ant Design X
CodeHighlighter
Used to highlight code formatting.
Documentation
What is Figma CodeHighlighter?
CodeHighlighter is a presentation component for rendering code snippets with syntax emphasis. It improves readability of technical content in chats, docs-like panels, and AI responses that include code output.
When to Use CodeHighlighter?
Use CodeHighlighter whenever users need to read or compare code in a structured format. It is ideal for developer tools, assistant outputs, and educational flows where preserving indentation and syntax clarity is critical.
How to Design CodeHighlighter?
Use a monospace type style, controlled line height, and language-aware color semantics. Provide clear container boundaries, optional copy actions, and support for long lines and scrolling without breaking layout context.
How CodeHighlighter Component is Designed in Ant Design System for Figma?
In Ant Design System for Figma, CodeHighlighter uses token-driven color and typography values to stay aligned with the broader Ant visual language. It is composed to work inside Bubble and content blocks while keeping technical output legible.
Related components
This component is part of the Ant Design System for Figma. Browse Ant Design Figma templates or view kit pricing.