Code blocks
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
showAll
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 morbi
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.) |