api-docs-icon

Code Blocks

Add highlighted code blocks that users can easily copy to your documentation.

Basic Code Block

Use the traditional markdown fenced code blocks (three backticks) to render the basic code block component.

```
Hello World
```

Renders:

Hello World!

Syntax Highlighting

Sideko uses Shiki to do syntax highlighting due to its reliability and performance.

Simply put the name of the programming language after the three backticks to activate syntax highlighting for that block.

```python
def hello_world(message: str):
    print(f"Hello World! {msg}")
```

Renders:

def hello_world(message: str):
    print(f"Hello World! {msg}")

Titles

You can add a title to your code block by adding text after the programming language name.

```typescript hello-world.ts
function helloWorld(message: string) {
    console.log("Hello World! ", message)
}
```

Renders:

hello-world.ts
function helloWorld(message: string) {
    console.log("Hello World! ", message)
}