Expressive Code 记录 - AcoFork Blog

本文非站长原创，由 Expressive code by yCENzh · Pull Request #27 · afoim/fuwari 提供

NOTE
原文链接:Expressive Code Example

踩坑#

首先按照fuwari原仓库commit进行修改,发现ac没推上去,构建第一次失败

推完ac后发现在ec中引用了三个插件,但是pnpm astro add并没有自动安装,第二次修改

现在正常跑起来了,但是由于2x主题的原因,样式很奇怪,再改一次

这下正常了,推pr去

没错我又回来了,滑块样式有问题,什么奇奇怪怪的圆角对不齐,干脆调小圆角

应该是这个pr最后一次提交了,合并上游8个commit,不愧是劳模2x

去tm的ANSI

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 的代码块显示效果。提供的示例基于官方文档，您可以参考该文档获取更多细节。

Expressive Code#

Syntax Highlighting#

语法高亮#

Syntax Highlighting 语法高亮

Regular syntax highlighting#

常规语法高亮#

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

Editor & Terminal Frames#

编辑器与终端框架#

Editor & Terminal Frames 编辑器与终端框架

Code editor frames#

代码编辑器框架#

1
console.log('Title attribute example')

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

Terminal frames#

终端框架#

1
echo "This terminal frame has no title"

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

Overriding frame types#

覆盖框架类型#

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#

文本与行标记#

Text & Line Markers 文本与行标记

Marking full lines & line ranges#

标记整行与行范围#

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

选择行标记类型（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#

为行标记添加标签#

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#

在独立行添加长标签#

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#

使用类似 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#

结合语法高亮与类似 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#

标记行内特定文本#

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

Regular expressions#

正则表达式#

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

Escaping forward slashes#

转义正斜杠#

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

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

选择行内标记类型（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
}

Collapsible Sections#

可折叠部分#

Collapsible Sections 可折叠部分

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

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#

行号#

Line Numbers 行号

Displaying line numbers per block#

按代码块显示行号#

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

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

Changing the starting line number#

更改起始行号#

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