Docs

Code explorer

Browse several files of one example in a file switcher.

An explorer groups the files of a single change so a reader can move between them without scrolling past all of them.

<CodeExplorer>
<CodeFile name="Cargo.toml">
```toml
[build-dependencies]
proa_docs_build = { git = "https://github.com/Proa-Labs/proa.git" }
```
</CodeFile>
<CodeFile name="build.rs">
```rust
fn main() { proa_docs_build::compile(config); }
```
</CodeFile>
</CodeExplorer>

Use it when the files only make sense together. For one file, a plain code block with filename= is lighter.

Attributes

name takes a path, not just a filename. src/pages/home.rs renders as a path with the segments styled separately, which is what makes a multi-directory example readable.

Constraints

Eight files maximum, for the same reason as tabs — the stylesheet addresses panels up to eight, and the build reports an explorer that exceeds it.

<CodeFile> only works inside <CodeExplorer>. Outside one it is not claimed as a component and falls through to the Markdown renderer.

Explorers and tabs share one counter, so their radio groups never collide on a page that uses both.

Related

Code block · Tabs · Files