README.md

CodeView

🎨 Beautiful Syntax Highlighting for your Compose apps. Display code everywhere with CodeView.

👻 Live Playground

Table of contents

• Setup
• Usage
  • CodeView
  • CodeEditor
• Contributing

1. Setup

Add the dependency below to your module's build.gradle.kts file.

1.1. Setup JitPack

Add the JitPack repository to your root settings.gradle.kts:

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") } // Add this
    }
}

1.2. Setup Gradle

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

1.3 Add Dependency

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

🎨 2. Usage

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

Parameters

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

2.2 CodeEditor

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

Parameters

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

⭐ Contributing

You can see the 👉 Contributing Guide.