📢 新文章推送 · 每周更新优质内容 · 订阅更新 →
向下滚动
示例演示

Firefly 代码块示例

AI 智能总结

在这里,我们将探索如何使用 Expressive Code 展示代码块。提供的示例基于官方文档,您可以参考以获取更多详细信息。

表达性代码

语法高亮

语法高亮

常规语法高亮

1console.log('此代码有语法高亮!')

渲染 ANSI 转义序列

 1Standard ANSI colors:
 2- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
 3- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
 4- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
 5- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
 6
 78-bit colors (showing colors 160-171 as an example):
 8- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
 9- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
10- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
11- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 
12
1324-bit colors (full RGB):
14- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
15- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
16- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
17- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
18
19Font styles:
20- Default
21- Bold
22- Dimmed
23- Italic
24- Underline
25- Reversed
26- Strikethrough

编辑器和终端框架

编辑器和终端框架

代码编辑器框架

1console.log('标题属性示例')

1<!-- src/content/index.html -->
2<div>文件名注释示例</div>

终端框架

1echo "此终端框架没有标题"

1Write-Output "这个有标题!"

覆盖框架类型

1echo "看,没有框架!"

1# 如果不覆盖,这将是一个终端框架
2function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3New-Alias tail Watch-Tail

文本和行标记

文本和行标记

标记整行和行范围

1// 第1行 - 通过行号定位
2// 第2行
3// 第3行
4// 第4行 - 通过行号定位
5// 第5行
6// 第6行
7// 第7行 - 通过范围 "7-8" 定位
8// 第8行 - 通过范围 "7-8" 定位

选择行标记类型 (mark, ins, del)

说明:以下为 Astro Expressive Code 语法示例,Hugo 使用标准代码高亮,不支持 del/ins/行标记属性。

1function demo() {
2  console.log('此行标记为已删除')
3  // 此行和下一行标记为已插入
4  console.log('这是第二个插入行')
5
6  return '此行使用中性默认标记类型'
7}

为行标记添加标签

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

在单独行上添加长标签

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

使用类似 diff 的语法

1+此行将标记为已插入
2-此行将标记为已删除
3这是常规行

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

结合语法高亮和类似 diff 的语法

1  function thisIsJavaScript() {
2    // 整个块都会以 JavaScript 高亮显示,
3    // 并且我们仍然可以为其添加 diff 标记!
4-   console.log('要删除的旧代码')
5+   console.log('新的闪亮代码!')
6  }

标记行内的单独文本

1function demo() {
2  // 标记行内的任何给定文本
3  return '支持给定文本的多个匹配项';
4}

正则表达式

1console.log('单词 yes 和 yep 将被标记。')

转义正斜杠

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

选择内联标记类型 (mark, ins, del)

1// 示例:内联标记类型(Hugo 标准高亮不支持 ins/del 属性)
2function demo() {
3  console.log('这些是插入和删除的标记类型');
4  // return 语句使用默认标记类型
5  return true;
6}

自动换行

自动换行

为每个块配置自动换行

1// 启用换行的示例
2function getLongString() {
3  return '这是一个非常长的字符串,除非容器极宽,否则很可能无法适应可用空间'
4}

1// wrap=false 的示例
2function getLongString() {
3  return '这是一个非常长的字符串,除非容器极宽,否则很可能无法适应可用空间'
4}

配置换行的缩进

1// preserveIndent 示例(默认启用)
2function getLongString() {
3  return '这是一个非常长的字符串,除非容器极宽,否则很可能无法适应可用空间'
4}

1// preserveIndent=false 的示例
2function getLongString() {
3  return '这是一个非常长的字符串,除非容器极宽,否则很可能无法适应可用空间'
4}

可折叠部分

可折叠部分

 1// 所有这些样板设置代码将被折叠(Hugo 标准高亮不支持 collapse 属性)
 2import { someBoilerplateEngine } from '@example/some-boilerplate'
 3import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
 4
 5const engine = someBoilerplateEngine(evenMoreBoilerplate())
 6
 7// 这部分代码默认可见
 8engine.doSomething(1, 2, 3, calcFn)
 9
10function calcFn() {
11  // 您可以有多个折叠部分
12  const a = 1
13  const b = 2
14  const c = a + b
15
16  // 这将保持可见
17  console.log(`计算结果: ${a} + ${b} = ${c}`)
18  return c
19}
20
21// 直到块末尾的所有代码将再次被折叠
22engine.closeConnection()
23engine.freeMemory()
24engine.shutdown({ reason: '示例样板代码结束' })

行号

行号

为每个块显示行号

1// 此代码块将显示行号
2console.log('来自第2行的问候!')
3console.log('我在第3行')

1// 此块禁用行号
2console.log('你好?')
3console.log('抱歉,你知道我在第几行吗?')

更改起始行号

1console.log('来自第5行的问候!')
2console.log('我在第6行')
版权声明

本文作者 Lumin

本文链接 https://www.zhengquan.xyz/demo/code-examples/

许可协议 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

请作者喝杯咖啡 ☕

  • 微信打赏
    微信支付
  • 支付宝打赏
    支付宝
点击按钮查看打赏二维码
🎁 推荐工具
试试这些实用在线工具,提升工作效率
前往工具集 →

留言评论

期待你的想法

评论加载中