+Copy button
+Line numbers
Wrap a standard <pre><code> block, choose a language, and opt into the controls you need.
Setup
Load a theme, set its scope wherever it belongs on your page, and import the custom element.
<html data-syntax-theme="github">
<head>
<link rel="stylesheet" href="./microlighter/themes/github.css">
<script type="module" src="./microlighter/micro-lighter-element.min.js"></script>
</head>
<body>
<micro-lighter language="javascript" controls="copy" line-numbers>
<pre><code>customElements.define("spicy-iframe", class extends HTMLElement {});</code></pre>
</micro-lighter>
</body>
</html>
01 / Live
Copy control
Add controls="copy" to enable the copy button.
class ReinventedButton extends HTMLElement {
connectedCallback() {
this.status = "platform-native, eventually";
}
}
customElements.define("reinvented-button", ReinventedButton);
02 / Lines
Line numbers
Add the line-numbers attribute for a non-copyable gutter. This sample also infers Python from the code block's existing metadata.
def explain_shadow_dom() -> str:
return "It is private, except for the five escape hatches."
print(explain_shadow_dom())
03 / Style
CSS part
The default button follows the syntax theme. Use its exposed part when the page needs a stronger treatment.
/* Encapsulation, with a small customer-service window. */
micro-lighter::part(copy-button) {
background: var(--syntax-function);
border-color: var(--syntax-function);
color: var(--syntax-background);
font-weight: 700;
text-transform: uppercase;
}
micro-lighter::part(line-numbers) {
font-family: fantasy;
color: var(--syntax-function);
}.web-component {
display: block; /* Groundbreaking. */
contain: content; /* Beyond expectations. */
}