Cách thêm khung chứa code có nút copy cho Blogger

N

hiều bạn vẫn tìm cho mình kiểu nào đó để làm đẹp cho khung chứa code, và có rất nhiều đề xuất từ các kết quả tìm kiếm để bạn thử và lựa chọn. Hôm nay, mình cũng đề xuất với bạn một kiểu khác khá hữu ích. Tiện ích này vừa làm cho code dễ nhìn vừa đính kèm nút Copy tiện lợi. Mình lười mô tả quá, có gì bạn cứ xem phần khung code của mình dưới đây. 

 Để thêm vào tiện ích này, bạn làm như sau: 

 Bước 1: Tìm thẻ ]]></b:skin> và thêm TRÊN nó đoạn code sau:

pre {
  --copy-text: "Copy";
  --copied-text: "Copied!";
  --code-bg: #2a2833;
  --code-color: #9a92be;
  --code-color-comment: #787878;
  --code-color-string: #ffcd81;
  --code-color-selector: #a38eff;
  --code-color-property: #a38eff;
  --code-color-tag: #6a6684;
  --code-color-tag-name: #eeebfe;
  --code-color-attr: #c3b6ff;
  --code-color-class: #eeebff;
  --code-color-number: #ffcd95;
  position: relative;
  font-family: SFMono-Regular, monospace;
}

pre > code {
  background-color: var(--code-bg);
  color: var(--code-color);
  display: block;
  overflow-x: auto;
  white-space: pre;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.hljs-copy {
  position: absolute;
  border: 0 none;
  inset: 0.5rem 0.5rem auto auto;
  padding: 0.5rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: 0.3s background-color;
  font-size: 14px;
}

.hljs-copy:hover { background-color: rgba(0, 0, 0, 0.75) }
.hljs-copy::before { content: var(--copy-text) }
.hljs-copy.is-copied::before { content: var(--copied-text) }

.hljs-name,
.hljs-section { color: var(--code-color-tag-name) }
.hljs-tag { color: var(--code-color-tag) }
.hljs-selector-class { color: var(--code-color-class) }
.hljs-number { color: var(--code-color-number) }

.hljs-comment,
.hljs-meta { color: var(--code-color-comment) }

.hljs-emphasis,
.hljs-quote,
.hljs-string,
.hljs-strong,
.hljs-template-variable,
.hljs-variable { color: var(--code-color-string) }

.hljs-keyword,
.hljs-selector-tag,
.hljs-type { color: var(--code-color-selector) }

.hljs-attribute,
.hljs-bullet,
.hljs-literal,
.hljs-symbol { color: var(--code-color-property) }

.hljs-attr,
.hljs-selector-attr,
.hljs-selector-id,
.hljs-selector-pseudo,
.hljs-title { color: var(--code-color-attr) }

Bước 2: Tìm </body> và thêm TRÊN nó đoạn code sau:

<script>/*<![CDATA[*/
async function initHighlight() {
  const loadScript = () => new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js'
    script.onload = resolve
    script.onerror = reject
    document.body.appendChild(script)
  })

  try {
    await loadScript()
    hljs.highlightAll()
  } catch (error) {
    console.error(error)
  }
}

function addCopyButtons (codeBlock) {
  if (!navigator || !navigator.clipboard) return

  const clipboard = navigator.clipboard
  const $button = document.createElement('button')
  $button.className = 'hljs-copy'

  $button.addEventListener('click', function () {
    clipboard.writeText(codeBlock.textContent).then(function () {
      $button.blur()
      $button.classList.add('is-copied')
      $button.disabled = true

      setTimeout(function () {
        $button.disabled = false
        $button.classList.remove('is-copied')
      }, 2000)
    })
  })

  const pre = codeBlock.parentNode
  pre.insertBefore($button, pre.firstChild)
}

function initCodeBlocks () {
  const codeBlocks = document.querySelectorAll('pre > code')
  if (codeBlocks.length === 0) return

  initHighlight()
  
  codeBlocks.forEach(function (codeBlock) {
    addCopyButtons(codeBlock)
  })
}

initCodeBlocks()/*]]>*/
</script>

Bước 3: Cách sử dụng 

 

Khi đăng bài, bạn chỉ cần làm như sau:

<pre><code>
  // Nội dung code 
</code></pre>

Chúc bạn thành công! 

Vui lòng để lại bình luận để chúng ta cùng chia sẻ cảm nghĩ của mình về chủ đề này nhé!

Xem bài viết gốc của tác giả Zkeations tại đây.