Compose Code Editor is a code highlighting / editing library for compose , it does not make use of web view so it renders fast
It also supports kotlin multiplatform and supports Android,JVM & Web at the moment , It will be better if you could get it from github packages since I use that and post latest versions there and Jitpack might not support multiplatform The version 2.0.3 is only for Android , Its 3.0.0 and afterwards for multiplatform
You can either get this from github packages or jitpack, Please note that Jitpack is android only.
val githubProperties = Properties() githubProperties.load(FileInputStream(rootProject.file("github.properties"))) allprojects { repositories { maven("https://maven.pkg.github.com/username/repo") { name = "GitHubPackages" credentials { username = (githubProperties["gpr.usr"] ?: System.getenv("GPR_USER")).toString() password = (githubProperties["gpr.key"] ?: System.getenv("GPR_API_KEY")).toString() } } } }Create github.properties file in your project at root level and add two properties (make github personal access token)
gpr.usr=yourgithubusername gpr.key=yourgithubpersonalaccesstokenOr you could also set "GPR_USER" (your github username) or "GPR_API_KEY" (your github personal access token) as environment variables This would be very easy and you don't need to worry about checking out this file in git.
implementation("com.wakaztahir:codeeditor:3.0.5")allprojects { repositories { maven { url 'https://jitpack.io' } } }dependencies { implementation 'com.github.qawaz:compose-code-editor:2.0.3' }// Step 1. Declare Language & Code val language = CodeLang.Kotlin val code = """ package com.wakaztahir.codeeditor fun main(){ println("Hello World"); } """.trimIndent() // Step 2. Create Parser & Theme val parser = remember { PrettifyParser() } // try getting from LocalPrettifyParser.current var themeState by remember { mutableStateOf(CodeThemeType.Monokai) } val theme = remember(themeState) { themeState.theme() }// Step 3. Parse Code For Highlighting val parsedCode = remember { parseCodeAsAnnotatedString( parser = parser, theme = theme, lang = language, code = code ) } // Step 4. Display In A Text Composable Text(parsedCode)var textFieldValue by remember { mutableStateOf( TextFieldValue( annotatedString = parseCodeAsAnnotatedString( parser = parser, theme = theme, lang = language, code = code ) ) ) } OutlinedTextField( modifier = Modifier.fillMaxSize(), value = textFieldValue, onValueChange = { textFieldValue = it.copy( annotatedString = parseCodeAsAnnotatedString( parser = parser, theme = theme, lang = language, code = it.text ) ) } )To display line numbers in the text field we must use a BasicTextField since it has a parameter for onTextLayout
A basic example can be setup like this , On every text layout a new array is created which contains top offsets of each line in the BasicTextField
val language = CodeLang.Kotlin val code = """ package com.wakaztahir.codeeditor fun main(){ println("Hello World"); } """.trimIndent() val parser = remember { PrettifyParser() } val themeState by remember { mutableStateOf(CodeThemeType.Default) } val theme = remember(themeState) { themeState.theme } fun parse(code: String): AnnotatedString { return parseCodeAsAnnotatedString( parser = parser, theme = theme, lang = language, code = code ) } var textFieldValue by remember { mutableStateOf(TextFieldValue(parse(code))) } var lineTops by remember { mutableStateOf(emptyArray<Float>()) } val density = LocalDensity.current Row { if (lineTops.isNotEmpty()) { Box(modifier = Modifier.padding(horizontal = 4.dp)) { lineTops.forEachIndexed { index, top -> Text( modifier = Modifier.offset(y = with(density) { top.toDp() }), text = index.toString(), color = MaterialTheme.colors.onBackground.copy(.3f) ) } } } BasicTextField( modifier = Modifier.fillMaxSize(), value = textFieldValue, onValueChange = { textFieldValue = it.copy(annotatedString = parse(it.text)) }, onTextLayout = { result -> lineTops = Array(result.lineCount) { result.getLineTop(it) } } ) }Default ("default-code"), HTML ("default-markup") , C/C++/Objective-C ("c", "cc", "cpp", "cxx", "cyc", "m"), C# ("cs"), Java ("java"),Kotlin ("kt") ,Bash ("bash", "bsh", "csh", "sh"), Python ("cv", "py", "python"), Perl ("perl", "pl", "pm"), Ruby ("rb", "ruby"), JavaScript ("javascript", "js"), CoffeeScript ("coffee"), Rust ("rc", "rs", "rust"), Appollo ("apollo" , "agc", "aea"), Basic ("basic", "cbm"), Clojure ("clj"), Css ("css"), Dart ("dart"), Erlang ("erlang", "erl"), Go ("go"), Haskell ("hs"), Lisp ("cl", "el", "lisp", "lsp", "scm" , "ss", "rkt"), Llvm ("llvm", "ll"), Lua ("lua"), Matlab ("matlab"), ML (OCaml, SML, F#, etc) ("fs", "ml"), Mumps ("mumps"), N ("n", "nemerle"), Pascal ("pascal"), R ("r", "s", "R" , "S", "Splus"), Rd ("Rd", "rd"), Scala ("scala"), SQL ("sql"), Tex ("latex", "tex"), VB ("vb", "vbs"), VHDL ("vhdl", "vhd"), Tcl ("tcl"), Wiki ("wiki.meta"), XQuery ("xq", "xquery"), YAML ("yaml" , "yml"), Markdown ("md", "markdown"), formats ("json", "xml" , "proto"), "regex"
Didn't found yours? Please, open issue to show your interest & I'll try to add this language in next releases.
- Default
- Monokai
- Lack of themes