Codeblock

Syntax-highlighted code blocks powered by Prism.js. Ships with a macOS-style chrome, copy-to-clipboard, minimize, and fullscreen expand — all in a frosted-glass aesthetic.

With Toolbar

The full variant includes the macOS traffic-light buttons, minimize, and fullscreen controls.

function greet(name) {
  const msg = `Hello, ${name}!`;
  console.log(msg);
  return msg;
}

greet('World');

<div class="codeblock" style="width:100%;max-width:560px">
  <div class="pre-top">
    <div class="pre-top-btns">
      <span class="pre-btn-red close-btn"></span>
      <span class="pre-btn-orange minimize-btn"></span>
      <span class="pre-btn-green maximize-btn"></span>
    </div>
    <button class="btn btn-sm btn-glass pre-copy-btn">Copy</button>
  </div>
  <div class="pre-content">
    <pre data-language="javascript">// your code here</pre>
  </div>
</div>

Inline (No Toolbar)

The minimal variant floats a copy button inside the code area — ideal for reference snippets.

.btn-primary {
  background: var(--color-primary, #0071e3);
  color: var(--color-text-light, #fff);
  border-radius: 9999px;
  padding: 0.5rem 1.2rem;
}

<div class="codeblock">
  <div class="pre-content">
    <button class="btn btn-sm btn-glass pre-copy-btn btn-in-pre">Copy</button>
    <pre data-language="css">/* your code here */</pre>
  </div>
</div>

Supported Languages

Codeblocks use Prism.js for highlighting. Set the language via the data-language attribute on the <pre> tag. Supported values include: html, css, javascript, typescript, bash, json, python, and many more.

Initialisation

import { initCodeblocks } from '@kerkhoff-ict/solora/dist/index.js';

// Runs syntax highlighting + wires up all controls
initCodeblocks();

📋 Copy feedback The copy button automatically changes to "Copied!" for 1.2 seconds after a successful clipboard write, then reverts to its original label.