<div class="docs-content" data-render>
# dp-code

A syntax-highlighted code block with a copy button and optional line numbers, wrapping the
`CodeBlock` helper (highlight.js plus the copy/line-number affordances).

Source: `static/js/components/AppCode.js`.

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `language` | string | (auto) | Sets `language-{value}` on the inner `<code>` for highlighting. |
| `line-numbers` | boolean | off | When present, renders a line-number gutter. |

## Usage

Provide a `<pre><code>` child, or plain text and the element wraps it:

```html
&lt;dp-code language="python" line-numbers&gt;
&lt;pre&gt;&lt;code&gt;def hello():
    return "world"&lt;/code&gt;&lt;/pre&gt;
&lt;/dp-code&gt;
```

On connection the element enhances its content once: highlighting, a copy button, and (when
`line-numbers` is set) a gutter.
</div>

<div class="component-demo">
    <div class="component-demo-title">Live example</div>
    <dp-code language="javascript" line-numbers><pre><code>export class Greeter {
    greet(name) {
        return `Hello, ${name}`;
    }
}</code></pre></dp-code>
</div>
<script type="module">
    import "{{ static_url('/static/js/components/AppCode.js') }}";
</script>
