Code Blocks

April 16, 2026 · 1 min read

Contents

Basic usage
Supported languages
Inline code
Styling
Mermaid and Dataview blocks
See also

OnyxFolio renders fenced code blocks with syntax highlighting, a language label badge, and a copy-to-clipboard button — all without client-side plugins.

Basic usage

```python
def hello(name: str) -> str:
    return f"Hello, {name}!"
```

Renders as:

def hello(name: str) -> str:
    return f"Hello, {name}!"

Features: - Syntax highlighting — Tokyo Night Dark colour scheme via Python-Markdown's codehilite extension - Language label — shown in the top-right corner of the block - Copy button — appears on hover (or always on mobile); copies the code content to the clipboard

Supported languages

Any language supported by Pygments works. Common examples:

Language	Fence tag
Python	```python
JavaScript	```javascript or ```js
TypeScript	```typescript or ```ts
Bash / Shell	```bash or ```sh
SQL	```sql
YAML	```yaml
JSON	```json
HTML	```html
CSS	```css
Rust	```rust
Go	```go
Markdown	```markdown

Unsupported or omitted language tags render as plain text in a <code> block, without a label.

Inline code

Backtick spans render as <code> elements:

Use the `print()` function.

Inline code is not syntax-highlighted — it's styled with the code font and a subtle background.

Styling

Code block styles live in frontend/static/code.css. To change the colour scheme, replace the codehilite-generated CSS classes or swap out the code.css file entirely.

The language label is a <span class="code-lang"> element positioned in the top-right corner via CSS.

Mermaid and Dataview blocks

Fenced blocks with mermaid or dataview language tags are intercepted before reaching the standard code renderer:

mermaid blocks → rendered as SVG diagrams (see [[Math and Diagrams]])
dataview blocks → executed as server-side queries (see [[Dataview]])