# 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 `` for highlighting. | | `line-numbers` | boolean | off | When present, renders a line-number gutter. | ## Usage Provide a `
` child, or plain text and the element wraps it:

```html
<dp-code language="python" line-numbers>
<pre><code>def hello():
    return "world"</code></pre>
</dp-code>
```

On connection the element enhances its content once: highlighting, a copy button, and (when
`line-numbers` is set) a gutter.
Live example
export class Greeter {
    greet(name) {
        return `Hello, ${name}`;
    }
}