CmdocsComponents
Code Blocks
Syntax-highlighted code with titles and multi-language examples.
Code Blocks
Code blocks are rendered with full syntax highlighting. Just use standard Markdown fenced code blocks with a language identifier.
Basic Code Block
interface DocsConfig {
name: string;
description?: string;
theme: {
colors: { primary: string };
darkMode: boolean;
};
navigation: {
tabs: NavigationTab[];
};
}```typescript
interface DocsConfig {
name: string;
description?: string;
navigation: {
tabs: NavigationTab[];
};
}
```Code Block with Title
Add a title annotation to show a filename or label above the code:
{
"name": "My Project",
"navigation": {
"tabs": [
{
"label": "Docs",
"path": "docs",
"groups": [
{
"label": "Getting Started",
"pages": [
{ "file": "index" },
{ "file": "quickstart" }
]
}
]
}
]
}
}```json title="docs.json"
{
"name": "My Project",
"navigation": { ... }
}
```Multi-Language Examples
Combine code blocks with Tabs to show the same concept in multiple languages:
async function handleRequest(req: Request): Promise<Response> {
const { slug } = req.params;
const page = source.getPage(slug.split("/"));
if (!page) {
return new Response("Not found", { status: 404 });
}
return Response.json(page.data);
}async fn handle_request(
Path(slug): Path<String>,
) -> impl IntoResponse {
match source.get_page(&slug) {
Some(page) => Json(page.data).into_response(),
None => StatusCode::NOT_FOUND.into_response(),
}
}async def handle_request(slug: str):
page = source.get_page(slug.split("/"))
if not page:
raise HTTPException(status_code=404)
return page.dataSupported Languages
Code blocks support syntax highlighting for all major languages including:
typescript, javascript, python, rust, go, java, bash, json, yaml, css, html, sql, graphql, markdown, mdx, and many more.
How is this guide?