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
, 
showAll
and 
wrap
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.)
wrapbooleanfalseA boolean indicating if long lines should soft-wrap instead of scrolling horizontally. Use 
wrap
for logs or wide output. Use 
wrap=false
to override the global 
isCodeWrapEnabled
theme option.

Wrap

Add 

wrap
to soft-wrap long lines instead of horizontal scrolling:

```bash wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
```
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

You can also enable wrapping globally for all code blocks:

// gatsby-config.js
{
  resolve: 'gatsby-theme-carbon',
  options: {
    isCodeWrapEnabled: true,
  },
}
Edit this page on GitHub
Previous
Components: Caption
Next
Components: DoDontExample