Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Code snippet

Code snippets are small blocks of reusable code that can be inserted in a code file.

Overview

The code snippet component is built with basic styling. We recommend using Base16 for more complex syntax highlighting. Base16 provides carefully chosen syntax highlighting and a default set of sixteen colors suitable for a wide range of applications. The theme we recommend using is Solarflare.

Live demo

@mixin grid-container {
  width: 100%;
  padding-right: padding(mobile);
  padding-left: padding(mobile);

  @include breakpoint(bp--xs--major) {
    padding-right: padding(xs);
    padding-left: padding(xs);
  }
}

$z-indexes: (
  modal : 9000,
  overlay : 8000,
  dropdown : 7000,
  header : 6000,
  footer : 5000,
  hidden : - 1,
  overflowHidden: - 1,
  floating: 10000
);
CodeSnippet
Modifiers

Sample data

const codeSnippet = `@mixin grid-container {
width: 100%;
padding-right: padding(mobile);
padding-left: padding(mobile);
@include breakpoint(bp--xs--major) {
padding-right: padding(xs);
padding-left: padding(xs);
}

Interactions

Copy to clipboard

Code snippets are accompanied by a copy icon, which allows users to copy the provided code to their clipboard. The copy icon must be accompanied by a confirmation that states the successful action of copying an item to the users clipboard.

code snippet example

Overflow and scrolling

If there are more than nine lines of code, apply vertical scrolling to the code snippet.

Terminal commands are often longer strings and should only appear on one line. Apply horizontal scrolling to maintain the set width of the box for those longer strings.

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.