Skip to main contentGatsby theme Carbon

Code blocks

When authoring markdown using the Carbon Gatsby theme, code blocks have some extra superpowers you can take advantage of. We provide carbon-themed syntax highlighting as well as optional path, src and showAll features.

Example

/directory/file.mdx
## Path and src
This code snippet provides a `path` and a `src` prop.
```markdown path=/directory/file.mdx src=https://gatsby.carbondesignsystem.com
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum fermentum
aliquet. Aenean non ante in est placerat iaculis. Pellentesque pellentesque
feugiat turpis, nec porttitor magna.
```
/directory/file.mdx
## Path and src
This code snippet provides a `path` and a `src` prop.
```markdown path=/directory/file.mdx src=https://gatsby.carbondesignsystem.com
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum fermentum
aliquet. Aenean non ante in est placerat iaculis. Pellentesque pellentesque
feugiat turpis, nec porttitor magna. Nullam tempor dapibus elit. In sapien
risus, aliquam non ullamcorper ac, porta vel magna. Pellentesque habitant morbi
/directory/file.mdx
## Path, src, showAll
This code snippet provides a `path`, a `src` and `showAll` prop.
```markdown path=/directory/file.mdx src=https://gatsby.carbondesignsystem.com showAll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum fermentum
aliquet. Aenean non ante in est placerat iaculis. Pellentesque pellentesque
feugiat turpis, nec porttitor magna. Nullam tempor dapibus elit. In sapien
risus, aliquam non ullamcorper ac, porta vel magna. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Donec
scelerisque felis vitae diam dignissim efficitur. Aenean non ante in est
placerat iaculis. Duis bibendum fermentum aliquet. Pellentesque pellentesque
feugiat turpis, nec porttitor magna. Nullam tempor dapibus elit. In sapien
risus, aliquam non ullamcorper ac, porta vel magna. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Donec
scelerisque felis vitae diam dignissim efficitur. Aenean non ante in est
placerat iaculis. Duis bibendum fermentum aliquet.
```

Props

propertypropTyperequireddefaultdescription
languagestringAvailable languages.
srcstringThe full url of a relevant link (source)
pathstringA string indicating the filename or path. Due to markdown limitations this can only be a single word
showAllbooleanfalseA boolean indicating if the code block should show all the code at once. If not set, a “Show more” button will be displayed (only if a code block has more than 9 lines.)