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

CodeBlockStyle

data class CodeBlockStyle(val shape: Shape = SyntaxHighlightedCodeDefaults.shape, val padding: PaddingValues = SyntaxHighlightedCodeDefaults.padding, val headerPadding: PaddingValues = SyntaxHighlightedCodeDefaults.headerPadding, val lineNumberColor: Color = Color.Unspecified, val lineNumberWidth: Dp = SyntaxHighlightedCodeDefaults.lineNumberWidth, val copyButtonSize: Dp = SyntaxHighlightedCodeDefaults.copyButtonSize, val textStyle: TextStyle = SyntaxHighlightedCodeDefaults.codeTextStyle, val fallbackBackgroundColor: Color = SyntaxHighlightedCodeDefaults.fallbackBackgroundColor, val fallbackTextColor: Color = SyntaxHighlightedCodeDefaults.fallbackTextColor)

Visual style configuration for SyntaxHighlightedCode.

Use Default for a standard code block with rounded corners and comfortable padding. Use Compact for tighter padding in space-constrained layouts.

Default values for all properties are available via SyntaxHighlightedCodeDefaults.

Using presets

SyntaxHighlightedCode(code = snippet, language = "json", style = CodeBlockStyle.Default)
SyntaxHighlightedCode(code = snippet, language = "json", style = CodeBlockStyle.Compact)

Custom style

val myStyle = CodeBlockStyle(
    shape           = RoundedCornerShape(4.dp),
    padding         = PaddingValues(8.dp),
    headerPadding   = PaddingValues(horizontal = 8.dp, vertical = 4.dp),
    lineNumberWidth = 40.dp,
    copyButtonSize  = 24.dp,
)
SyntaxHighlightedCode(code = snippet, language = "bash", style = myStyle)

Custom typography

Override textStyle to change the font, size, or line height of the code text:

SyntaxHighlightedCode(
    code     = snippet,
    language = "kotlin",
    style    = CodeBlockStyle(
        textStyle = SyntaxHighlightedCodeDefaults.codeTextStyle.copy(fontSize = 15.sp),
    ),
)

The lineNumberColor defaults to Color.Unspecified, which derives the color from the active theme at 40% opacity. Override it to use a fixed color.

For custom styles constructed inline in a composable, wrap them in remember to avoid unnecessary recompositions:

val myStyle = remember { CodeBlockStyle(padding = PaddingValues(8.dp)) }

Constructors

CodeBlockStyle

constructor(shape: Shape = SyntaxHighlightedCodeDefaults.shape, padding: PaddingValues = SyntaxHighlightedCodeDefaults.padding, headerPadding: PaddingValues = SyntaxHighlightedCodeDefaults.headerPadding, lineNumberColor: Color = Color.Unspecified, lineNumberWidth: Dp = SyntaxHighlightedCodeDefaults.lineNumberWidth, copyButtonSize: Dp = SyntaxHighlightedCodeDefaults.copyButtonSize, textStyle: TextStyle = SyntaxHighlightedCodeDefaults.codeTextStyle, fallbackBackgroundColor: Color = SyntaxHighlightedCodeDefaults.fallbackBackgroundColor, fallbackTextColor: Color = SyntaxHighlightedCodeDefaults.fallbackTextColor)