เพิ่มกล่องโค้ดพร้อมปุ่มคัดลอกคลิปบอร์ด (โดยใช้ HTML, CSS และ JS)

1.  ไปที่ มุมมอง HTML เพิ่ม CSS ลงใต้โพสต์ของคุณ

 
       <style>
          .code-box {
              position: relative;
              border-radius: 5px;
              font-family: arial;
              font-size: 14px;
              border: 1px dashed #CCCCCC;
              width: 99%;
              height: auto;
              overflow: auto;
              background: #f0f0f0;
              background-image:URL(https://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);
              padding: 5px;
              text-align: left;
              }

          pre.codex {
              color:#008000;
              word-wrap:normal;
              background-color: #0000 !important;
              line-height: 1.55;
          }

          .copy-button {
              position: absolute;
              top: 5px;
              right: 5px;
              padding: 5px 10px;
              background-color: #4CAF50;
              color: #fff;
              border: none;
              border-radius: 3px;
              cursor: pointer;
              margin: 5px;
          }
        </style>
    

2. เพิ่มฟังก์ชั่น copy code

 
<script>
    function copyCode(button) {
        // หาช่อง div ที่ปุ่มอยู่
        var codeBox = button.closest('.code-box');
        if (codeBox) {
            var codeElement = codeBox.querySelector('.codex');
            if (codeElement) {
                // สร้าง Range เพื่อเลือกข้อความ
                var range = document.createRange();
                range.selectNode(codeElement);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                document.execCommand('copy');
                window.getSelection().removeAllRanges();

                // เปลี่ยนข้อความปุ่มชั่วคราว
                button.innerText = 'Copied!';
                setTimeout(function () {
                    button.innerText = 'Copy Code';
                }, 1500);
            }
        }
    }
</script>
    

3. ไปที่ มุมมองเขียน ทุกที่ที่คุณต้องการให้ Codebox ปรากฏในบล็อกโพสต์ของคุณ ให้ใช้รหัส HTML ด้านล่าง

  <div class="code-box">
    <pre class="codex">
     
     เพิ่มโค้ดที่นี่

    </pre>

    <button class="copy-button" onclick="copyCode(this)">Copy Code</button>
  </div>