Primer

IDE

Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
import {IDE} from '@primer/react-brand'

Examples

Default

The IDE does not automatically apply syntax highlighting to code snippets. Usage of this component in GitHub.com is expected to use the proprietary tokenizer and highlighter, the output of which can be passed directly into IDE as a parameter.

See Storybook for examples of IDE using highlight.js syntax highlighter.

See syntax highlighter examples

Animations

Line-by-line animations can be enabled using pre-formatted prop values. A replay button is enabled by default.