Code Display Box

Code Snippet

<!-- Code Display Box -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
<title>Code Box</title>
<style>
  .code-container {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    margin: 20px auto;
    max-width: 960px;
    background: #1e1e1e;
    color: #fff;
    font-family: 'Courier New', monospace;
  }

  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #272727;
    padding: 10px 15px;
    font-weight: bold;
  }

  .code-actions {
    display: flex;
    gap: 10px;
  }

  .code-actions button {
    background: #444;
    color: #fff;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
  }

  .code-actions button:hover {
    background: #666;
  }

  pre code {
    display: block;
    padding: 20px;
    overflow-x: auto;
  }

  @media(max-width: 600px) {
    .code-actions button {
      padding: 4px 8px;
      font-size: 10px;
    }
  }
  
  
  
  .hidden-img {
    display: none;
    width: 300px;
    height: auto;
  }
  
</style>

<div class="code-container">
  <div class="code-header">
    <span>Code Snippet</span>
    <div class="code-actions">
      <button onclick="copyCode(this)">Copy</button>
      <button onclick="downloadCode(this)">Download</button>
    </div>
  </div>
  <pre><code class="language-html">
<!-- Paste your code here -->
&lt;h1&gt;Hello, World!&lt;/h1&gt;
&lt;p&gt;This is a sample code box.&lt;/p&gt;
  </code></pre>
</div>



  
  <!-- Hidden Random Image -->


<div id="random-image-wrapper">
  <img class="hidden-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRI0xu8i41uVvyL1KANDPnyYltHD9jCiNEF5Xk9ucPtqmiGsaPlohZCMYc&s=10" alt="img1" style="display: none;" >
  <img class="hidden-img" src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.0.3" alt="img2" style="display: none;" >
  <img class="hidden-img" src="https://images.unsplash.com/photo-1542837336-d14bdf342f9b?q=80&w=757&auto=format&fit=crop&ixlib=rb-4.0.3" alt="img3" style="display: none;" >
  <img class="hidden-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3AEvIUwp0IFB531tsTxYhlGS4IqtKGsu2QUmXiSbjFZ1I0QTzrrecWghy&s=10" alt="img4" style="display: none;" >
  <img class="hidden-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAE3k-RVfzFRWkJ7vgY2C2drwdRFz8CSGEaZ5yTlyMn1PzSKl-lSld6HA&s=10" alt="img5" style="display: none;" >
  <img class="hidden-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQP-JHfsvqo7MPJOzblLPIr-QyLfwlHIB1wr-yLxgGo-MrfQNE_D3x3_Bke&s=10" alt="img6" style="display: none;">
  
  
  
</div>






  


<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script>
  function copyCode(btn) {
    const code = btn.closest('.code-container').querySelector('code').innerText;
    navigator.clipboard.writeText(code).then(() => {
      btn.innerText = 'Copied!';
      setTimeout(() => btn.innerText = 'Copy', 1500);
    });
  }

  function downloadCode(btn) {
    const code = btn.closest('.code-container').querySelector('code').innerText;
    const blob = new Blob([code], { type: "text/plain" });
    const link = document.createElement("a");
    link.download = "code-snippet.txt";
    link.href = URL.createObjectURL(blob);
    link.click();
  }
  
  
  const images = document.querySelectorAll('.hidden-img');
  const randomIndex = Math.floor(Math.random() * images.length);
  images[randomIndex].style.display = "none";

  
  

  
  
</script>
  

---

How to Use the Code Display Box Tool

Paste Your Code: Insert your HTML, CSS, JavaScript, or any code snippet into the code box to start formatting and highlighting it.

View Live Styling: The tool automatically formats your code with syntax highlighting and a neat code box for a professional look.

Copy Code: Click the "Copy" button to instantly copy your formatted code for use anywhere.

Download Code: Click the "Download" button to save your formatted snippet as a .txt file for offline use or sharing.

Responsive Design: Works seamlessly on desktops, tablets, and mobile devices, allowing you to use your code anywhere.

Benefits of Using the Code Display Box Tool

Professional Presentation: Display your code snippets neatly and in an organized manner for better readability and presentation.

Enhanced Readability: Syntax highlighting makes it easier to read and copy code correctly without mistakes.

Time-Saving Features: Copy and download options let you grab code snippets quickly without manual editing.

Fully Responsive: Works perfectly on all devices, making it accessible for use anywhere, anytime.

Lightweight & Efficient: Minimal CSS and JS make it fast-loading without slowing down your webpage.

Customizable: Easily adjust colors, fonts, button styles, and box sizes to match your website theme.

Interactive & Use Anywhere: Copy, download, and paste code snippets anywhere easily, making your blog or project more engaging.