2.1 Thẻ <pre>
Các thẻ <code> và <pre> được sử dụng trong HTML để đại diện cho các đoạn mã và văn bản đã được định dạng trước. Chúng giúp cải thiện khả năng đọc và giữ nguyên định dạng của văn bản gốc, điều này đặc biệt hữu ích để hiển thị các ví dụ mã và các tài liệu kỹ thuật khác.
Thẻ <pre> (viết tắt của "preformatted text") được sử dụng để hiển thị văn bản trong HTML như cách nó đã được viết, giữ nguyên tất cả khoảng trắng, dòng và tab. Điều này đặc biệt hữu ích để đại diện cho các đoạn mã lớn hoặc văn bản đã được định dạng trước khác.
Cú pháp:
<pre>
văn bản
</pre>
Ví dụ:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
Trong ví dụ này, văn bản bên trong thẻ <pre> sẽ được hiển thị với việc giữ nguyên tất cả khoảng trắng và dòng, như nó đã được viết trong mã gốc.
Đặc điểm của thẻ <pre>:
- Thẻ
<pre>giữ nguyên tất cả khoảng trắng và dòng trong văn bản - Nó hiển thị văn bản với phông chữ có độ rộng cố định
- Thường được sử dụng cùng với thẻ
<code>để đánh dấu mã
2.2 Thẻ <code>
Thẻ <code> được sử dụng để đánh dấu các đoạn mã hoặc dữ liệu có thể được đọc máy tính bên trong văn bản. Nó thường được áp dụng để đánh dấu các dòng mã, biến, hàm và các thành phần lập trình khác.
<code>mã</code>
Ví dụ:
<p>Để hiển thị thông báo trong console, sử dụng hàm <code>console.log()</code>.</p>
Trong ví dụ này, văn bản "console.log()" sẽ được đánh dấu là mã.
Đặc điểm của thẻ <code>:
- Thẻ
<code>hiển thị văn bản với phông chữ có độ rộng cố định (thường là Courier hoặc Consolas) - Nó không giữ nguyên định dạng, như dòng hay lề
- Thẻ
<code>thường được sử dụng bên trong các thẻ khác, như<p>,<li>hoặc<pre>
2.3 Sử dụng <pre> và <code>
Để đánh dấu và định dạng các khối mã lớn hơn, các thẻ <pre> và <code> thường được sử dụng cùng nhau. Điều này cho phép giữ nguyên định dạng và đánh dấu văn bản dưới dạng mã.
Ví dụ:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
Kết quả là trình duyệt sẽ hiển thị văn bản với việc giữ nguyên định dạng và đánh dấu mã.
2.4 Tô màu cú pháp
Để tô màu cú pháp, ta có thể sử dụng các thư viện bên thứ ba như Prism.js hoặc Highlight.js, chúng sẽ tự động nhận diện và tô màu cú pháp mã trên trang web.
Ví dụ sử dụng Highlight.js:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
Kết quả là khối mã sẽ được tự động tô màu theo cú pháp JavaScript.
Các thẻ <code> và <pre> trong HTML là công cụ mạnh mẽ để hiển thị và định dạng mã và các văn bản khác với việc giữ nguyên định dạng gốc. Sử dụng thật vui nhé.
GO TO FULL VERSION