---
description: "在 Jotaid 笔记里插入代码：反引号包住的行内代码、三反引号围栏代码块，以及用 mermaid 围栏画图。"
---
<!--
  Markdown representation of https://docs.jotaid.com/zh/guide/insert-code
  Generated by scripts/gen-markdown-variants.mjs — do not edit by hand.
  Served from the canonical URL under `Accept: text/markdown`.
-->

# 插入代码

## 行内代码

单个反引号包住，用于在句子里提一个变量名、文件名或命令：

```markdown
执行 `npm run build` 之前先看一眼 `package.json`。
```

快捷键 **⌘`**。行内代码用等宽字体渲染，带一层淡色底。

## 代码块

三个反引号成对，各占一行；开头那行的反引号后面写语言名：

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

快捷键 **⌘⇧C**。语言名可以省略，写上则渲染时按该语言着色。代码块内的所有字符都按原样保留——星号、井号、竖线都不会被当成 Markdown 语法。

## Mermaid 图

把语言名写成 `mermaid`，这块围栏就不再是代码，而是一张**图**：

````markdown
```mermaid
flowchart LR
    A[想法] --> B[笔记]
    B --> C[节点]
    C --> D[图谱]
```
````

流程图、时序图、状态图、甘特图都可以。和表格、公式一样，它在光标离开时渲染成图，光标进去则变回源码——改一行就能看到图跟着变。

> **图画不出来时**
>
> Mermaid 对语法比较严格，一个箭头写错整张图就渲染不出来。把光标移进围栏看源码，通常是箭头方向或节点括号的问题；`flowchart LR` 这类首行声明也不能少。

## 下一步

- [插入表格](https://docs.jotaid.com/zh/guide/insert-tables) —— 另一种就地渲染的块
- [笔记格式](https://docs.jotaid.com/zh/guide/markdown-editor) —— 工具栏与全部快捷键