Code Snippets Syntax Highlighting
Làm nổi bật mã nguồn với giao diện trực quan, dễ đọc và chuyên nghiệp. Khám phá cách sử dụng syntax highlighting để trình bày HTML, CSS và JavaScript ngay trên website của bạn.
Bạn đang tìm cách hiển thị code đẹp mắt trên website, blog lập trình hoặc trang chia sẻ thủ thuật? Công cụ highlight code giúp phân biệt cú pháp, tăng khả năng đọc và giúp người dùng sao chép các đoạn mã thuận tiện hơn.
Có gì mới?
Trình bày nhanh chóng
Tạo các khối code rõ ràng, phù hợp với bài hướng dẫn, tài liệu kỹ thuật và nội dung dành cho lập trình viên.
Giao diện linh hoạt
Tổ chức ví dụ mã nguồn theo từng ngôn ngữ và từng phần nội dung để người đọc dễ theo dõi.
Tô sáng cú pháp
Hỗ trợ trình bày các đoạn HTML, CSS, JavaScript và những ngôn ngữ được component hỗ trợ.
Sao chép mã nguồn
Kết hợp nút Copy code để người đọc lấy đoạn mã nhanh chóng mà không phải chọn thủ công từng dòng.
1. Tích hợp Highlight Code
DeckDeckGo Highlight Code là Web Component giúp hiển thị mã nguồn với chức năng tô sáng cú pháp. Nếu bạn đã thêm thư viện vào theme Blogger, không cần tải thư viện thêm một lần nữa trong từng bài viết.
<deckgo-highlight-code language="html">
<code slot="code">
<h1>Hello CEXCAL</h1>
</code>
</deckgo-highlight-code>
2. Ví dụ mã nguồn HTML
HTML dùng để xây dựng cấu trúc của trang web. Khi trình bày HTML trong bài viết, cần escape các ký tự đặc biệt để trình duyệt hiển thị mã nguồn thay vì thực thi nó.
<section class="welcome">
<h1>Welcome to CEXCAL</h1>
<p>Explore our developer resources.</p>
</section>
3. Ví dụ mã nguồn CSS
CSS giúp kiểm soát màu sắc, khoảng cách, kiểu chữ và bố cục. Bạn có thể sử dụng các quy tắc CSS để xây dựng giao diện nhất quán trên máy tính và thiết bị di động.
.cex-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
background: #2563eb;
color: #ffffff;
font-weight: 700;
cursor: pointer;
}
.cex-button:hover {
background: #1d4ed8;
}
4. Ví dụ mã nguồn JavaScript
JavaScript bổ sung các tương tác cho website. Ví dụ dưới đây minh họa cách tạo một thông báo đơn giản khi người dùng nhấn nút.
const button = document.querySelector(
".cex-button"
);
if (button) {
button.addEventListener("click", function () {
console.log("Hello CEXCAL!");
});
}
5. Cách sử dụng trên Website
Để nội dung hiển thị đúng, hãy làm theo các bước sau:
const button = document.querySelector(
".cex-button"
);
if (button) {
button.addEventListener("click", function () {
console.log("Hello CEXCAL!");
});
}
- Tích hợp thư viện: thêm script DeckDeckGo vào theme và chỉ tải một lần.
-
Soạn bài ở chế độ HTML:
chèn component
deckgo-highlight-codecùng phần tửcode slot="code". -
Chọn ngôn ngữ:
khai báo ngôn ngữ phù hợp như
html,csshoặcjavascript. - Kiểm tra nút Copy: thử sao chép và dán mã vào trình soạn thảo để xác nhận nội dung không bị mất ký tự hoặc xuống dòng.
<, > và
& cho các ký tự tương ứng trong
nội dung mã nguồn. Với CSS và JavaScript thông thường,
hãy giữ nguyên cú pháp của ngôn ngữ.
6. Kết luận
Syntax highlighting giúp các bài viết kỹ thuật trở nên chuyên nghiệp, dễ đọc và dễ áp dụng hơn. Khi kết hợp component hiển thị code với chức năng sao chép, bạn có thể mang đến trải nghiệm thuận tiện cho người đọc mà vẫn giữ nội dung bài viết gọn gàng.
Code rõ ràng. Chia sẻ dễ dàng.
Tiếp tục khám phá các thủ thuật lập trình, công cụ hữu ích và hướng dẫn công nghệ tại CEXCAL.