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.

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 gray06.

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.

default code, body text, primary content
comments, invisibles
keywords, storage, selector, markup italic, diff changed
integers, boolean, constants, XML attributes, markup link url
classes, markup bold, search text background
strings, inherited class, markup code, diff inserted
support, regular expressions, escape characters, markup quotes
functions, methods, attribute ids, headings
variables, XML tags, markup link text, markup lists, diff deleted
deprecated, opening/closing embedded language tags e.g. <?php?>