Code and Mermaid
This page covers fenced code blocks, indented code blocks, syntax highlighting, the copy button and Mermaid diagrams.
Fenced Code Blocks
```javascript
const greet = (name) => `Hello, ${name}`;
```
Output structure:
<pre class="prettyprint" name="javascript">
<code class="language-javascript" name="javascript">
<ol><li>const 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 |
| 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
```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 > back into >, then calls mermaid.run(). Mermaid 11.4.1 is loaded automatically by the bundle; see Runtime Dependencies. Exported HTML does not load Mermaid.