SyntaxHighlightedCode

The source code to display.

Highlight.js language identifier (e.g. "python", "kotlin"). If blank or unrecognized by Highlight.js, the code is rendered as plain text with the theme's base styling without triggering auto-detection.

Modifier for the outer container. The composable also applies a testTag("syntax-highlighted-code") on the outer surface to support UI testing.

The theme to use. Defaults to LocalHighlightTheme. Throws if no HighlightThemeProvider is present and no explicit theme is passed.

Visual style configuration - shape, padding, line-number column, font, etc. Use CodeBlockStyle.textStyle to override typography (font family, size, line height). See SyntaxHighlightedCodeDefaults for the default values.

Whether to show a line-number gutter on the left.

Hoisted scroll state for horizontal scrolling. Defaults to rememberScrollState().

Optional composable content for the language badge in the header. null hides the badge entirely. The default shows language in a dimmed style derived from the active theme. Renders inside a Surface whose LocalContentColor is the theme foreground

• use LocalContentColor.current inside your slot to inherit it automatically. Use SyntaxHighlightedCodeDefaults.LanguageLabel as a starting point for customisation. Wrap your lambda in remember if it captures an unstable value. Ignored when header is customized.

Optional composable slot for trailing header actions (copy, edit, share, etc.). null hides all trailing actions. The slot runs with a RowScope receiver so multiple actions lay out in a row without building your own Row, and receives an onCopy action pre-wired to copy code to the system clipboard (or call onCopyClick if provided). The default renders SyntaxHighlightedCodeDefaults.CopyButton.

actions = { onCopy ->
    IconButton(onClick = onEdit) { Icon(Icons.Default.Edit, contentDescription = "Edit") }
    SyntaxHighlightedCodeDefaults.CopyButton(onClick = onCopy)
}

Wrap your lambda in remember if it captures unstable values. Ignored when header is customized.

Optional coarse-grained slot that replaces the entire header row (language badge and actions). null renders no header chrome at all. The slot receives an onCopy action pre-wired to copy code to the system clipboard (or call onCopyClick if provided). When customized, languageLabel and actions are ignored - the custom header owns the chrome. The default delegates to SyntaxHighlightedCodeDefaults.Header, which lays out languageLabel on the left and actions on the right.

header = { onCopy ->
    Row(Modifier.fillMaxWidth().background(Color(0xFF2D2D2D))) {
        Text("MainActivity.kt", color = Color.White)
        Spacer(Modifier.weight(1f))
        SyntaxHighlightedCodeDefaults.CopyButton(onClick = onCopy)
    }
}

Wrap your lambda in remember if it captures unstable values.

Optional custom copy handler. If null, copies to the system clipboard. This callback is your signal that a copy occurred - use it to show your own feedback (e.g. a Snackbar, Toast, or animated indicator). The library does not show any built-in "Copied!" confirmation.

Optional callback invoked with a HighlightResult when highlighting succeeds. Use HighlightResult.durationMs for timing, HighlightResult.spanCount to detect silent failures (0 = no tokens produced), and HighlightResult.language to confirm the language that was highlighted. Useful for performance metrics and test harnesses.

Optional callback invoked with the HighlightException when highlighting fails. The composable always falls back to plain unstyled text on failure - this callback is purely observational and does not affect the rendered output.

SyntaxHighlightedCode(
    code = myCode,
    language = userInput,
    onError = { error ->
        Log.w("Highlight", "Failed: ${error.message}")
    },
)

Optional composable rendered while highlighting is in progress (before the first highlight result is available). When null (default), the raw unstyled code is shown until highlighting completes - preserving the existing behavior. The code string is passed so the placeholder can optionally render it styled differently (e.g., dimmed or with a shimmer overlay).

SyntaxHighlightedCode(
    code = myCode,
    language = "kotlin",
    placeholder = { rawCode ->
        Text(
            text = rawCode,
            color = Color.Gray.copy(alpha = 0.5f),
            fontFamily = FontFamily.Monospace,
        )
    },
)