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 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
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- StrikethroughKhung 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ã
console.log('Ví dụ về thuộc tính tiêu đề.')<div>Ví dụ về chú thích tên tệp.</div>Khung terminal
echo "Khung terminal này không có tiêu đề."Write-Output "Cái này có tiêu đề!"Ghi đè loại khung
echo "Thấy chưa, không có khung :)"# 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 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)
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
<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
<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êmDò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 eitherKế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ừ yes và yep sẽ được đánh dấu.')Escape dấu gạch chéo phải
echo "Test" > /home/test.txtChọ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
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òngfunction 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=falsefunction 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=falsefunction 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
5 collapsed lines
// Tất cả đoạn mã thiết lập mẫu này sẽ được thu gọnimport { 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ọn3 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ọnengine.closeConnection()engine.freeMemory()engine.shutdown({ reason: 'Kết thúc đoạn mã mẫu' })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òngconsole.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òngconsole.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.
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 ::: và code-group không được bỏ qua.
Cách sử dụng cơ bản
::: code-group labels=[code.js, code.py, code.html]
```jsexport function greet(name) { return `Hello, ${name}!`;}```
```pydef greet(name): return f"Hello, {name}!"```
```html<p>Hello, world!</p>```
:::Kết quả hiển thị:
export function greet(name) { return `Hello, ${name}!`;}def greet(name): return f"Hello, {name}!"<p>Hello, world!</p>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]npm create astro@latestpnpm create astro@latestyarn create astroKế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.
export default { theme: "thinhem", codeGroup: true,};pnpm build && pnpm preview3 collapsed lines
// Ba dòng này mặc định được thu gọnimport { a } from "a";import { b } from "b";
console.log(a, b);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。
- Mục danh sách một
- Mục danh sách hai
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>
:::- Mảng
labelskhai 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!




