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
## Path and srcThis code snippet provides a `path` and a `src` prop.```markdown path=/directory/file.mdx src=https://gatsby.carbondesignsystem.comLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum fermentumaliquet. Aenean non ante in est placerat iaculis. Pellentesque pellentesquefeugiat turpis, nec porttitor magna.```
## Path and srcThis code snippet provides a `path` and a `src` prop.```markdown path=/directory/file.mdx src=https://gatsby.carbondesignsystem.comLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum fermentumaliquet. Aenean non ante in est placerat iaculis. Pellentesque pellentesquefeugiat turpis, nec porttitor magna. Nullam tempor dapibus elit. In sapienrisus, aliquam non ullamcorper ac, porta vel magna. Pellentesque habitant morbi
## Path, src, showAllThis code snippet provides a `path`, a `src` and `showAll` prop.```markdown path=/directory/file.mdx src=https://gatsby.carbondesignsystem.com showAllLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum fermentumaliquet. Aenean non ante in est placerat iaculis. Pellentesque pellentesquefeugiat turpis, nec porttitor magna. Nullam tempor dapibus elit. In sapienrisus, aliquam non ullamcorper ac, porta vel magna. Pellentesque habitant morbitristique senectus et netus et malesuada fames ac turpis egestas. Donecscelerisque felis vitae diam dignissim efficitur. Aenean non ante in estplacerat iaculis. Duis bibendum fermentum aliquet. Pellentesque pellentesquefeugiat turpis, nec porttitor magna. Nullam tempor dapibus elit. In sapienrisus, aliquam non ullamcorper ac, porta vel magna. Pellentesque habitant morbitristique senectus et netus et malesuada fames ac turpis egestas. Donecscelerisque felis vitae diam dignissim efficitur. Aenean non ante in estplacerat iaculis. Duis bibendum fermentum aliquet.```
Props
property | propType | required | 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 | ||
showAll | boolean | false | A 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.) |