|
<div class="docs-content" data-render>
|
|
# dp-code
|
|
|
|
A syntax-highlighted code block with a copy button and optional line numbers. Wraps 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
|
|
<dp-code language="python" line-numbers>
|
|
<pre><code>def hello():
|
|
return "world"</code></pre>
|
|
</dp-code>
|
|
```
|
|
|
|
The element enhances its content once on connection: 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/js/components/AppCode.js";
|
|
</script>
|