Expressive Code Example - Ví dụ về Expressive Code

tqp

Sống là để trải nghiệm. Hãy cùng mình học, cùng làm, cùng đi, cùng đọc, cùng nghe, và cùng viết lại những trải nghiệm này

940 từ

5 phút

Expressive Code Example - Ví dụ về Expressive Code

2020-04-10

Cùng học

Markdown

/

Blogging

/

Demo

Here, we’ll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Ở đây, chúng ta sẽ khám phá cách các khối mã (code blocks) hiển thị khi sử dụ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 thêm để biết chi tiết.

Expressive Code#

Syntax Highlighting#

Tô sáng cú pháp#

Syntax Highlighting Tô sáng cú pháp

Regular syntax highlighting#

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

1
console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences#

Kết xuất chuỗi thoát ANSI#

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 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
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

Editor & Terminal Frames#

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

Editor & Terminal Frames Khung trình soạn thảo & terminal

Code editor frames#

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

1
console.log('Title attribute example')

1
<div>File name comment example</div>

Terminal frames#

Khung terminal#

1
echo "This terminal frame has no title"

1
Write-Output "This one has a title!"

Overriding frame types#

Ghi đè loại khung#

1
echo "Look ma, no frame!"

1
# Without overriding, this would be a terminal frame
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

Text & Line Markers#

Văn bản & đánh dấu dòng#

Text & Line Markers Văn bản & đánh dấu dòng

Marking full lines & line ranges#

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

1
// Line 1 - targeted by line number
2
// Line 2
3
// Line 3
4
// Line 4 - targeted by line number
5
// Line 5
6
// Line 6
7
// Line 7 - targeted by range "7-8"
8
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)#

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

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
7
}

Adding labels to line markers#

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>

Adding long labels on their own lines#

Thêm nhãn dài trên các 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
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

Using diff-like syntax#

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

1
this line will be marked as inserted
2
this line will be marked as deleted
3
this is a regular line

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

Combining syntax highlighting with diff-like syntax#

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

1
function thisIsJavaScript() {
2
  // This entire block gets highlighted as JavaScript,
3
  // and we can still add diff markers to it!
4
  console.log('Old code to be removed')
5
  console.log('New and shiny code!')
6
}

Marking individual text inside lines#

Đánh dấu văn bản cụ thể trong dòng#

1
function demo() {
2
  // Mark any given text inside lines
3
  return 'Multiple matches of the given text are supported';
4
}

Regular expressions#

Biểu thức chính quy#

1
console.log('The words yes and yep will be marked.')

Escaping forward slashes#

Thoát ký tự gạch chéo (/)#

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

Selecting inline marker types (mark, ins, del)#

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

1
function demo() {
2
  console.log('These are inserted and deleted marker types');
3
  // The return statement uses the default marker type
4
  return true;
5
}

Word Wrap#

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

Word Wrap Tự động xuống dòng

Configuring word wrap per block#

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

1
// Example with wrap
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with wrap=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

Configuring indentation of wrapped lines#

Cấu hình thụt dòng cho các dòng được xuống hàng#

1
// Example with preserveIndent (enabled by default)
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// Example with preserveIndent=false
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

Collapsible Sections#

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

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


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers#

Số dòng#

Line Numbers Số dòng

Displaying line numbers per block#

Hiển thị số dòng theo từng khối mã#

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number#

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

5
console.log('Greetings from line 5!')
6
console.log('I am on line 6')

Expressive Code Example - Ví dụ về Expressive Code

https://tqp.io.vn/posts/cùng-học/expressive-code/

Tác giả

tqp

Ngày

2020-04-10

Giấy phép

CC BY-NC-SA 4.0

Sống Thực Tế Giữa Đời Thực Dụng - Mễ Mông

Nhà Lãnh Đạo Không Chức Danh - The Leader Who Had No Title

Editor & Terminal Frames

Khung trình soạn thảo & terminal

Text & Line Markers

Văn bản & đánh dấu dòng

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

Displaying line numbers per block

Hiển thị số dòng theo từng khối mã

Changing the starting line number

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