Code block

Code blocks highlight an entire block of code. To display code inline with text, use the Inline Code component.

    Usage

    function helloWorld() {
  console.log("Hello world!")
}

    <pre class="c-code">
function helloWorld() {
  console.log("Hello world!")
}
</pre>

    Implementation

    NameType
    Elements
    Code.c-code
    Modifiers
    Color.c-code--white .c-code--dark
    StatesNone

    Modifiers

    Color

    Modify the color of the code block based on its context as well as the background color of the element.

    Dark

    function helloWorld() {
  console.log("Hello world!")
}

    <pre class="c-code c-code--dark">
function helloWorld() {
  console.log("Hello world!")
}
</pre>

    White

    function helloWorld() {
  console.log("Hello world!")
}

    <pre class="c-code c-code--white">
function helloWorld() {
  console.log("Hello world!")
}
</pre>