Free Component

Code Snippet Box

A developer code block with terminal dots, language tag, line numbers, syntax highlighting colours, and one-click animated copy confirmation.

dark
code
syntax
snippet
copy
developer

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="code-box" id="codeBox">
  <div class="code-header">
    <div class="code-dots"><i></i><i></i><i></i></div>
    <span class="code-lang">TypeScript</span>
    <button class="copy-code-btn" id="copyCodeBtn" aria-label="Copy code to clipboard">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
      <span class="copy-label">Copy</span>
    </button>
  </div>
  <pre class="code-pre"><code><span class="c-line"><span class="c-ln">1</span><span class="c-k">import</span> { createClient } <span class="c-k">from</span> <span class="c-s">"@supabase/supabase-js"</span>;</span>
<span class="c-line"><span class="c-ln">2</span></span>
<span class="c-line"><span class="c-ln">3</span><span class="c-k">const</span> supabase = <span class="c-f">createClient</span>(</span>
<span class="c-line"><span class="c-ln">4</span>  process.env.<span class="c-p">SUPABASE_URL</span>!,</span>
<span class="c-line"><span class="c-ln">5</span>  process.env.<span class="c-p">SUPABASE_ANON_KEY</span>!</span>
<span class="c-line"><span class="c-ln">6</span>);</span>
<span class="c-line"><span class="c-ln">7</span></span>
<span class="c-line"><span class="c-ln">8</span><span class="c-c">// Fetch realtime records</span></span>
<span class="c-line"><span class="c-ln">9</span><span class="c-k">const</span> { data, error } = <span class="c-k">await</span> supabase</span>
<span class="c-line"><span class="c-ln">10</span>  .<span class="c-f">from</span>(<span class="c-s">"templates"</span>)</span>
<span class="c-line"><span class="c-ln">11</span>  .<span class="c-f">select</span>(<span class="c-s">"*"</span>);</span></code></pre>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a dark terminal-style code snippet block with syntax highlighting and a 1-click copy button using HTML, CSS and vanilla JavaScript.

Requirements:
- A dark card (#090d16) with 16px radius, soft drop shadow and 1px border.
- Header with red, amber, green window dots, uppercase language tag ("TypeScript"), and a "Copy" button.
- Preformatted code display with line numbers (.c-ln with user-select: none) and syntax colors for keywords, strings, functions, and comments.
- JavaScript 1-click copy: reads code text excluding line numbers using navigator.clipboard.writeText.
- Visual feedback on copy: button turns green and label switches to "Copied!" for 2 seconds.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Lay out a dark container with a top chrome bar containing window dots and a copy button.
2
Wrap each line in a span with a line-number child that has user-select: none so line numbers are not selected during manual copy.
3
Highlight code tokens with semantic span classes for keywords, strings, and functions.
4
Use navigator.clipboard.writeText to copy the code text to the clipboard.
5
Temporarily change the copy button's appearance to provide clear user feedback.

Customisation tips

Use user-select: none on line numbers so visitors copying text manually get only code.
Keep horizontal overflow: auto on the pre tag so long lines scroll without breaking card layout.
Support keyboard copy with accessible aria-label on the button.