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.

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