Code Block

Syntax-highlighted code display with line numbers, copy button, diff lines, and light/dark themes.

Basic Code Block

Preview

      js
      app.js
    

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

<div class="code-block">
  <div class="code-block-header">
    <div class="code-block-title">
      <span class="code-block-lang">js</span>
      <span>app.js</span>
    </div>
    <div class="code-block-actions">
      <button class="code-block-btn">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
        Copy
      </button>
    </div>
  </div>
  <div class="code-block-content">
    <div class="code-block-code"><span class="token-keyword">const</span> <span class="token-variable">app</span> <span class="token-operator">=</span> <span class="token-function">express</span><span class="token-punctuation">();</span>

<span class="token-variable">app</span><span class="token-punctuation">.</span><span class="token-function">get</span><span class="token-punctuation">(</span><span class="token-string">'/'</span><span class="token-punctuation">,</span> <span class="token-punctuation">(</span><span class="token-variable">req</span><span class="token-punctuation">,</span> <span class="token-variable">res</span><span class="token-punctuation">)</span> <span class="token-operator">=></span> <span class="token-punctuation">{</span>
  <span class="token-variable">res</span><span class="token-punctuation">.</span><span class="token-function">send</span><span class="token-punctuation">(</span><span class="token-string">'Hello World!'</span><span class="token-punctuation">);</span>
<span class="token-punctuation">}</span><span class="token-punctuation">);</span></div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-x-auto rounded-box font-mono text-sm leading-relaxed" style="background: #1e1e2e; color: #cdd6f4">
  <div class="flex items-center justify-between px-4 py-3" style="background: #181825; border-bottom: 1px solid #313244">
    <span class="text-xs text-gray-500">app.js</span>
    <button class="text-xs text-gray-500 hover:text-gray-300">Copy</button>
  </div>
  <pre class="p-4 m-0 overflow-visible whitespace-pre bg-transparent"><code>...</code></pre>
</div>

Requires: tw.min.css

// Copy to clipboard:
// btn.addEventListener('click', async () => {
//   await navigator.clipboard.writeText(codeEl.textContent);
//   btn.classList.add('code-block-btn-copied');
//   btn.textContent = 'Copied!';
//   setTimeout(() => { btn.classList.remove('code-block-btn-copied'); }, 2000);
// });

With Line Numbers & Highlights

Preview

def greet(name):
    # Format greeting
    message = f"Hello, {name}!"
    return message
print(greet("World"))

<div class="code-block">
  <div class="code-block-header">
    <div class="code-block-title"><span class="code-block-lang">py</span></div>
    <div class="code-block-actions">
      <button class="code-block-btn">Copy</button>
    </div>
  </div>
  <div class="code-block-content">
    <div class="code-block-line-numbers">
      <span class="code-block-line-number">1</span>
      <span class="code-block-line-number">2</span>
      <span class="code-block-line-number code-block-line-number-highlight">3</span>
      <span class="code-block-line-number code-block-line-number-highlight">4</span>
      <span class="code-block-line-number">5</span>
    </div>
    <div class="code-block-code"><span class="token-keyword">def</span> <span class="token-function">greet</span><span class="token-punctuation">(</span><span class="token-variable">name</span><span class="token-punctuation">)</span><span class="token-punctuation">:</span>
    <span class="token-comment"># Format greeting</span>
<span class="code-block-line code-block-line-highlight">    <span class="token-variable">message</span> <span class="token-operator">=</span> <span class="token-string">f"Hello, {name}!"</span></span>
<span class="code-block-line code-block-line-highlight">    <span class="token-keyword">return</span> <span class="token-variable">message</span></span>
<span class="token-function">print</span><span class="token-punctuation">(</span><span class="token-function">greet</span><span class="token-punctuation">(</span><span class="token-string">"World"</span><span class="token-punctuation">)</span><span class="token-punctuation">)</span></div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-x-auto rounded-xl font-mono text-sm leading-relaxed" style="background: #1e1e2e; color: #cdd6f4;">
  <div class="flex items-center justify-between px-4 py-3" style="background: #181825; border-bottom: 1px solid #313244;">
    <span class="text-xs uppercase tracking-wide px-2 py-0.5 rounded" style="background: #313244; color: #a6adc8; font-size: 0.6875rem;">py</span>
    <button class="text-xs px-2.5 py-1.5 rounded border-none cursor-pointer" style="color: #6c7086; background: transparent;">Copy</button>
  </div>
  <div class="flex overflow-x-auto">
    <div class="flex flex-col shrink-0 select-none py-4" style="background: rgba(0,0,0,0.2); border-right: 1px solid #313244;">
      <span class="text-right px-4 text-xs leading-relaxed" style="color: #585b70;">1</span>
      <span class="text-right px-4 text-xs leading-relaxed" style="color: #585b70;">2</span>
      <span class="text-right px-4 text-xs leading-relaxed" style="color: #a6adc8; background: rgba(139,92,246,0.15);">3</span>
      <span class="text-right px-4 text-xs leading-relaxed" style="color: #a6adc8; background: rgba(139,92,246,0.15);">4</span>
      <span class="text-right px-4 text-xs leading-relaxed" style="color: #585b70;">5</span>
    </div>
    <pre class="flex-1 m-0 p-4 overflow-visible whitespace-pre bg-transparent" style="font: inherit;"><code><span style="color: #cba6f7;">def</span> <span style="color: #89b4fa;">greet</span><span style="color: #a6adc8;">(</span><span style="color: #f38ba8;">name</span><span style="color: #a6adc8;">)</span><span style="color: #a6adc8;">:</span>
    <span style="color: #585b70; font-style: italic;"># Format greeting</span>
<span class="block px-2" style="background: rgba(139,92,246,0.15); border-left: 3px solid #8b5cf6;">    <span style="color: #f38ba8;">message</span> <span style="color: #94e2d5;">=</span> <span style="color: #a6e3a1;">f"Hello, {name}!"</span></span>
<span class="block px-2" style="background: rgba(139,92,246,0.15); border-left: 3px solid #8b5cf6;">    <span style="color: #cba6f7;">return</span> <span style="color: #f38ba8;">message</span></span>
<span style="color: #89b4fa;">print</span><span style="color: #a6adc8;">(</span><span style="color: #89b4fa;">greet</span><span style="color: #a6adc8;">(</span><span style="color: #a6e3a1;">"World"</span><span style="color: #a6adc8;">)</span><span style="color: #a6adc8;">)</span></code></pre>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for static highlighting

Diff Lines

Preview

  const config = {
    port: 3000,
    port: 8080,
    host: 'localhost',
    host: '0.0.0.0',
  };

<div class="code-block">
  <div class="code-block-content">
    <div class="code-block-code"><span class="code-block-line">  <span class="token-keyword">const</span> config <span class="token-operator">=</span> <span class="token-punctuation">{</span></span>
<span class="code-block-line code-block-line-removed">    port: <span class="token-number">3000</span>,</span>
<span class="code-block-line code-block-line-added">    port: <span class="token-number">8080</span>,</span>
<span class="code-block-line code-block-line-removed">    host: <span class="token-string">'localhost'</span>,</span>
<span class="code-block-line code-block-line-added">    host: <span class="token-string">'0.0.0.0'</span>,</span>
<span class="code-block-line">  <span class="token-punctuation">}</span><span class="token-punctuation">;</span></span></div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-x-auto rounded-xl font-mono text-sm leading-relaxed" style="background: #1e1e2e; color: #cdd6f4;">
  <pre class="m-0 p-4 overflow-visible whitespace-pre bg-transparent" style="font: inherit;"><code><span class="block px-2" style="border-left: 3px solid transparent;">  <span style="color: #cba6f7;">const</span> config <span style="color: #94e2d5;">=</span> <span style="color: #a6adc8;">{</span></span>
<span class="block px-2" style="background: rgba(248,81,73,0.15); border-left: 3px solid #f85149;"><span class="mr-2" style="color: #f85149;">-</span>    port: <span style="color: #fab387;">3000</span>,</span>
<span class="block px-2" style="background: rgba(46,160,67,0.15); border-left: 3px solid #2ea043;"><span class="mr-2" style="color: #2ea043;">+</span>    port: <span style="color: #fab387;">8080</span>,</span>
<span class="block px-2" style="background: rgba(248,81,73,0.15); border-left: 3px solid #f85149;"><span class="mr-2" style="color: #f85149;">-</span>    host: <span style="color: #a6e3a1;">'localhost'</span>,</span>
<span class="block px-2" style="background: rgba(46,160,67,0.15); border-left: 3px solid #2ea043;"><span class="mr-2" style="color: #2ea043;">+</span>    host: <span style="color: #a6e3a1;">'0.0.0.0'</span>,</span>
<span class="block px-2" style="border-left: 3px solid transparent;">  <span style="color: #a6adc8;">}</span><span style="color: #a6adc8;">;</span></span></code></pre>
</div>

Requires: tw.min.css

// No JavaScript required for diff display

Light Theme

Preview

html
<div class="card">
  <h2>Hello</h2>
</div>

<div class="code-block code-block-light">
  <div class="code-block-header">
    <div class="code-block-title"><span class="code-block-lang">html</span></div>
  </div>
  <div class="code-block-content">
    <div class="code-block-code"><span class="token-tag">&lt;div</span> <span class="token-attr-name">class</span><span class="token-operator">=</span><span class="token-attr-value">"card"</span><span class="token-tag">&gt;</span>
  <span class="token-tag">&lt;h2&gt;</span>Hello<span class="token-tag">&lt;/h2&gt;</span>
<span class="token-tag">&lt;/div&gt;</span></div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-x-auto rounded-xl font-mono text-sm leading-relaxed bg-base-100 border border-base-300" style="color: #383a42;">
  <div class="flex items-center justify-between px-4 py-3 bg-base-200 border-b border-base-300">
    <span class="text-xs uppercase tracking-wide px-2 py-0.5 rounded bg-base-300 text-base-content/60" style="font-size: 0.6875rem;">html</span>
  </div>
  <pre class="m-0 p-4 overflow-visible whitespace-pre bg-transparent" style="font: inherit;"><code><span style="color: #116329;">&lt;div</span> <span style="color: #0550ae;">class</span><span style="color: #cf222e;">=</span><span style="color: #0a3069;">"card"</span><span style="color: #116329;">&gt;</span>
  <span style="color: #116329;">&lt;h2&gt;</span>Hello<span style="color: #116329;">&lt;/h2&gt;</span>
<span style="color: #116329;">&lt;/div&gt;</span></code></pre>
</div>

Requires: tw.min.css

// No JavaScript required

Class	Description
`.code-block`	Base container (dark theme)
`.code-block-header`	Header with lang badge + actions
`.code-block-title`	File name / title area
`.code-block-lang`	Language badge
`.code-block-actions`	Action buttons container
`.code-block-btn`	Action button (copy)
`.code-block-btn-copied`	Copied success state
`.code-block-content`	Scrollable content area
`.code-block-line-numbers`	Line numbers column
`.code-block-line-number-highlight`	Highlighted line number
`.code-block-code`	Code content area
`.code-block-line-highlight`	Highlighted code line
`.code-block-line-added`	Diff: added line (green)
`.code-block-line-removed`	Diff: removed line (red)
`.code-block-sm`	Small font size
`.code-block-lg`	Large font size
`.code-block-light`	Light theme variant
`.code-block-collapsed`	Collapsed with gradient fade
`.code-block-expand`	Expand button
`.code-inline`	Inline code span
`.code-block.glass`	Glass morphism variant
`.token-*`	Syntax token colors (keyword, string, etc.)