The code component requires the standard monospace typeface, Source Code Pro. Import it into your app with:
Install the component dependency:
Include a React component in your project:
Use when presenting code strings inline with body text.
To specify the light theme, wrap your components in a
Construct your own code block for code snippets longer than a line or single expression.
Code blocks can come in so many varieties, supported differently by various libraries, that the Design System doesn't favor any single option. Choose what you find most useful and complementary to these guidelines.
In order to ensure proper color contrast when rendering your code blocks, don't use any dark background color lighter than
Code highlighting should be applied consistently throughout the product based on the language syntax being highlighted. Install the core palette to access standard code highlighting colors.