{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "code",
  "name": "Code",
  "category": "Data display",
  "description": "Inline code and code blocks in the noodle's monospace font.",
  "tags": [
    "code",
    "pre",
    "snippet",
    "monospace"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "code block",
      "inline code",
      "snippet",
      "terminal command"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/code",
  "markdownUrl": "https://mian.ro/ai/components/code.md",
  "classes": [
    {
      "name": "mn-code",
      "description": "Inline <code>."
    },
    {
      "name": "mn-pre",
      "description": "Block <pre>."
    }
  ],
  "accessibility": [
    "Code blocks scroll horizontally; they are focusable only if you add tabindex=\"0\", which you should for long blocks."
  ],
  "examples": [
    {
      "title": "Inline and block",
      "description": null,
      "html": "<p>Set the design with <code class=\"mn-code\">data-noodle</code> on the root element.</p>\n<pre class=\"mn-pre\" tabindex=\"0\"><code>&lt;html data-noodle=\"udon\" data-mode=\"dark\"&gt;\n  &lt;button class=\"mn-btn\"&gt;Hello&lt;/button&gt;\n&lt;/html&gt;</code></pre>"
    }
  ],
  "css": ".mn-code { padding: .15em .4em; border-radius: min(5px, var(--mn-radius-field)); background: var(--mn-surface-2); font: 500 .875em/1.4 var(--mn-font-mono); color: var(--mn-fg); }\n.mn-pre {\n  margin: 0; padding: 1rem 1.1rem; overflow: auto;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);\n  background: var(--mn-surface-2); color: var(--mn-fg);\n  font: 400 .8125rem/1.65 var(--mn-font-mono); tab-size: 2;\n}\n.mn-pre code { font: inherit; background: none; padding: 0; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/code.json"
  }
}