When authoring markdown using the Carbon Gatsby theme, code blocks have some extra super powers you can take advantage of. We provide carbon-themed syntax highlighting as well as optional

path

src

and

hideCode

features.

Example

Horizontal overflow

## Path and src w/ overflow

This example overflows to demonstrate the text fading out under the side bar.
This example overflows to demonstrate the text fading out under the side bar.
This example overflows to demonstrate the text fading out under the side bar.
This example overflows to demonstrate the text fading out under the side bar.
Copy to clipboard

Vertical overflow

## Path, src, hideCode w/ overflow

This example demonstrates the show more button. This example demonstrates the
show more button. This example demonstrates the show more button. This example
demonstrates the show more button. This example demonstrates the show more
button. This example demonstrates the show more button. This example
demonstrates the show more button. This example demonstrates the show more
button. This example demonstrates the show more button. This example
demonstrates the show more button. This example demonstrates the show more
button. This example demonstrates the show more button. This example
demonstrates the show more button. This example demonstrates the show more
button. This example demonstrates the show more button. This example
demonstrates the show more button. This example demonstrates the show more
button.
Copy to clipboard

Code

```markdown path=/directory/file.mdx src=https://gatsby.carbondesignsystem.com hideCode=true
### Path, src and hideCode

This code snippet provides a `path`, a `src` and `hideCode` prop.
```
Copy to clipboard

Props

property	propType	description
language	string	Available languages.
src	string	The full url of a relevant link (source)
path	string	A string indicating the filename or path. Due to markdown limitations this can only be a single word
hideCode	boolean	A boolean indicating if the code block should have a Show More button. Code block should have more than 9 lines to display the button. Default value = false

Edit this page on GitHub

Components: Caption

Components: DoDontExample

Code blocks

Example

Code

Props