Khung hiển thi Code có nút Copy

Khung Code mẫu

...

<div class="centered">
  <div class="highlight">
    <pre class="highlight javascript"><code>Nội dung Code</code></pre>
  </div>
</div>

...

Cách sử dụng trong Bài đăng mới trong Blogspost :

B1: Copy Code mẫu trên dán vào giao diện Trình sửa code (Chế độ xem HTML) .

B2: Chuyển sang (Chế độ Soạn thư) và thực hiện soạn code hoặc dán code vào đúng vị trí.

Cách tạo Khung hiển thi Code có nút Copy

B1: Vào trình chỉnh sửa HTML mẫu 

B2: Copy đoạn code sao dán vào trước thẻ ]]>

/*======Khung chua code có nút Copy========*/

.centered {
  display: flex;
  justify-content: center;
}

div.highlight button {
  color: #ffffff;
  box-sizing: border-box;
  transition: 0.2s ease-out;
  cursor: pointer;
  user-select: none;
  background: #228B22;
  border: 1px solid rgba(0, 0, 0, 0);
  padding: 5px 10px;
  font-size: 0.8em;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 0.15rem;
}
div.highlight>button:hover{
  color: #ffffff;
  background: #FF4500;
 }

div.highlight {
  width: 100%;
  max-height:600px;
  overflow: auto;
  position: relative;
  border-radius: 0.2rem;
  padding: 10px;
  margin: 1.5rem 0;
  font-size: 1.1em;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
  border: 2px solid #228B22;;
  box-sizing: border-box;
}

.highlight pre {
  background: #282c34;
}

pre.highlight {
  margin: 0;
}

.highlight, pre.highlight {
  background: #282c34;
  color: #FFD700;
}

B3: Copy đoạn code sao dán vào trước thẻ </body>

<script>
//code for https://spdevuk.com/blogs/how-to-add-a-copy-button-to-markdown-code-using-javascript

const copyToClipboard = str =&gt; {
  const el = document.createElement(&#39;textarea&#39;); // Create a textarea element
  el.value = str; // Set its value to the string that you want copied
  el.setAttribute(&#39;readonly&#39;, &#39;&#39;); // Make it readonly to be tamper-proof
  el.style.position = &#39;absolute&#39;;
  el.style.left = &#39;-9999px&#39;; // Move outside the screen to make it invisible
  document.body.appendChild(el); // Append the textarea element to the HTML document
  const selected =
    document.getSelection().rangeCount &gt; 0 // Check if there is any content selected previously
      ? document.getSelection().getRangeAt(0) // Store selection if found
      : false; // Mark as false to know no selection existed before
  el.select(); // Select the textarea content
  document.execCommand(&#39;copy&#39;); // Copy - only works as a result of a user action (e.g. click events)
  document.body.removeChild(el); // Remove the textarea element
  if (selected) {
    // If a selection existed before copying
    document.getSelection().removeAllRanges(); // Unselect everything on the HTML document
    document.getSelection().addRange(selected); // Restore the original selection
  }
};

function handleCopyClick(evt) {
  // get the children of the parent element
  const { children } = evt.target.parentElement;
  // grab the first element (we append the copy button on afterwards, so the first will be the code element)
  // destructure the innerText from the code block
  const { innerText } = Array.from(children)[0];

  // copy all of the code to the clipboard
  copyToClipboard(innerText);
  // alert to show it worked, but you can put any kind of tooltip/popup
  alert(&#39;Dữ liệu đã COPY vào bộ nhớ tạm&#39;);
}

// get the list of all highlight code blocks
const highlights = document.querySelectorAll(&#39;div.highlight&#39;);
// add the copy button to each code block
highlights.forEach(div =&gt; {
  // create the copy button
  const copy = document.createElement(&#39;button&#39;);
  copy.innerHTML = &#39;Copy&#39;;
  // add the event listener to each click
  copy.addEventListener(&#39;click&#39;, handleCopyClick);
  // append the copy button to each code block
  div.append(copy);
});

</script>

B4: Lưu lại

B5: Cách sử dụng như đã trình bày ở đầu trang