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.
* Please Don't Spam Here. All the Comments are Reviewed by Admin.