Skip to content

Plan: Docs Code Block Component

Goal

Replace plain MkDocs fenced code blocks with a branded terminal-style component that matches the portfolio design system. Light and dark mode aware.

Design

  • Dark title bar with macOS-style traffic light dots (red / yellow / green)
  • Language label centered in the title bar in OneDNA pink
  • Light mode: light grey code body, dark text
  • Dark mode: near-black code body, light text
  • Pink top border on the code area (matches fenced block treatment)
  • Implemented entirely in CSS + HTML — no JavaScript, no MkDocs plugins

Usage in Markdown

Requires md_in_html extension (already enabled in mkdocs.yml).

<div class="cb" markdown="1">
<div class="cb-dots"><span></span><span></span><span></span><span class="cb-lang">python</span></div>

```python
your code here

```

Implementation

  • CSS in docs/stylesheets/extra.css under .cb section
  • scripts/wrap_code_blocks.py — one-shot script that wrapped all 273 existing fenced blocks across docs/**/*.md (skips mermaid blocks)
  • Test samples added to docs/index.md during development (removed after verification)

Status

Completed 2026-05-19. All docs code blocks use the .cb component.