Code Block 代码块

带行号、行高亮与复制按钮的代码高亮。内置语言：ArkTS / TypeScript、CSS、JSON、Bash、HTML / XML、Python、Diff，也可以注册自己的语法。

基础用法

SCodeBlock({ code: source, language: 'arkts', title: 'ClickCounter.ets' })

ArkTS

@ComponentV2
export struct ClickCounter {
  @Local count: number = 0; // reactive state

  build() {
    SButton({ text: `Clicked ${this.count} times` })
      .onClick(() => this.count++)
  }
}

CSS 主题

:root {
  --radius: 0.625rem;
  --primary: oklch(0.205 0 0);
}
.dark {
  --primary: oklch(0.922 0 0);
}
@size(compact) { --spacing: 0.22rem; }

JSON 主题

{
  "root": { "--primary": "#171717", "--radius": "0.5rem" },
  "dark": { "--primary": "#e5e5e5" },
  "sizes": { "compact": { "--spacing": "3.5px" } }
}

命令行

# build and run on a device
devecocli run --module gallery --device 127.0.0.1:5555

行高亮

highlightLines 使用显示出来的行号。

@ComponentV2
export struct ClickCounter {
  @Local count: number = 0; // reactive state

  build() {
    SButton({ text: `Clicked ${this.count} times` })
      .onClick(() => this.count++)
  }
}

Diff

--- a/Index.ets
+++ b/Index.ets
@@ -1,3 +1,3 @@
 SCodeBlock({
-  code: source, language: 'arkts'
+  code: source, language: 'arkts', highlightLines: [3]
 })

自定义语法

按顺序匹配的正则规则 → token 类型。可以按名字注册，也可以直接传入语法对象。

; gallery settings
[server]
host = "127.0.0.1"
port = 5555
verbose = true

const INI = CodeHighlighter.register({
  name: 'ini',
  aliases: ['conf'],
  rules: [
    { pattern: /s+/ },
    { token: 'comment', pattern: /[;#][^
]*/ },
    { token: 'type', pattern: /[[^]
]*]/ },
    // capture groups that tile the match get one token each
    { pattern: /([w.-]+)([ 	]*)(=)/, captures: ['property', 'plain', 'punctuation'] },
    { token: 'string', pattern: /"[^"
]*"?/ },
    { token: 'number', pattern: /d+(?:.d+)?/ },
    { token: 'keyword', words: ['true', 'false', 'on', 'off'] },
    { pattern: /[^s"]+/ }
  ]
});

SCodeBlock({ code: source, grammar: INI })   // or language: 'ini' / 'conf'

扩展内置语法

CodeHighlighter.extend(base, { keywords, before, after, exclude })

const MY_ARKTS = CodeHighlighter.extend('arkts', {
  name: 'arkts+',
  keywords: ['observe', 'emit'],
  exclude: ['type']
});

observe Counter(() => emit('changed'))

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SCodeBlock

高亮代码块，可选标题、行号、行高亮以及复制按钮。

• language：已注册的语言名称 / 别名（参见 CodeHighlighter；无法识别的名称按纯文本渲染）。
• grammar：一个 SparkGrammar 对象，用于替代 language（例如来自 CodeHighlighter.extend）。
• codeTheme：令牌到颜色的映射（默认为 SparkCodeTheme.github()）。
• highlightLines：从 1 开始计数的行号（相对于 startLine），以带色调的背景绘制。

属性	类型	默认值	说明
code	string	''
language	CodeLanguage	'arkts'
grammar	SparkGrammar | undefined	undefined	覆盖 language 的语法对象。
codeTheme	SparkCodeTheme | undefined	undefined
title	string | undefined	undefined	显示在头部的文件名 / 标题；默认为语言名（或语法名）。
showLineNumbers	boolean	true
startLine	number	1	首行显示的行号。
highlightLines	number[]	[]	需要强调的行号（按显示的行号计，即从 startLine 开始计数）。
copyable	boolean	true
maxHeight	number	0	代码块在垂直滚动前的最大高度，单位 vp（0 表示不限）。