Skip to main content

Code Blocks

Inline code​

Install with npm install cosmos-docusaurus-theme or reference src/index.js directly. The variable --ifm-code-background controls the background color.

Bash​

npm install cosmos-docusaurus-theme
docker compose up -d
git commit -m "feat: add cosmos theme"

JavaScript — with title and line numbers​

docusaurus.config.js
export default {
  themes: ['cosmos-docusaurus-theme'],
  themeConfig: {
    colorMode: {
      defaultMode: 'dark',
      respectPrefersColorScheme: true,
    },
  },
};

TypeScript​

interface ThemeTokens {
  indigo: string;
  textHi: string;
  textMid: string;
  border: string;
}

function useTokens(isDark: boolean): ThemeTokens {
  return isDark ? DARK_TOKENS : LIGHT_TOKENS;
}

CSS — with highlighted lines​

src/css/custom.css
/* Override brand color */
:root {
  --ifm-color-primary: #e11d48;
  --ifm-color-primary-dark: #be123c;
}

/* Override font */
:root {
  --ifm-font-family-base: 'Inter', system-ui, sans-serif;
}

YAML​

config/app.yaml
telemetry:
  prometheus_url: http://prometheus:9090
  cache_ttl_seconds: 60

plugins:
  simulator:
    enabled: true
    incident_mode: light
    changes_per_hour: 2

JSON​

package.json
{
  "name": "my-docs",
  "dependencies": {
    "@docusaurus/core": "^3.9.2",
    "cosmos-docusaurus-theme": "^1.1.7"
  }
}

Diff​

Migration from customCss
- theme: {
-   customCss: ['./src/css/custom.css'],
- },
+ themes: ['cosmos-docusaurus-theme'],

Python​

scripts/generate_topology.py
import yaml

def build_rack(name: str, devices: list[dict]) -> dict:
    return {
        "id": name.lower().replace(" ", "-"),
        "name": name,
        "devices": devices,
    }

rack = build_rack("Rack A01", [{"id": "compute001", "template_id": "dell-r750"}])
print(yaml.dump(rack))

PromQL​

# Nodes in CRIT state across all racks
up{job="node", instance=~"compute001|compute002|compute003"} == 0

# Average temperature per rack
avg by (rack) (
  ipmi_temperature_celsius{sensor="CPU Temp"}
)