Ví Dụ Expressive Code

Ở đây, chúng ta sẽ khám phá cách các khối mã hiển thị bằng Expressive Code. 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ô Màu Cú Pháp#

Tô Màu Cú Pháp

Tô màu cú pháp thông thường#

1
console.log('Mã này được tô màu cú pháp!')

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

1
Màu ANSI:
2
- Thường: Đỏ Xanh lá Vàng Xanh dương Tím Xanh cyan
3
- Đậm:   Đỏ Xanh lá Vàng Xanh dương Tím Xanh cyan
4
- Mờ:    Đỏ Xanh lá Vàng Xanh dương Tím Xanh cyan
5

6
256 màu (hiển thị màu 160-177):
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
Màu RGB đầy đủ:
12
ForestGreen - RGB(34, 139, 34)
13

14
Định dạng văn bản: Đậm Mờ Nghiêng Gạch chân

Khung Trình Soạn Thảo & Terminal#

Khung Trình Soạn Thảo & Terminal

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

1
console.log('Ví dụ thuộc tính Title')

1
Ví dụ bình luận tên tệp

Khung terminal#

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

1
Write-Output "Cái này có tiêu đề!"

Ghi đè loại khung#

1
echo "Nhìn này, không có khung!"

1
# Nếu không ghi đè, đây sẽ là khung terminal
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

Đánh Dấu Văn Bản & Dòng#

Đánh Dấu Văn Bản & Dòng

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

1
// Dòng 1 - được đánh dấu bằng số dòng
2
// Dòng 2
3
// Dòng 3
4
// Dòng 4 - được đánh dấu bằng số dòng
5
// Dòng 5
6
// Dòng 6
7
// Dòng 7 - được đánh dấu bằng phạm vi "7-8"
8
// Dòng 8 - được đánh dấu bằng phạm vi "7-8"

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

1
function demo() {
2
  console.log('dòng này được đánh dấu là đã xóa')
3
  // Dòng này và dòng tiếp theo được đánh dấu là đã thêm
4
  console.log('đây là dòng thứ hai được thêm vào')
5

6
  return 'dòng này sử dụng loại đánh dấu mặc định trung tính'
7
}

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

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

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

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10

11
>
12

13
  {children &&
14
    !active &&
15
    (typeof children === 'string' ? <span>{children}</span> : children)}
16
</button>

Sử dụng cú pháp giống diff#

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

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+đây là một tệp diff thực tế
5
-tất cả nội dung sẽ không bị sửa đổi
6
không có khoảng trắng nào bị loại bỏ

Kết hợp tô màu cú pháp với cú pháp giống diff#

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

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

1
function demo() {
2
  // Đánh dấu bất kỳ văn bản nào trong dòng
3
  return 'Nhiều kết quả khớp của văn bản đã cho được hỗ trợ';
4
}

Biểu thức chính quy#

1
console.log('Các từ yes và yep sẽ được đánh dấu.')

Thoát dấu gạch chéo#

1
echo "Test" > /home/test.txt

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

1
function demo() {
2
  console.log('Đây là các loại đánh dấu đã chèn và đã xóa');
3
  // Câu lệnh return sử dụng loại đánh dấu mặc định
4
  return true;
5
}

Ngắt Dòng Tự Động#

Ngắt Dòng Tự Động

Cấu hình ngắt dòng theo khối#

1
// Ví dụ với ngắt dòng
2
function getLongString() {
3
  return 'Đây là một chuỗi rất dài có thể sẽ không vừa với không gian có sẵn trừ khi container cực kỳ rộng'
4
}

1
// Ví dụ với wrap=false
2
function getLongString() {
3
  return 'Đây là một chuỗi rất dài có thể sẽ không vừa với không gian có sẵn trừ khi container cực kỳ rộng'
4
}

Cấu hình thụt lề cho dòng ngắt#

1
// Ví dụ với preserveIndent (được bật mặc định)
2
function getLongString() {
3
  return 'Đây là một chuỗi rất dài có thể sẽ không vừa với không gian có sẵn trừ khi container cực kỳ rộng'
4
}

1
// Ví dụ với preserveIndent=false
2
function getLongString() {
3
  return 'Đây là một chuỗi rất dài có thể sẽ không vừa với không gian có sẵn trừ khi container cực kỳ rộng'
4
}

Phần Có Thể Thu Gọn#

Phần Có Thể Thu Gọn


5 collapsed lines
1
// Tất cả mã thiết lập boilerplate này sẽ được thu gọn
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// Phần mã này sẽ hiển thị theo mặc định
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // Bạn có thể có nhiều phần thu gọn
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // Phần này sẽ vẫn hiển thị
17
  console.log(`Kết quả tính toán: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// Tất cả mã này đến cuối khối sẽ được thu gọn lại
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'Kết thúc ví dụ mã boilerplate' })

Số Dòng#

Số Dòng

Hiển thị số dòng theo khối#

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

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

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

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