Output Panel

The output panel splits a code block into a syntax-highlighted command section and a plain-text output section below it. Add withOutput to the meta string and place a ---output--- separator line between the source code and its output.

Basic output panel

Add withOutput to the fence info string and separate commands from output with ---output---:

1
```bash withOutput
2
pwd
3
ls -la
4
---output---
5
/usr/home/boba-tan
6
total 24
7
drwxr-xr-x  3 boba boba 4096 Jun 28 14:30 .
8
```

pwd
ls -la

/usr/home/boba-tan
total 24
drwxr-xr-x  3 boba boba 4096 Jun 28 14:30 .

→ The terminal frame shows pwd and ls -la with syntax highlighting. A toggleable panel below displays the command output as plain text.

The copy button copies only the command portion. The separator line and output text are excluded.

Editor frame with output

Output panels work with editor frames too. Attach program output beneath an editor-framed code block:

1
```go withOutput
2
package main
3
4
import "fmt"
5
6
func main() {
7
    fmt.Println("Hello, Kazari!")
8
    fmt.Println("Output panels are here.")
9
}
10
---output---
11
Hello, Kazari!
12
Output panels are here.
13
```

1
package main
2
3
import "fmt"
4
5
func main() {
6
    fmt.Println("Hello, Kazari!")
7
    fmt.Println("Output panels are here.")
8
}

Hello, Kazari!
Output panels are here.

→ The editor frame renders the Go source with full syntax highlighting. The output panel below shows the program's printed output.

Collapsed output

Start the output panel hidden with outputCollapsed. The reader clicks the toggle to reveal it:

1
```bash withOutput outputCollapsed
2
echo "Build complete"
3
---output---
4
Build complete
5
```

echo "Build complete"

Build complete

→ The output panel starts hidden. The toggle button reads "Output" and expands the panel on click.

Per-block overrides

Engine-level defaults apply to all output panels. Per-block meta keys override them for individual blocks.

Set all output panels to start collapsed at the engine level:

1
engine := kazari.New(
2
    kazari.WithHighlighter(hl),
3
    kazari.WithOutputPanel(true),
4
    kazari.WithOutputCollapsed(true),
5
)

Then expand a specific block by adding outputCollapsed=false to its meta string:

1
```bash withOutput outputCollapsed=false
2
curl -s https://api.example.com/health
3
---output---
4
{"status": "ok"}
5
```

curl -s https://api.example.com/health

{"status": "ok"}

→ All output panels on the page start collapsed except this one, which starts expanded.

Custom separator

Change the separator string at the engine level with WithOutputSeparator:

1
engine := kazari.New(
2
    kazari.WithHighlighter(hl),
3
    kazari.WithOutputPanel(true),
4
    kazari.WithOutputSeparator("==="),
5
)

Blocks using this engine split on === instead of ---output---.

Custom label

Replace the default toggle label with outputLabel="...":

1
```bash withOutput outputLabel="Run result"
2
node index.js
3
---output---
4
Server listening on port 3000
5
```

node index.js

Server listening on port 3000

→ The toggle button displays "Run result" instead of the default locale label.

Engine configuration

The output panel requires WithOutputPanel(true) on the engine. Without it, per-block withOutput meta tokens are parsed but have no effect, and no output panel CSS or JS is emitted.

1
engine := kazari.New(
2
    kazari.WithHighlighter(hl),
3
    kazari.WithOutputPanel(true),
4
    kazari.WithOutputCollapsed(true),
5
)

Engine options:

Per-block overrides via the Options struct:

1
html, err := engine.Render(code, kazari.Options{
2
    Lang:            "bash",
3
    WithOutput:      &outputOn,
4
    OutputCollapsed: &collapsed,
5
    OutputLabel:     "Run result",
6
})

All three engine options also have kazari.config.yaml equivalents: outputPanel, outputDefaultCollapsed, and outputSeparator. See File-Based Config for details.

How it works

The engine scans the code content for the separator line during preprocessing. The first line whose trimmed content exactly matches the separator string splits the block: everything before becomes the syntax-highlighted code, everything after becomes the output panel text. The separator line itself is removed from both sections.

Splitting happens before RawCode is set, before line count is computed, and before collapse resolution runs. This means:

• The copy button and BlockInfo.RawCode (passed to post-render callbacks) contain only the code portion.
• Line numbers, markers, focus lines, and collapsible sections apply only to the code lines.
• Collapse threshold counts only code lines, not output lines.

Output text is plain HTML-escaped text rendered into a bare <pre>. It receives no syntax highlighting, no line numbers, and no kz-line span structure.

If no separator line is found in the block, the entire content is treated as code and no output panel is rendered.

Configuration

The default toggle label is locale-aware. English uses "Output", French uses "Sortie", Japanese uses "出力". Override the label globally with WithUIStrings(map[string]string{"output.label": "..."}) or per-block with outputLabel="...".

CSS variables

These variables are only emitted when WithOutputPanel(true) is set. See the CSS Variables reference for the complete list.

Edge cases

• WithOutputPanel(true) must be set on the engine. Per-block withOutput is inert without it.
• All three engine options have kazari.config.yaml equivalents (outputPanel, outputDefaultCollapsed, outputSeparator).
• Output panel fields are not part of BlockDefaults or LanguageDefaults. Per-language defaults for output panels are not possible.
• The copy button always copies only the code portion. The separator and output text are excluded.
• Output text is never syntax-highlighted, regardless of the block's language.
• Line numbers, markers, focus lines, and collapsible sections apply only to the code portion.
• The wrap toggle button affects only the code <pre>, not the output <pre>.
• Output panels work inside code group tabs, processed by the same RenderWithMeta pipeline.
• Mermaid blocks bypass output splitting entirely.
• Only the first separator line is used. If the separator string appears multiple times, everything after the first occurrence is treated as output.