just-the-docs/docs/ui-components/code.md

layout, title, parent, has_children, nav_order

layout	title	parent	has_children	nav_order
default	Code	UI Components	true	6

Code

{: .no_toc }

Table of contents

{: .no_toc .text-delta }

1. TOC {:toc}

---

Inline code

Code can be rendered inline by wrapping it in single back ticks.

Lorem ipsum dolor sit amet, `` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading with <inline code snippet> in it.

{: .no_toc }

```markdown Lorem ipsum dolor sit amet, `` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading with <inline code snippet> in it.

---

## Syntax highlighted code blocks

Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:

<div class="code-example" markdown="1">
```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

{% highlight markdown %} ```js // Javascript code with syntax highlighting. var fun = function lang(l) { dateformat.i18n = require('./lang/' + l) return true; } ``` {% endhighlight %}

---

Code blocks with rendered examples

To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a <div> with the code-example class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the markdown="1" attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...

Link button{: .btn }

```markdown [Link button](http://example.com/){: .btn } ```

{% highlight markdown %}

Link button{: .btn }

```markdown [Link button](http://example.com/){: .btn } ``` {% endhighlight %}

---

Mermaid diagram code blocks

Mermaid allows you to add diagrams and visualizations using Markdown code blocks. It is disabled by default. However, you can turn on support for mermaid by adding a mermaid key to your _config.yml.

The minimum configuration requires a version key (matching a version in jsDelivr):

mermaid:
  # Version of mermaid library
  # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
  version: "9.1.3"

Additional configuration options are loaded through _includes/mermaid_config.js. By default, the contents of the file are the empty object:

// _includes/mermaid_config.js
{}

This loads the default settings.

The contents of this object should follow mermaid's configuration API. For example, to override the theme, change _includes/mermaid_config.js to:

// _includes/mermaid_config.js
{
  theme: "forest"
}

Once mermaid is installed, it can be used in markdown files. The markdown for a simple flowchart example might look like the following:

{% highlight markdown %}

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

{% endhighlight %}

which renders:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Note: for demonstration purposes, we've enabled mermaid on this site. It is still disabled by default, and users need to opt-in to use it.