大家好,我是成浩

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.

Expressive Code
Syntax Highlighting
Syntax Highlighting

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

Rendering ANSI escape sequences
Terminal window
ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold: Red Green Yellow Blue Magenta Cyan
- Dimmed: Red Green Yellow Blue Magenta Cyan

256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177

Full RGB colors:
ForestGreen - RGB(34, 139, 34)

Text formatting: Bold Dimmed Italic Underline

Editor & Terminal Frames
Editor & Terminal Frames

Code editor frames
my-test-file.js
console.log('Title attribute example')

src/content/index.html


Terminal frames
Terminal window
echo "This terminal frame has no title"

PowerShell terminal example
Write-Output "This one has a title!"

Overriding frame types
echo "Look ma, no frame!"

PowerShell Profile.ps1
# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers
Text & Line Markers

Marking full lines & line ranges
// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)
line-markers.js
function demo() {
console.log('this line is marked as deleted')
// This line and the next one are marked as inserted
console.log('this is the second inserted line')

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

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


Adding long labels on their own lines
labeled-line-markers.jsx
role="button"
{...props}

value={value}
className={buttonClassName}

disabled={disabled}
active={active}
>

{children &&
!active &&
(typeof children === 'string' ? {children} : children)}


Using diff-like syntax
this line will be marked as inserted
this line will be marked as deleted
this is a regular line

--- 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

Combining syntax highlighting with diff-like syntax
function thisIsJavaScript() {
// This entire block gets highlighted as JavaScript,
// and we can still add diff markers to it!
console.log('Old code to be removed')
console.log('New and shiny code!')
}

Marking individual text inside lines
function demo() {
// Mark any given text inside lines
return 'Multiple matches of the given text are supported';
}

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

Escaping forward slashes
Terminal window
echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)
function demo() {
console.log('These are inserted and deleted marker types');
// The return statement uses the default marker type
return true;
}

Word Wrap
Word Wrap

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

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

Configuring indentation of wrapped lines
// Example with preserveIndent (enabled by default)
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

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

Collapsible Sections
Collapsible Sections


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

function calcFn() {
// You can have multiple collapsed sections

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


Line Numbers
Line Numbers

Displaying line numbers per block
// This code block will show line numbers
console.log('Greetings from line 2!')
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
console.log('Greetings from line 5!')
console.log('I am on line 6')