# Code and Mermaid

This page covers fenced code blocks, indented code blocks, syntax highlighting, the copy button and Mermaid diagrams.

## Fenced Code Blocks

````markdown
```javascript
const greet = (name) => `Hello, ${name}`;
```
````

Output structure:

```html
<pre class="prettyprint" name="javascript">
  <code class="language-javascript" name="javascript">
    <ol><li>const&nbsp;greet...</li></ol>
  </code>
  <button class="copy"></button>
</pre>
```

| Rule | Detail |
|---|---|
| Fences | Triple backticks only; `~~~` is not supported |
| One `<li>` per line | CSS renders the line numbers |
| Common indentation | The first line's indentation (rounded down to a multiple of 4) is removed from every line |
| Escaping | `<`, `>`, `&`, quotes and spaces become entities |
| Standard mode | Not processed; see [Standard Mode](/standard-mode) |
| Same line | ` ```word``` ` reads `word` as the language name and outputs an empty `<code>` |

## Languages and Highlighting

The lowercased language name goes into the `name` attribute; a `language-<name>` class is added only for names in this list:

`javascript`, `js`, `ts`, `typescript`, `html`, `css`, `xml`, `json`, `sql`, `java`, `python`, `ruby`, `php`, `cpp`, `csharp`, `swift`, `kotlin`, `go`, `rust`, `perl`, `bash`

The actual coloring is done by Google code-prettify's `PR.prettyPrint()` based on the `prettyprint` class; it detects languages on its own, so languages outside the list may still be colored. `MDViewer` calls it after every render.

## Copy Button

Every block ends with a `<button class="copy">`. In `MDViewer`, clicking it writes the first child's (`<code>`) `innerText` to the clipboard; the block gets the `success` class for 1 second on success, the `error` class on failure. `navigator.clipboard` requires HTTPS or localhost.

## Indented Code Blocks

Consecutive lines starting with 4 or more spaces or a Tab output `<pre class="prettyprint"><code>` with line numbers and a copy button, but no language.

| Exception | Reason |
|---|---|
| The block contains an HTML tag | Skipped, so indented HTML is not treated as code |
| Nested lists | Lists were converted in an earlier step, so indented items never become code |

## Mermaid

````markdown
```mermaid
graph LR
    A[Editor] --> B[Viewer]
```
````

With the language `mermaid`, the output is `<div class="mermaid">` instead of `<pre>`. After rendering, `MDViewer` turns `<br>` back into newlines and `&gt;` back into `>`, then calls `mermaid.run()`. Mermaid 11.4.1 is loaded automatically by the bundle; see [Runtime Dependencies](/runtime-dependencies). Exported HTML does not load Mermaid.