Browse Components

Code

Readable source code with browser syntax highlighting and copy controls.

HTML

HTML stays readable before enhancement.

<button class="btn" type="button">Save Changes</button>

View Code

HTML

<pre class="code-block" data-language="html" tabindex="0" aria-label="HTML example">
  <code>
    &lt;
    button class="btn" type="button"
    &gt;
    Save Changes
    &lt;
    /button
    &gt;
  </code>
</pre>

JavaScript

Highlight functions, strings and keywords.

const form = document.querySelector('form');
form.validate.setErrors({
  username: 'This username is already taken.'
});

View Code

HTML

<pre
  class="code-block"
  data-language="javascript"
  tabindex="0"
  aria-label="JavaScript example"
>
  <code>
    const form = document.querySelector('form');
form.validate.setErrors({
  username: 'This username is already taken.'
});
  </code>
</pre>

CSS

Use shared tokens in your own styles.

.card {
  padding: var(--space);
  color: var(--ink);
  border-radius: var(--radius);
}

View Code

HTML

<pre class="code-block" data-language="css" tabindex="0" aria-label="CSS example">
  <code>
    .card {
  padding: var(--space);
  color: var(--ink);
  border-radius: var(--radius);
}
  </code>
</pre>

JSON

Structured server responses remain easy to scan.

{
  "errors": {
    "username": "This username is already taken."
  },
  "success": false
}

View Code

HTML

<pre class="code-block" data-language="json" tabindex="0" aria-label="JSON example">
  <code>
    {
  "errors": {
    "username": "This username is already taken."
  },
  "success": false
}
  </code>
</pre>

Shell

Commands copy without labels or added characters.

# Start the local server
./dev --port 8080

View Code

HTML

<pre class="code-block" data-language="bash" tabindex="0" aria-label="Shell example">
  <code>
    # Start the local server
./dev --port 8080
  </code>
</pre>

Plain text

Unknown languages and plain text remain copyable.

Build something beautiful.
No syntax highlighting required.

View Code

HTML

<pre class="code-block" data-language="text" tabindex="0" aria-label="Plain text example">
  <code>
    Build something beautiful.
No syntax highlighting required.
  </code>
</pre>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.css code.css button.css code.js

Add to your page

<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/code.css">
<link rel="stylesheet" href="/library/assets/button.css">
<script defer src="/library/assets/code.js"></script>

18,349 bytes CSS including base · 28,637 bytes runtime JavaScript

Usage

Languages

Set data-language on pre.code-block. Supported languages: HTML, CSS, JavaScript, JSON and Bash; text disables highlighting. Unknown languages retain plain source.

Lifecycle and copying

Call layoutCode.refresh(root) after mounting or changing code, and layoutCode.destroy(pre) before removal. Copy uses original text, never labels or markup. When clipboard permission is unavailable the source is selected for manual copying.

Progressive enhancement

Code is readable without JavaScript. Closed disclosures highlight when opened. Files over 100 KB stay plain to keep interaction responsive. Source must be escaped in HTML; set textContent for dynamic content.

License

The self-hosted browser bundle includes Prism 1.30.0 under the MIT license. No CDN request is made by the component.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.