How To Add Best Code pan

This HTML code creates a simple code editor interface with tabs for HTML, CSS, and JavaScript sections. Each tab switches the display to the respective code textarea: HTML, CSS, or JavaScript.

Add Best Code pan To The Blogger Site

The code consists of HTML markup to structure the editor interface, CSS styles for the appearance of the editor components (tabs, text areas, and buttons), and JavaScript functions to handle the display of the code when each tab is clicked and to copy the displayed code to the clipboard when the "Copy" button is clicked.

You can use this setup to display and edit HTML, CSS, and JavaScript code snippets separately in their respective text areas and copy the code to the clipboard if needed.

Scrollable Textarea

    <!-- Your HTML code here -->
    <!DOCTYPE html>
<html>
<head>
  <title>Code Editor</title>
  <style>
    /* Styles for the code editor container */
    .code-editor {
      border: 4px solid #000;
      border-radius: 10px;
      overflow: hidden;
      margin: 20px;
    }

    /* Styles for the tabs */
    .tab {
      display: inline-block;
      padding: 10px 20px;
      cursor: pointer;
      background-color: #f1f1f1;
      border: none;
      outline: none;
      transition: background-color 0.3s;
      font-size: 16px;
    }

    /* Style for active tab */
    .active {
      background-color: #ddd;
    }

    /* Style for code textarea */
    .code-textarea {
      width: 100%;
      height: 300px;
      padding: 10px;
      font-family: 'Courier New', monospace;
      border: none;
      resize: none;
      margin-top: 10px;
    }

    /* Style for the copy button */
    .copy-button {
      display: block;
      padding: 10px;
      border: none;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
      width: 100%;
      margin-top: 10px;
      border-radius: 0 0 10px 10px;
    }

    .copy-button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>

<div class="code-editor">
  <!-- Tab buttons -->
  <button class="tab active" onclick="showCode('html')">HTML</button>
  <button class="tab" onclick="showCode('css')">CSS</button>
  <button class="tab" onclick="showCode('js')">JavaScript</button>
  
  <!-- Code textarea -->
  <textarea id="htmlCode" class="code-textarea">
    <!-- Your HTML code here -->
    <h1>Hello, World!</h1>

    /* Your CSS code here */
    h1 {
      color: blue;
    }

    /* Your JavaScript code here */
    alert('Hello, World!');

Search This Blog

How To Add Best Code pan

Add Best Code pan To The Blogger Site

Labels

Comments

Post a Comment

Popular posts from this blog

Start Blog