Ví dụ khối mã Blog

1604 từ
8 phút
Ví dụ khối mã Blog

Tại đây, chúng ta sẽ khám phá cách sử dụng Expressive Code để hiển thị các khối mã. Các ví dụ được cung cấp dựa trên tài liệu chính thức, bạn có thể tham khảo để biết thêm chi tiết.

Expressive Code#

Tô sáng cú pháp#

Tô sáng cú pháp

Tô sáng cú pháp thông thường#

console.log('Đoạn mã này có tính năng tô sáng cú pháp!')

Hiển thị chuỗi thoát ANSI#

Terminal window
Standard ANSI colors:
- Dimmed: Black Red Green Yellow Blue Magenta Cyan White
- Foreground: Black Red Green Yellow Blue Magenta Cyan White
- Background: Black Red Green Yellow Blue Magenta Cyan White
- Reversed: Black Red Green Yellow Blue Magenta Cyan White
8-bit colors (showing colors 160-171 as an example):
- Dimmed: 160 161 162 163 164 165 166 167 168 169 170 171
- Foreground: 160 161 162 163 164 165 166 167 168 169 170 171
- Background: 160 161 162 163 164 165 166 167 168 169 170 171
- Reversed: 160 161 162 163 164 165 166 167 168 169 170 171
24-bit colors (full RGB):
- Dimmed: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Foreground: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Background: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Reversed: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
Font styles:
- Default
- Bold
- Dimmed
- Italic
- Underline
- Reversed
- Strikethrough

Khung trình soạn thảo và terminal#

Khung trình soạn thảo và terminal

Khung trình soạn thảo mã#

my-test-file.js
console.log('Ví dụ về thuộc tính tiêu đề.')

src/content/index.html
<div>Ví dụ về chú thích tên tệp.</div>

Khung terminal#

Terminal window
echo "Khung terminal này không có tiêu đề."

Ví dụ về terminal PowerShell
Write-Output "Cái này có tiêu đề!"

Ghi đè loại khung#

echo "Thấy chưa, không có khung :)"

PowerShell Profile.ps1
# Nếu không ghi đè, đây sẽ là một khung terminal.
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Đánh dấu văn bản và dòng#

Đánh dấu văn bản và dòng

Đánh dấu toàn bộ dòng và phạm vi dòng#

// Dòng 1 - định vị bằng số dòng
// Dòng 2
// Dòng 3
// Dòng 4 - định vị bằng số dòng
// Dòng 5
// Dòng 6
// Dòng 7 - định vị bằng phạm vi "7-8"
// Dòng 8 - định vị bằng phạm vi "7-8"

Chọn loại đánh dấu dòng (mark, ins, del)#

line-markers.js
function demo() {
console.log('Dòng này được đánh dấu là đã xóa.')
// Dòng này và dòng tiếp theo được đánh dấu là đã thêm.
console.log('Đây là dòng được thêm thứ hai.')
return 'Dòng này sử dụng kiểu đánh dấu mặc định trung tính.'
}

Thêm nhãn cho đánh dấu dòng#

labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Thêm nhãn dài trên một dòng riêng#

labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Sử dụng cú pháp tương tự diff#

Dòng này sẽ được đánh dấu là đã thêm
Dòng này sẽ được đánh dấu là đã xóa
Đây là dòng thông thường

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
no whitespace will be removed either

Kết hợp tô sáng cú pháp với cú pháp tương tự diff#

function thisIsJavaScript() {
// Toàn bộ khối sẽ được tô sáng cú pháp JavaScript,
// và chúng ta vẫn có thể thêm đánh dấu diff cho nó!
console.log('Mã cũ cần xóa')
console.log('Mã mới sáng bóng!')
}```

Đánh dấu văn bản riêng lẻ trong dòng#

function demo() {
// Đánh dấu bất kỳ đoạn văn bản nào được chỉ định trong dòng
return 'Hỗ trợ nhiều vị trí khớp với đoạn văn bản được chỉ định';
}

Biểu thức chính quy#

console.log('Các từ yesyep sẽ được đánh dấu.')

Escape dấu gạch chéo phải#

Terminal window
echo "Test" > /home/test.txt

Chọn loại đánh dấu nội tuyến (mark, ins, del)#

function demo() {
console.log('Đây là các kiểu đánh dấu thêm và xóa');
// Câu lệnh return sử dụng kiểu đánh dấu mặc định
return true;
}

Tự động xuống dòng#

Tự động xuống dòng

Cấu hình tự động xuống dòng cho từng khối#

// Ví dụ bật tính năng xuống dòng
function getLongString() {
return 'Đây là một chuỗi rất dài, có thể sẽ không vừa với không gian hiển thị nếu khung chứa không đủ rộng'
}

// Ví dụ với wrap=false
function getLongString() {
return 'Đây là một chuỗi rất dài, có thể sẽ không vừa với không gian hiển thị nếu khung chứa không đủ rộng'
}

Cấu hình thụt lề khi xuống dòng#

// Ví dụ preserveIndent (được bật mặc định)
function getLongString() {
return 'Đây là một chuỗi rất dài, có thể sẽ không vừa với không gian hiển thị nếu khung chứa không đủ rộng'
}

// Ví dụ preserveIndent=false
function getLongString() {
return 'Đây là một chuỗi rất dài, có thể sẽ không vừa với không gian hiển thị nếu khung chứa không đủ rộng'
}

Các phần có thể thu gọn#

Các phần có thể thu gọn

5 collapsed lines
// Tất cả đoạn mã thiết lập mẫu này sẽ được thu gọn
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// Phần mã này mặc định được hiển thị
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// Bạn có thể có nhiều phần có thể thu gọn
3 collapsed lines
const a = 1
const b = 2
const c = a + b
// Phần này sẽ luôn được hiển thị
console.log(`Kết quả tính toán: ${a} + ${b} = ${c}`)
return c
}
4 collapsed lines
// Tất cả mã cho đến cuối khối sẽ lại được thu gọn
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'Kết thúc đoạn mã mẫu' })

Số dòng#

Số dòng

Hiển thị số dòng cho từng khối#

// Khối mã này sẽ hiển thị số dòng
console.log('Lời chào từ dòng 2!')
console.log('Tôi đang ở dòng 3')

// Khối này tắt số dòng
console.log('Xin chào?')
console.log('Xin lỗi, bạn có biết tôi đang ở dòng mấy không?')

Thay đổi số dòng bắt đầu#

console.log('Lời chào từ dòng 5!')
console.log('Tôi đang ở dòng 6')

Nhóm khối mã bằng Tab#

Được cung cấp bởi rehype-code-group, cú pháp tương thích với nhóm mã của VitePress: bao bọc nhiều khối mã bằng ::: code-group labels=[...] để hợp nhất chúng thành một nhóm tab.

NOTE

Các nhãn trong labels=[...] tương ứng với các khối mã trong nhóm theo đúng thứ tự và được phân tách bằng dấu phẩy tiếng Anh; khoảng trắng giữa :::code-group không được bỏ qua.

Cách sử dụng cơ bản#

::: code-group labels=[code.js, code.py, code.html]
```js
export function greet(name) {
return `Hello, ${name}!`;
}
```
```py
def greet(name):
return f"Hello, {name}!"
```
```html
<p>Hello, world!</p>
```
:::

Kết quả hiển thị:

export function greet(name) {
return `Hello, ${name}!`;
}

Sử dụng Emoji trong nhãn#

Nhãn hỗ trợ emoji shortcode và sẽ tự động được chuyển đổi thành emoji trong quá trình build:

::: code-group labels=[:package: npm, :package: pnpm, :yarn: yarn]
Terminal window
npm create astro@latest

Kết hợp với các tính năng khác của khối mã#

Các tab trong nhóm vẫn là những khối mã Expressive Code thông thường. Bạn có thể sử dụng các tính năng như tiêu đề, số dòng, đánh dấu dòng, thu gọn, khung terminal và các tính năng khác như bình thường.

astro.config.mjs
export default {
theme: "thinhem",
codeGroup: true,
};

Không chỉ dành cho khối mã#

Bên trong các tab có thể chứa bất kỳ nội dung nào, chẳng hạn như văn bản, danh sách hoặc hình ảnh:

Đây là một đoạn văn bản thông thường。

TIP

Các tab được tạo trong quá trình build, mặc định mở mục đầu tiên; hỗ trợ nhấp chuột và sử dụng bàn phím / / Home / End để chuyển đổi.

Sử dụng bên trong hộp thông báo (thành phần MDX)#

::: code-group và các hộp thông báo theo phong cách Docusaurus như ::: tip đều sử dụng cú pháp container :::. Theo quy định của micromark-directive, số lượng dấu hai chấm của container cha và con phải khác nhau, vì vậy ::: code-group không thể lồng bên trong các hộp thông báo như ::: tip (toàn bộ khối sẽ mất hiệu lực).

Trong trường hợp này, hãy sử dụng thành phần MDX TabGroup: thành phần MDX không được phân tích bằng cú pháp chỉ thị ::: nên có thể hoạt động bình thường cả bên trong lẫn bên ngoài hộp thông báo, đồng thời thuận tiện cho việc mở rộng thêm các thành phần UI trong tương lai. Đổi phần mở rộng của bài viết thành .mdx, sau đó import từ @/components/thinhem-mdx (có thể import nhiều thành phần cùng lúc):

import { TabGroup } from "@/components/thinhem-mdx";
:::tip
<TabGroup labels={["test.js", "test.py"]} client:load>
```js
console.log(1)
```
```py
print("hello world")
```
</TabGroup>
:::
TIP
  • Mảng labels khai báo nhãn cho từng khối mã theo đúng thứ tự tương ứng
  • Thành phần sử dụng client:load để kích hoạt tính năng chuyển đổi tab

Ủng hộ & Chia sẻ

Nếu bài viết hữu ích, hãy chia sẻ hoặc ủng hộ tôi!

Ủng hộ
Ví dụ khối mã Blog
https://thinhem.id.vn/posts/code-examples/
Tác giả
Duy Thịnh
Ngày đăng
2026-08-19
Giấy phép
CC BY-NC-SA 4.0

Bình luận

Profile Image of the Author
Duy Thịnh
Hello, I'm Thinhem.
Chào mừng đến với blog của tôi 🎉
Đây là nơi mình sẽ chia sẻ những album, cách sắp xếp và tóm tắt tài liệu hàng ngày và tâm sự của mình, hy vọng chúng sẽ hữu ích cho các bạn :)💖
Âm nhạc
Ảnh bìa

Âm nhạc

Chưa phát

0:000:00
Không có lời bài hát
Bạn bè
Danh mục
Thẻ
Khoảnh khắc mới
Thống kê website
Bài viết
28
Danh mục
11
Thẻ
83
Tổng số từ
59,429
Số ngày hoạt động
0 ngày
Hoạt động gần nhất
0 ngày trước
Thông tin website
Nền tảng build
Cloudflare Pages
Phiên bản blog
Thinhem v6.16.8
Giấy phép
CC BY-NC-SA 4.0
Mục lục