×

Cách sử dụng thẻ <code> để hiển thị mã nguồn trong HTML

Avatar of admin
admin 1 Views

Trong thiết kế và phát triển web, đôi khi bạn muốn hiển thị đoạn mã nguồn cho người dùng của mình. HTML cung cấp một thẻ tên là <code> để làm điều này một cách dễ dàng và chính xác. Thẻ này là một giải pháp tuyệt vời để hiển thị mã nguồn vì nó giúp mã hiển thị đúng định dạng và giữ nguyên các khoảng trắng và ký tự đặc biệt.

Sử dụng thẻ <code>

Dưới đây là cách sử dụng thẻ <code> để hiển thị đoạn mã nguồn:

<p>Đây là một đoạn mã HTML:</p>
<pre><code>
<html>
  <head>
    <title>Tiêu đề trang</title>
  </head>
  <body>
    <h1>Chào mừng bạn đến với trang web của tôi!</h1>
  </body>
</html>
</code></pre>

Trong ví dụ trên, đoạn mã HTML sẽ xuất hiện trong trình duyệt với định dạng giống như chúng ta nhập vào, bao gồm cả khoảng trắng và xuống dòng.

Thẻ <pre> và <code>

Một vấn đề xuất hiện khi sử dụng chỉ mỗi thẻ <code> là nó không giữ nguyên khoảng trắng và dòng mới. Để khắc phục điều này, ta cần kết hợp với thẻ <pre>, từ viết tắt của "preformatted text". Thẻ <pre> bảo đảm rằng các khoảng trắng và dòng mới sẽ được bảo toàn y hệt như khi gõ vào trong phần mã.

Ví dụ sử dụng:

<p>Đây là một đoạn mã JavaScript:</p>
<pre><code>
function chaoMung() {
  alert("Chào mừng bạn đến với trang web của tôi!");
}
</code></pre>

Kết hợp CSS để cải thiện hiển thị

Bạn có thể sử dụng CSS để làm cho đoạn mã trông rõ ràng và dễ đọc hơn. Dưới đây là một ví dụ về cách bạn có thể làm điều đó:

<style>
  pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 10px;
    overflow-x: auto;
  }
  code {
    font-family: 'Courier New', Courier, monospace;
    color: #c7254e;
    background-color: #f9f2f4;
  }
</style>

Khi bạn kết hợp CSS này với HTML, đoạn mã sẽ hiện ra với một nền màu xám nhạt, đường viền và chữ màu đỏ, giúp người đọc dễ dàng phân biệt đoạn mã từ phần còn lại của trang.

Kết luận

Sử dụng thẻ <code> kết hợp với <pre> là một phương pháp hiệu quả và dễ dàng để hiển thị mã nguồn trên trang web của bạn. Bằng cách này, bạn không chỉ làm cho mã của mình dễ đọc và dễ hiểu hơn mà còn giúp người đọc dễ dàng sao chép và dán đoạn mã mà không gặp phải bất kỳ lỗi định dạng nào. Bổ sung thêm CSS sẽ càng làm cho việc hiển thị mã trông chuyên nghiệp hơn và dễ nhìn hơn.

Comments

Bài viết liên quan