Code Block

Highlighted code with line numbers, highlighted lines and a copy button. Built-in languages: ArkTS / TypeScript, CSS, JSON, Bash, HTML / XML, Python, Diff — and your own grammars.

Usage

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 theme

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

JSON theme

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

Shell

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

Highlighted lines

highlightLines takes line numbers as displayed.

@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]
 })

Custom grammar

Ordered regex rules → token types. Register by name, or pass the grammar object directly.

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

Extend a built-in

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

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SCodeBlock

Highlighted code block with optional title, line numbers, highlighted lines and a copy button.

• language: a registered language name / alias (see CodeHighlighter; unknown names render as plain text).
• grammar: a SparkGrammar object, used instead of language (e.g. from CodeHighlighter.extend).
• codeTheme: token → colour mapping (default SparkCodeTheme.github()).
• highlightLines: 1-based line numbers (relative to startLine) drawn with a tinted background.

Prop	Type	Default	Description
code	string	''
language	CodeLanguage	'arkts'
grammar	SparkGrammar | undefined	undefined	Grammar object overriding language.
codeTheme	SparkCodeTheme | undefined	undefined
title	string | undefined	undefined	File name / caption shown in the header; defaults to the language (or grammar name).
showLineNumbers	boolean	true
startLine	number	1	Number shown for the first line.
highlightLines	number[]	[]	Line numbers (as displayed, i.e. counting from startLine) to emphasise.
copyable	boolean	true
maxHeight	number	0	Max height in vp before the block scrolls vertically (0 = no limit).