π¨ Beautiful Syntax Highlighting for your Compose apps. Display code everywhere with CodeView.
π» Live Playground
Add the dependency below to your module's build.gradle.kts file.
Add the JitPack repository to your root settings.gradle.kts:
dependencyResolutionManagement {
repositories {
google()
mavenCentral()
maven { url = uri("https://jitpack.io") } // Add this
}
}If you are using libs.versions.toml:
[versions]
composeCodeview = "$version"
[libraries]
compose-codeview-core = { module = "com.github.komodgn.compose-codeview:core", version.ref = "composeCodeview" }
compose-codeview = { module = "com.github.komodgn.compose-codeview:compose", version.ref = "composeCodeview" }Add the dependency to your build.gradle.kts:
// For KMP (commonMain)
sourceSets {
commonMain.dependencies {
implementation(libs.compose.codeview.core)
implementation(libs.compose.codeview)
}
}
// For Android-only projects
dependencies {
implementation(libs.compose.codeview.core)
implementation(libs.compose.codeview)
}You can easily integrate syntax highlighting into your Compose UI.
import io.github.komodgn.codeview.compose.CodeView
import io.github.komodgn.codeview.core.CodeLanguage
@Composable
fun CodeViewerExample() {
val demoCode = """
/**
* CodeView enables seamless syntax highlighting.
*/
fun main() {
println("Hello, CodeView!")
}
""".trimIndent()
CodeView(
code = demoCode,
language = CodeLanguage.KOTLIN,
)
}| PARAMETER | TYPE | DESCRIPTION | DEFAULT |
|---|---|---|---|
code |
String |
The source code string to be highlighted. | (Required) |
language |
CodeLanguage |
The programming language to use for syntax analysis (e.g., KOTLIN, JAVA). |
(Required) |
showLineNumbers |
Boolean |
Whether to display line numbers on the left side of the code. | true |
modifier |
Modifier |
The modifier to be applied to the CodeView container. | Modifier |
fontFamily |
FontFamily? |
The font family for the code text. If null, it defaults to FontFamily.Monospace. | null |
import io.github.komodgn.codeview.compose.CodeEditor
import io.github.komodgn.codeview.core.CodeLanguage
@Composable
fun CodeEditorExample() {
var code by remember { mutableStateOf("// Write your code here") }
CodeEditor(
value = code,
onValueChange = { code = it },
language = CodeLanguage.KOTLIN,
)
}| PARAMETER | TYPE | DESCRIPTION | DEFAULT |
|---|---|---|---|
value |
String |
The source code string to be highlighted. | (Required) |
onValueChange |
(String) -> Unit |
Callback that is triggered when the input text changes. | (Required) |
language |
CodeLanguage |
The programming language to use for syntax analysis (e.g., KOTLIN, JAVA). |
(Required) |
showLineNumbers |
Boolean |
Whether to display line numbers on the left side of the code. | true |
modifier |
Modifier |
The modifier to be applied to the CodeView container. | Modifier |
fontFamily |
FontFamily? |
The font family for the code text. If null, it defaults to FontFamily.Monospace. | null |
You can see the π Contributing Guide.