Mục lục
1. Nạp PrismJS từ CDN
Chèn vào cuối thẻ <head> của index.html (và các bài khác nếu cần):
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-markup.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>
Tuỳ ngôn ngữ cần highlight, bạn nạp thêm file tương ứng (PHP, Python, Bash…)
2. Cấu trúc hiển thị code
<pre class="code-block">
<code class="language-css">
body {
background: #fff;
color: #111;
}
</code>
</pre>
3. Thêm nút Copy
Chèn HTML nút vào mỗi block code (có thể thủ công hoặc script auto):
<div class="code-wrapper">
<button class="copy-btn">Copy</button>
<pre><code class="language-markup">
<h1>Hello World</h1>
</code></pre>
</div>
4. CSS nút Copy
.code-wrapper {
position: relative;
}
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
font-size: 0.8rem;
padding: 2px 8px;
cursor: pointer;
}5. JavaScript xử lý copy
Chèn vào cuối trang:
<script>
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', () => {
const code = btn.nextElementSibling.querySelector('code').innerText;
navigator.clipboard.writeText(code).then(() => {
btn.innerText = 'Đã copy!';
setTimeout(() => btn.innerText = 'Copy', 1500);
});
});
});
</script>
6. Gợi ý theme Prism đẹp hơn (tuỳ chọn)
- Dùng
prism-tomorrowhoặcokaidianếu blog dùng dark mode - Xem thêm:
Vậy là bạn đã có hệ thống hiển thị code sạch – đẹp – có copy cực nhanh. Bài tiếp theo sẽ giúp bạn tối ưu hiệu suất toàn site, preload đúng cách, giảm tải JS không cần thiết.
Chúc bạn hiển thị code đẹp như sách – và đúng chất blog kỹ thuật hiện đại!
Bình luận