Học HTML, CSS từ Zero Tới Hero
- Thẻ code
- Highlight code với PrismJS
Tài nguyên trong bài học:
Thẻ code
Thẻ <code> trong HTML được sử dụng để thể hiện các đoạn code trong nội dung trang web. Ví dụ như trang web này, bạn sẽ thấy rất nhiều ví dụ có đề cập tới các đoạn code HTML.
Có 2 cách sử dụng:
- Thể hiện code trong một đoạn văn
- Thể hiện một khối code độc lập
Ví dụ, code trong đoạn văn:
<p>Thẻ <code><h1></code> là tiêu đề chính</p>
<p>Thẻ danh sách là <code><ul></code> và <code><ol></code></p>
Thẻ <h1> là tiêu đề chính
Thẻ danh sách là <ul> và <ol>
và thể hiện một khối code độc lập:
<pre>
<code><img
src="https://htmlcss.fullstack.edu.vn/assets/f8_icon.png"
width="100"
height="100"
alt="F8"
/></code>
</pre>
<img
src="https://htmlcss.fullstack.edu.vn/assets/f8_icon.png"
width="100"
height="100"
alt="F8"
/>
Công cụ chuyển HTML sang HTML Entities (HTML Escape):
Highlight code với PrismJS
Trong phần này, chúng ta sẽ sử dụng thư viện PrismJS, một thư viện chuyên dụng cho việc Highlight code và có hỗ trợ hầu hết các ngôn ngữ phổ biến.
Highlight code là làm cho code trở nên có màu sắc như ví dụ ở dưới đây.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Code with PrismJS</title>
<!-- Bước 1: Nhúng code CSS của PrismJS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css">
</head>
<body>
<!-- Bước 3: Thêm class="language-html" cho thẻ <code> -->
<pre>
<code class="language-html"><img
src="https://htmlcss.fullstack.edu.vn/assets/f8_icon.png"
width="100"
height="100"
alt="F8"
/></code>
</pre>
<!-- Bước 2: Nhúng code JavaScript của PrismJS -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html><img
src="https://htmlcss.fullstack.edu.vn/assets/f8_icon.png"
width="100"
height="100"
alt="F8"
/>Chi tiết cách làm các bạn xem trong video bài học nhé.
Trong video sau, mình sẽ nói về:
- Cách mình tìm ra thư viện PrismJS
- Làm sao mình biết cách sử dụng thư viện PrismJS
Tóm tắt
- Thẻ
<code>trong HTML được sử dụng để thể hiện các đoạn code trong nội dung trang web. - Có 2 trường hợp sử dụng thẻ
<code>:- Trong một đoạn văn:
<p>Đoạn văn có <code>đoạn code</code></p> - Khối code độc lập:
<pre><code>Nội dung khối code</code></pre>
- Trong một đoạn văn:
- Có thể sử dụng thư viện PrismJS (prismjs.com) để Highlight code, thư viện này hỗ trợ hầu hết các ngôn ngữ phổ biến.
Nhận xét