---
description: "Putting code in a Jotaid note: backtick-wrapped inline code, triple-backtick fenced blocks, and Mermaid diagrams from a mermaid fence."
---
<!--
  Markdown representation of https://docs.jotaid.com/en/guide/insert-code
  Generated by scripts/gen-markdown-variants.mjs — do not edit by hand.
  Served from the canonical URL under `Accept: text/markdown`.
-->

# Insert Code

## Inline Code

A single backtick on each side, for naming a variable, a file or a command mid-sentence:

```markdown
Check `package.json` before running `npm run build`.
```

Shortcut: **⌘`**. Inline code renders in a monospace face on a faint tinted background.

## Code Blocks

Three backticks on their own lines. Put the language name after the opening fence:

````markdown
```swift
func greet(_ name: String) -> String {
    "Hello, \(name)"
}
```
````

Shortcut: **⌘⇧C**. The language may be omitted; supplying it colours the block accordingly. Everything inside a fence is preserved literally — asterisks, hashes and pipes are never read as Markdown.

## Mermaid Diagrams

Name the language `mermaid` and the fence stops being code and becomes a **diagram**:

````markdown
```mermaid
flowchart LR
    A[Idea] --> B[Note]
    B --> C[Node]
    C --> D[Graph]
```
````

Flowcharts, sequence diagrams, state diagrams and Gantt charts all work. As with tables and math, it renders as a diagram while the cursor is elsewhere and reverts to source when the cursor enters — edit a line and watch the picture follow.

> **When the diagram will not draw**
>
> Mermaid is strict: one malformed arrow and nothing renders. Move the cursor into the fence to see the source — it is usually an arrow direction or a node bracket, and the opening declaration such as `flowchart LR` is required.

## Next Steps

- [Insert Tables](https://docs.jotaid.com/en/guide/insert-tables) — The other block that renders in place
- [Note Formatting](https://docs.jotaid.com/en/guide/markdown-editor) — The toolbar and every shortcut