compose-highlight/dev.hossain.highlight.ui/SyntaxHighlightedCode

SyntaxHighlightedCode

fun SyntaxHighlightedCode(code: String, language: String, modifier: Modifier = Modifier, theme: HighlightTheme = LocalHighlightTheme.current, style: CodeBlockStyle = CodeBlockStyle.Default, showLineNumbers: Boolean = false, languageLabel: @Composable () -> Unit? = if (language.isNotBlank()) DefaultLanguageLabelSentinel else null, copyButton: @Composable (onClick: () -> Unit) -> Unit? = DefaultCopyButtonSentinel, onCopyClick: (String) -> Unit? = null, onHighlightComplete: (HighlightResult) -> Unit? = null, onError: (HighlightException) -> Unit? = null, placeholder: @Composable (code: String) -> Unit? = null)

Displays syntax-highlighted code in a styled block.

Shows unstyled monospace code immediately while async highlighting runs, then fades in the highlighted version when ready (no visible flicker).

This composable reads the active theme from LocalHighlightTheme, so a HighlightThemeProvider ancestor must exist in the composition tree, or you must pass an explicit theme parameter.

Usage - with HighlightThemeProvider (recommended)

HighlightThemeProvider(
    lightHighlightTheme = rememberTomorrowTheme(),
    darkHighlightTheme  = rememberAtomOneDarkTheme(),
) {
    SyntaxHighlightedCode(
        code            = """fun greet(name: String) = "Hello, ${'$'}name!"""",
        language        = "kotlin",
        showLineNumbers = true,
    )
}

Usage - with an explicit theme

SyntaxHighlightedCode(
    code     = "SELECT * FROM users WHERE active = 1",
    language = "sql",
    theme    = rememberTomorrowTheme(),
)

Custom copy button slot

SyntaxHighlightedCode(
    code = snippet,
    language = "kotlin",
    copyButton = { onClick ->
        IconButton(onClick = onClick) {
            Icon(
                imageVector = ImageVector.vectorResource(R.drawable.content_copy_24dp),
                contentDescription = "Copy",
            )
        }
    },
)

Hide header elements

SyntaxHighlightedCode(
    code = jsonSnippet,
    language = "json",
    languageLabel = null,   // hide the language badge
    copyButton    = null,   // hide the copy button
)

Custom placeholder while loading

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

Parameters

code

The source code to display.

language

Highlight.js language identifier (e.g. "python", "kotlin").

modifier

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

theme

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

style

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.

showLineNumbers

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

languageLabel

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.

copyButton

Optional composable slot for the copy button in the header. null hides the button entirely. The slot receives an onClick action pre-wired to copy code to the system clipboard (or call onCopyClick if provided) - pass it to your button's onClick. The default uses SyntaxHighlightedCodeDefaults.CopyButton.

copyButton = { onClick ->
    TextButton(onClick = onClick) { Text("Copy") }
}

Wrap your lambda in remember if it captures unstable values.

onCopyClick

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.

onHighlightComplete

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.

onError

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}")
    },
)

placeholder

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,
        )
    },
)