I am trying to make a primitive markdown editor with highlighting, and I am having an issue with highlighting code blocks.
I am using AnnotatedString
with TextField
to make the editor view. However, I can’t figure out any way of setting background color an entire line of text, not just the characters. For example, this is what my app looks like:
But what I want it to look like is:
Notice how light grey background goes all the way to the end, even though there are no characters that fill this space up.
Here is the piece of code responsible for the styling of code blocks:
withStyle(
style = SpanStyle(
fontFamily = FontFamily.Monospace,
background = colorScheme.secondaryContainer,
color = colorScheme.onSecondaryContainer,
)
) {
append("```")
index += 3
while (index < value.length && !value.startsWith("```", index)) {
append(value[index])
index++
}
append("```")
index += 3
}
Here is how I apply the AnnotatedString
style to the TextField
:
TextField(
value = value,
onValueChange = onValueChange,
visualTransformation = {
TransformedText(
MarkdownProcessor(value, defaultColorScheme),
OffsetMapping.Identity
)
}
)
Can I highlight an entire line? What would be the appropriate way to implement this kind of behaviour, even if not using AnnotatedString
?
BritishTeapot is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.