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.
Animations
Line-by-line animations can be enabled using pre-formatted prop values. A replay button is enabled by default.
GitHub Copilot suggestions
Simulate GitHub Copilot suggestions using the suggestedLineStart property.
GitHub Copilot chat
Simulate GitHub Copilot Chat using the IDE.Chat sub-component. The script is fully customizable, and code snippets will require pre-formatting to enable syntax highlighting.
See Storybook for a comprehensive example of the Chat feature, inclusive of syntax highlighting.
See Chat example in Storybook
Glass variant
A glass variant is available to simplify placement of the IDE on background images. This variant adds alpha transparency and background blurring.
When using the glass variant, pay close attention to the background image behind the tabs of the IDE.Editor. Ensure there is sufficient contrast between the text and the background on inactive tabs.
Accessibility
The full contents of IDE.Chat and IDE.Editor are intentionally not made available to users of assistive technologies. Summaries of the content — which must be provided using the alternativeText prop — are made available instead.
When writing alternativeText, consider the following:
- The
IDE.Chatscript should be summarized in a way that conveys the essential information of the conversation. - The
IDE.Editorcode should be summarized in a way that conveys the essential information of the code snippet, specifically noting any suggestions made by Copilot.
In both cases, the goal is to provide a meaningful summary of the content that will allow users of assistive technologies to understand the purpose and scope of the conversation or code snippet, without needing to understand the full content.
Component props
IDE Required
| name | type | default | required | description |
|---|---|---|---|---|
height | number | 800 | false | The optionally configurable height of the IDE |
variant | 'default''glass' | default | false | Alternative presentation of the IDE |
IDE.Editor
| name | type | default | required | description |
|---|---|---|---|---|
activeTab | number | false | Active tab index | |
files | IDEEditorFile[] | true | Array of editor files | |
showLineNumbers | boolean | false | Show line numbers in the editor | |
size | 'small''medium''large' | false | Controls editor text size | |
triggerAnimation | boolean | false | Trigger animation externally |
Supported file extensions in the editor include: py, ts, js, jsx, hs, html, css, scss, json, md, yml, yaml, txt, sh, sql
IDE.Chat
| name | type | default | required | description |
|---|---|---|---|---|
script | IDEChatMessage[] | true | Array of chat messages | |
alternativeText | string | true | Alternative description of the chat script for users of assistive technologies | |
animationDelay | number | 3000 | false | Delay for the chat animation |