# Code · MIAN

Inline code and code blocks in the noodle's monospace font.

- Id: `code` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/code
- Use for: code block, inline code, snippet, terminal command.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-code`: Inline <code>.
- `mn-pre`: Block <pre>.

## Accessibility

- Code blocks scroll horizontally; they are focusable only if you add tabindex="0", which you should for long blocks.

## Examples

### Inline and block

```html
<p>Set the design with <code class="mn-code">data-noodle</code> on the root element.</p>
<pre class="mn-pre" tabindex="0"><code>&lt;html data-noodle="udon" data-mode="dark"&gt;
  &lt;button class="mn-btn"&gt;Hello&lt;/button&gt;
&lt;/html&gt;</code></pre>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/code/source