1
0
Fork 0
freesewing/markdown/dev/guides/markdown/code-blocks/en.md
Joost De Cock 4cd2eff9a3 feat(shared): Add Mermaid support to MDX pipeline
At the request of @marpants this adds support for mermaid diagrams to
our shared MDX pipeline. Diagrams can be created by using a fenced code
block using the `mermaid` language.

I did not verify to what extend this bloats the bundle. Perhaps that's
something we need to look into later and consider the trade-off. For
now, my main concern is to keep a new contributor happy, so here it goes
:)
2023-04-17 19:58:33 +02:00

1,017 B

title order
Code and code blocks 80

Especially for our developer documentation, there's a lot of times we include source code in the documentation. You can make these look pretty by using a code block.

The basic use is to wrap your code in three backtick characters on a line:

```
let me = 'you'
```

Gives you:

let me = 'you'

This is a generic code block. But we also support syntax highlighting. To do so, add the language specifier after the opening backticks:

```js
let me = 'you'
```

To get:

let me = 'you'

The following language codes are supported:

  • js for JavaScript code
  • markdown for Markdown
  • html for HTML
  • svg for SVG
  • bash for Bash or shell scripts
  • mdx for MDX
  • jsx for JSX
  • json for JSON

Note that mermaid code blocks will be rendered as Mermaid diagrams. Refer to the docs on custom tags for an example.