Code
Code renders inline code snippets or block-level code with optional line numbers and copy button.
Basic Usage
Use npm install to install.
const x = 42import { Code } from "@paramanu/typography-react"
export default function App() {return ( <> <p>Use <Code>npm install</Code> to install.</p> <Code block>{"const x = 42"}</Code> </>)}<p>Use <code class="pm-code">npm install</code> to install.</p><pre class="pm-code-block"><code>const x = 42</code></pre>Accessibility
Inline code renders as <code>. Block code renders as <pre><code>. Use the language prop for syntax-highlighting CSS hooks.
React Props
| Prop | Type | Default | Description |
|---|---|---|---|
block | boolean | false | Block mode (<pre><code>) |
size | "xs" | "sm" | "md" | "lg" | — | Font size |
variant | "default" | "outline" | "default" | Visual variant |
color | "neutral" | "primary" | "danger" | "success" | "warning" | "info" | — | Color |
withLineNumbers | boolean | false | Line numbers (block) |
withCopyBtn | boolean | false | Copy button (block) |
language | string | — | Language hint |
CSS Classes
| Class | Purpose |
|---|---|
pm-code | Inline code |
pm-code-block | Block code |
pm-code-block--line-numbers | Line numbers |
pm-code-block--copy | Copy button |