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

## 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.
```
Copy to clipboard

## 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
Copy to clipboard

## Path, src, hideCode

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

```markdown path=/directory/file.mdx src=https://gatsby.carbondesignsystem.com  hideCode=false
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
Copy to clipboard

Props

property	propType	default	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	true	A boolean indicating if the code block should have a Show More button. The button will only display if a code block has more than 9 lines.

Edit this page on GitHub

Components: Caption

Components: DoDontExample

Code blocks

Example

Props