Code Blocks

Wrap code in triple backticks to create a fenced code block. Specify the language after the opening backticks to enable syntax highlighting.

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

Unmarkdown supports syntax highlighting for over 100 languages, including JavaScript, TypeScript, Python, Go, Rust, Ruby, Java, C, C++, HTML, CSS, SQL, Bash, YAML, JSON, and many more.

Add a filename to your code block by including it after the language identifier, separated by a space. The filename renders as a header above the code.

```typescript index.ts
export const config = {
  apiKey: process.env.API_KEY,
  baseUrl: "https://api.unmarkdown.com/v1",
};
```

Certain language identifiers trigger visual rendering instead of syntax highlighting. The code is interpreted and rendered as a diagram, chart, or equation.

Mermaid Diagrams

Use mermaid to render diagrams from text. See the Mermaid Diagrams page for all 12 supported diagram types.

```mermaid
graph LR
    A[Write] --> B[Style] --> C[Publish]
```

Graphviz Diagrams

Use any of these identifiers to render Graphviz diagrams with a specific layout engine:

• dot or graphviz: Hierarchical directed graphs (default)
• neato: Spring-model undirected graphs
• fdp: Force-directed placement
• twopi: Radial layout
• circo: Circular layout
• sfdp: Scalable force-directed placement
• osage: Clustered layout
• patchwork: Treemap layout

```dot
digraph G {
    A -> B -> C;
}
```

```neato
graph G {
    A -- B -- C -- A;
}
```

See the Graphviz Diagrams page for details on each engine.

Chart.js Charts

Use chart, chartjs, or chart.js to render interactive charts from JSON configuration.

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{
      "label": "Revenue",
      "data": [12000, 19000, 15000, 22000]
    }]
  }
}
```

See the Chart.js page for all 8 chart types.

Math Equations

Use math to render block math equations as an alternative to the $$ syntax.

```math
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
```

Some of the most commonly used language identifiers for syntax highlighting:

• javascript / js, typescript / ts, jsx, tsx
• python / py, ruby / rb, go, rust / rs
• html, css, scss, json, yaml / yml
• bash / sh / shell, sql, graphql
• markdown / md, plaintext / text
• c, cpp, csharp / cs, java, kotlin, swift
• dockerfile, toml, xml, diff

Code blocks can be placed inside other elements like blockquotes, callouts, and list items. Indent the code fence to match the nesting level.

> Example inside a blockquote:
>
> ```python
> print("Hello from a blockquote")
> ```

- List item with code:

  ```bash
  npm install
  ```

Templates control how code blocks look, including the font family, background color, text color, border radius, and whether line numbers are shown. These settings come from the template configuration and apply automatically.

All code blocks include an automatic copy button in the top-right corner. Readers can click it to copy the entire code block contents to their clipboard. This behavior is built in and requires no configuration.