Chia Sẻ Khung Đựng Code Đẹp Mắt (Có Nút Copy) Nhiều Ngôn Ngữ Code Siêu Dễ Dàng

Bạn là một blogger chuyên chia sẻ về lập trình, thủ thuật máy tính? Bạn có thấy mệt mỏi khi những đoạn code bạn chia sẻ trên blog trông thật đơn điệu và khó đọc không? Hơn nữa, độc giả của bạn phải bôi đen và copy một cách thủ công, đôi khi còn sai sót.

Đã đến lúc nâng cấp blog của bạn lên một tầm cao mới!

Trong bài viết này, mình sẽ hướng dẫn bạn cách tạo một khung hiển thị code (code widget) cực kỳ chuyên nghiệp:

• Highlight Cú Pháp: Code sẽ có nhiều màu sắc, tự động nhận diện ngôn ngữ (Javascript, CSS, Python,...) giúp người đọc dễ dàng theo dõi.

• Nút "Copy Code": Chỉ với một cú nhấp chuột, độc giả có thể sao chép toàn bộ đoạn code một cách chính xác.

• Giao Diện Hiện Đại: Khung code có thiết kế tối giản, hiện đại và dễ dàng tùy biến.

Điều tuyệt vời nhất là gì? Bạn chỉ cần cài đặt một lần duy nhất và sau đó có thể sử dụng mãi mãi cho mọi bài viết. Hãy cùng bắt đầu nhé!

---

Hướng Dẫn Cài Đặt (Chỉ làm 1 lần)

Chúng ta sẽ thực hiện việc này bằng cách chèn một đoạn mã đã được gộp sẵn (bao gồm cả CSS và Javascript) vào theme Blogger của bạn.

Bước 1: Mở trình chỉnh sửa HTML của Theme

1. Tại trang quản trị Blogger, đi tới mục Chủ đề (Theme).

2. Nhấp vào nút mũi tên bên cạnh "Tùy chỉnh" và chọn Chỉnh sửa HTML (Edit HTML).

Bước 2: Dán mã cài đặt

1. Trong trình chỉnh sửa HTML, hãy kéo xuống gần cuối cùng cho đến khi bạn tìm thấy thẻ đóng </body>.

2. Sao chép toàn bộ khối mã dưới đây và dán nó vào ngay trước thẻ </body>.

HTML

<style type="text/css">
/* CSS cho khung chứa code và nút copy */
.code-container {
    position: relative;
    background-color: #2d2d2d;
    border-radius: 8px;
    margin: 25px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* Định dạng chung cho thẻ <pre> của PrismJS */
pre[class*="language-"] {
    margin: 0 !important;
    padding: 20px !important;
    padding-top: 50px !important;
    border-radius: 8px;
    border: none !important;
    font-size: 14px;
    scrollbar-width: thin;
    scrollbar-color: #888 #555;
}
pre[class*="language-"]::-webkit-scrollbar { width: 8px; height: 8px; }
pre[class*="language-"]::-webkit-scrollbar-track { background: #555; }
pre[class*="language-"]::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; border: 2px solid #555; }
/* Nút Copy Code */
.copy-button {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 8px 12px;
    background-color: #6a6a6a;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-family: sans-serif;
    transition: background-color 0.2s, transform 0.1s;
    z-index: 10;
}
.copy-button:hover { background-color: #8a8a8a; }
.copy-button:active { transform: scale(0.95); }
.copy-button.copied { background-color: #4CAF50; }
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.code-container').forEach(container => {
        const copyButton = container.querySelector('.copy-button');
        const codeBlock = container.querySelector('code');
        if (copyButton && codeBlock) {
            copyButton.addEventListener('click', () => {
                const codeToCopy = codeBlock.innerText.replace(/<br\s*\/?>/ig, "");
                navigator.clipboard.writeText(codeToCopy).then(() => {
                    copyButton.textContent = 'Đã chép!';
                    copyButton.classList.add('copied');
                    setTimeout(() => {
                        copyButton.textContent = 'Copy Code';
                        copyButton.classList.remove('copied');
                    }, 2000);
                });
            });
        }
    });
});
//]]>
</script>

Bước 3: Lưu lại

Nhấp vào biểu tượng Lưu (Save) ở góc dưới bên phải.

Vậy là xong! Theme của bạn đã được "trang bị tận răng" để hiển thị code một cách chuyên nghiệp.

---

Cách Sử Dụng Trong Bài Viết

Bây giờ, mỗi khi bạn muốn chèn một đoạn code vào bài viết mới, hãy làm theo các bước đơn giản sau:

1. Trong trình soạn thảo bài viết, hãy chuyển sang chế độ "Chế độ xem HTML" (biểu tượng <>).

2. Sao chép đoạn mã mẫu dưới đây và dán vào vị trí bạn muốn hiển thị code.

HTML

<div class="code-container">
    <pre><code class="language-css">
function helloWorld() {
  console.log("Hello from my awesome blog!");
}

helloWorld();

</code></pre>
    <button class="copy-button">Copy Code</button>
</div>

Quan trọng:

• Thay đổi ngôn ngữ: Sửa class="language-javascript" thành ngôn ngữ tương ứng với code của bạn. Ví dụ: language-css, language-html, language-python,... Thư viện PrismJS sẽ tự động nhận diện và tô màu cho đúng.

• Dán code của bạn: Xóa đoạn code ví dụ và dán code của bạn vào khu vực đã được đánh dấu.

  Mẹo nhỏ: Đối với code HTML, bạn cần "escape" các ký tự < và >. Hãy dùng một công cụ online như HTML Escape Tool để chuyển mã code của bạn trước khi dán vào bài viết nhé.

---

Lời Kết

Chỉ với vài bước đơn giản, bạn đã có thể thay đổi hoàn toàn cách mà độc giả tương tác với những đoạn code trên blog của mình. Việc này không chỉ giúp blog của bạn trông chuyên nghiệp hơn mà còn cải thiện đáng kể trải nghiệm người dùng.

Chúc các bạn thành công và viết blog vui vẻ!