Code Blocks | Bora Docs

Highlighting happens at build time via Hugo’s Chroma engine, so no JavaScript is needed for colors. The palette follows the active theme. Every block gets a copy button and a line-wrap toggle in its header bar automatically.

Language badge

markdown
    
```go
package main

func main() {
    println("hello")
}
```

go
    
package main

func main() {
    println("hello")
}

Filename title

markdown
    
```go {title="main.go"}
package main // the bar shows main.go next to the language badge
```

main.gogo
    
package main // the bar shows main.go next to the language badge

Highlighted lines

markdown
    
```yaml {title="site.json themes" hl_lines=[2,3]}
themes:
  - id: light      # these two lines
    default: true  # are highlighted
  - id: dark
```

site.json themesyaml
    
themes:
  - id: light      # these two lines
    default: true  # are highlighted
  - id: dark

Line numbers

markdown
    
```bash {linenos=true}
hugo mod get gitlab.com/natitec_public/bora
hugo server
```

bash
    
1
2

hugo mod get gitlab.com/natitec_public/bora
hugo server

Wrap toggle

Click the wrap button (left of copy) on this block. The long line soft-wraps instead of scrolling:

text

This deliberately long single line would normally force a horizontal scrollbar inside the code block unless the wrap toggle is switched on, in which case it wraps within the block borders.

Mermaid diagrams

A ```mermaid block renders as a diagram. The renderer loads only on pages that use it and re-renders when the theme switches:

flowchart LR
  A[Markdown] --> B(Chroma)
  B --> C{Theme CSS}
  C -->|light| D[GitHub palette]
  C -->|dark| E[Dark palette]

Combining options

All options combine freely on one block:

markdown
    
```yaml {title="example.yaml" hl_lines=[2] linenos=true}
key: value
highlighted: true
another: value
```

example.yamlyaml
    
1
2
3

key: value
highlighted: true
another: value

Edit this page

Thanks for your feedback!