Hùng Blog Online: Khung chứa code cho giao diện Blogger tốt nhất hiện nay

Chào mọi người, bài viết này mình chia sẻ đến mọi người một mẫu khung chứa code khá thú vị cho anh em làm trang website/blog chia sẻ mã nguồn mở và những thứ liên quan đến việc chia sẻ những dòng code khá thú vị cho anh em bạn bè được biết.

Mình sẻ hướng dẫn cho mọi người một bản PRO chuẩn xịn như GitHub + Docs tối ưu riêng nhẹ, đẹp, SEO tốt, giữ chân user cực mạnh 🚀.

🌟 TÍNH NĂNG

🎨 Giao diện giống GitHub
🌙 Dark / ☀️ Light auto
📋 Copy code
🔢 Số dòng
🏷️ Label ngôn ngữ (HTML, JS…)
📦 Thu gọn / mở rộng code
⚡ Load cực nhẹ (không thư viện ngoài)

Chúng ta bắt đầu nhé.

Bước 1. CSS PRO (copy vào Theme).


/* ===== CODE BOX PRO HUNGBLOG ===== */
.code-box {
  position: relative;
  margin: 20px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0d1117;
  border: 1px solid #30363d;
  font-size: 14px;
}

/* header */
.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #161b22;
  padding: 8px 12px;
  font-size: 13px;
  color: #8b949e;
}

.code-header .left {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.red {background:#ff5f56;}
.yellow {background:#ffbd2e;}
.green {background:#27c93f;}

.code-header .lang {
  margin-left: 10px;
  color: #58a6ff;
}

/* button */
.code-header button {
  background: #238636;
  border: none;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.code-header button:hover {
  background: #2ea043;
}

/* code */
.code-content {
  position: relative;
}

.code-content pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  color: #e6edf3;
  line-height: 1.6;
}

/* line number */
.code-content pre code {
  counter-reset: line;
  display: block;
}
.code-content pre code span {
  display: block;
  counter-increment: line;
}
.code-content pre code span::before {
  content: counter(line);
  display: inline-block;
  width: 30px;
  margin-right: 10px;
  color: #6e7681;
}

/* collapse */
.code-collapse {
  display: none;
}

/* scrollbar */
pre::-webkit-scrollbar {
  height: 6px;
}
pre::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 6px;
}

Bước 2. HTML dùng trong bài viết.


    <div class="code-box">

  <div class="code-header">
    <div class="left">
      <span class="dot red"></span>
      <span class="dot yellow"></span>
      <span class="dot green"></span>
      <span class="lang">JavaScript</span>
    </div>

    <div>
      <button onclick="copyCode(this)">Copy</button>
      <button onclick="toggleCode(this)">Ẩn</button>
    </div>
  </div>

  <div class="code-content">
    <pre><code>
<!-- Nội dung bạn muốn đặt trong khung -->
    </code></pre>
  </div>

</div>

Bước 3. Đặt `JavaScript` vào ngay trên thẻ `</body>`.


<script>
function copyCode(btn) {
  const code = btn.closest(".code-box").querySelector("code").innerText;
  navigator.clipboard.writeText(code);
  btn.innerText = "Đã copy!";
  setTimeout(() => btn.innerText = "Copy", 2000);
}

function toggleCode(btn) {
  const box = btn.closest(".code-box");
  const content = box.querySelector(".code-content");

  if (content.style.display === "none") {
    content.style.display = "block";
    btn.innerText = "Ẩn";
  } else {
    content.style.display = "none";
    btn.innerText = "Hiện";
  }
}
</script>

Bước 4. AUTO nhận diện ngôn ngữ.

Các bạn tìm dòng sau trong đoạn code.

<span class="lang">JavaScript</span>

và thay thế thành

<span class="lang" data-lang="js"></span>

Sau đó thêm đoạn Javascript này vào


<script>
document.querySelectorAll(".lang").forEach(el=>{
  const map = {
    js:"JavaScript",
    html:"HTML",
    css:"CSS",
    php:"PHP"
  };
  el.innerText = map[el.dataset.lang] || "Code";
});
</script>

Như vậy đã hoàn thành, demo tại bài viết này.