{"id":13606764,"url":"https://github.com/Qawaz/compose-code-editor","last_synced_at":"2025-04-12T11:30:38.786Z","repository":{"id":44421982,"uuid":"405068962","full_name":"Qawaz/compose-code-editor","owner":"Qawaz","description":"Display \u0026 Edit code with syntax highlighting in jetpack compose","archived":false,"fork":true,"pushed_at":"2024-04-25T11:30:49.000Z","size":5383,"stargazers_count":67,"open_issues_count":3,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-07T12:40:52.532Z","etag":null,"topics":["android","code-editor","code-editor-mobile","compose-android","jetpack-compose","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://qawaz.github.io/compose-code-editor","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"kbiakov/CodeView-Android","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Qawaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-10T12:13:16.000Z","updated_at":"2024-10-21T10:36:43.000Z","dependencies_parsed_at":"2023-02-17T02:31:49.287Z","dependency_job_id":null,"html_url":"https://github.com/Qawaz/compose-code-editor","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Qawaz%2Fcompose-code-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Qawaz%2Fcompose-code-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Qawaz%2Fcompose-code-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Qawaz%2Fcompose-code-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Qawaz","download_url":"https://codeload.github.com/Qawaz/compose-code-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248560016,"owners_count":21124578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","code-editor","code-editor-mobile","compose-android","jetpack-compose","syntax-highlighting"],"created_at":"2024-08-01T19:01:12.173Z","updated_at":"2025-04-12T11:30:38.165Z","avatar_url":"https://github.com/Qawaz.png","language":"Kotlin","readme":"# Compose Code Editor (Multiplatform)\n\n## Description\n\n**Compose Code Editor** is a code highlighting / editing library for compose , it does not make use of web view so it renders fast\n\nIt also supports kotlin multiplatform and supports Android,JVM \u0026 Web at the moment , It will be better if you could get it from\ngithub packages since I use that and post latest versions there and Jitpack might not support multiplatform\nThe version 2.0.3 is only for Android , Its 3.0.0 and afterwards for multiplatform\n\n## Demo\n\n![Screen Recording (9-11-2021 4-29-35 PM)](https://user-images.githubusercontent.com/42442700/132946529-c0c76bf4-b055-4be9-b89a-48c1b3295f89.gif)\n\n## Setup\n\nYou can either get this from github packages or jitpack, Please note that Jitpack is android only.\n\n### Multiplatform Dependency\n\n#### Step 1 : Add the Github Packages Repo\n\n```kotlin\n\nval githubProperties = Properties()\ngithubProperties.load(FileInputStream(rootProject.file(\"github.properties\")))\n\nallprojects {\n    repositories {\n        maven(\"https://maven.pkg.github.com/username/repo\") {\n            name = \"GitHubPackages\"\n            credentials {\n                username = (githubProperties[\"gpr.usr\"] ?: System.getenv(\"GPR_USER\")).toString()\n                password = (githubProperties[\"gpr.key\"] ?: System.getenv(\"GPR_API_KEY\")).toString()\n            }\n        }\n    }\n}\n```\n\n#### Step 2 : Create Github Properties File\n\nCreate `github.properties` file in your project at root level and add two properties (make github personal access token)\n\n```properties\ngpr.usr=yourgithubusername\ngpr.key=yourgithubpersonalaccesstoken\n```\n\nOr you could also set \"GPR_USER\" (your github username) or \"GPR_API_KEY\" (your github personal access token) as environment variables\nThis would be very easy and you don't need to worry about checking out this file in git.\n\n\n#### Step 3 : Add The Dependency\n\n```kotlin\nimplementation(\"com.wakaztahir:codeeditor:3.0.5\")\n```\n\n### Android Only Dependency\n\n#### Step 1. Make sure you have jitpack repository in your build file\n\n```groovy\nallprojects {\n    repositories {\n        maven { url 'https://jitpack.io' }\n    }\n}\n```\n\n#### Step 2. Add the dependency\n\n```groovy\ndependencies {\n    implementation 'com.github.qawaz:compose-code-editor:2.0.3'\n}\n```\n\n## Usage\n\n```kotlin\n// Step 1. Declare Language \u0026 Code\nval language = CodeLang.Kotlin\nval code = \"\"\"             \n    package com.wakaztahir.codeeditor\n    \n    fun main(){\n        println(\"Hello World\");\n    }\n\"\"\".trimIndent()\n\n// Step 2. Create Parser \u0026 Theme\nval parser = remember { PrettifyParser() } // try getting from LocalPrettifyParser.current\nvar themeState by remember { mutableStateOf(CodeThemeType.Monokai) }\nval theme = remember(themeState) { themeState.theme() }\n```\n\n### Using Text Composable\n\n```kotlin\n// Step 3. Parse Code For Highlighting\nval parsedCode = remember {\n    parseCodeAsAnnotatedString(\n        parser = parser,\n        theme = theme,\n        lang = language,\n        code = code\n    )\n}\n\n// Step 4. Display In A Text Composable\nText(parsedCode)\n```\n\n### Using TextField Composable\n\n```kotlin\nvar textFieldValue by remember {\n  mutableStateOf(\n    TextFieldValue(\n      annotatedString = parseCodeAsAnnotatedString(\n        parser = parser,\n        theme = theme,\n        lang = language,\n        code = code\n      )\n    )\n  )\n}\n\nOutlinedTextField(\n  modifier = Modifier.fillMaxSize(),\n  value = textFieldValue,\n  onValueChange = {\n    textFieldValue = it.copy(\n      annotatedString = parseCodeAsAnnotatedString(\n        parser = parser,\n        theme = theme,\n        lang = language,\n        code = it.text\n      )\n    )\n  }\n)\n```\n\n### Displaying Line Numbers\n\nTo display line numbers in the text field we must use a `BasicTextField` since it has a parameter for `onTextLayout`\n\nA basic example can be setup like this , On every text layout a new array is created\nwhich contains top offsets of each line in the `BasicTextField`\n\n```kotlin\n\nval language = CodeLang.Kotlin\nval code = \"\"\"             \n    package com.wakaztahir.codeeditor\n    \n    fun main(){\n        println(\"Hello World\");\n    }\n    \"\"\".trimIndent()\n\nval parser = remember { PrettifyParser() }\nval themeState by remember { mutableStateOf(CodeThemeType.Default) }\nval theme = remember(themeState) { themeState.theme }\n\nfun parse(code: String): AnnotatedString {\n    return parseCodeAsAnnotatedString(\n        parser = parser,\n        theme = theme,\n        lang = language,\n        code = code\n    )\n}\n\nvar textFieldValue by remember { mutableStateOf(TextFieldValue(parse(code))) }\nvar lineTops by remember { mutableStateOf(emptyArray\u003cFloat\u003e()) }\nval density = LocalDensity.current\n\nRow {\n    if (lineTops.isNotEmpty()) {\n        Box(modifier = Modifier.padding(horizontal = 4.dp)) {\n            lineTops.forEachIndexed { index, top -\u003e\n                Text(\n                    modifier = Modifier.offset(y = with(density) { top.toDp() }),\n                    text = index.toString(),\n                    color = MaterialTheme.colors.onBackground.copy(.3f)\n                )\n            }\n        }\n    }\n    BasicTextField(\n        modifier = Modifier.fillMaxSize(),\n        value = textFieldValue,\n        onValueChange = {\n            textFieldValue = it.copy(annotatedString = parse(it.text))\n        },\n        onTextLayout = { result -\u003e\n            lineTops = Array(result.lineCount) { result.getLineTop(it) }\n        }\n    )\n}\n```\n\n## List of available languages \u0026 their extensions\n\nDefault (```\"default-code\"```), HTML (```\"default-markup\"```) , C/C++/Objective-C (```\"c\"```, ```\"cc\"```, ```\"cpp\"```, ```\"cxx\"```, ```\"cyc\"```, ```\"m\"```),\nC# (```\"cs\"```), Java (```\"java\"```),Kotlin (```\"kt\"```) ,Bash (```\"bash\"```, ```\"bsh\"```, ```\"csh\"```, ```\"sh\"```),\nPython (```\"cv\"```, ```\"py\"```, ```\"python\"```), Perl (```\"perl\"```, ```\"pl\"```, ```\"pm\"```),\nRuby (```\"rb\"```, ```\"ruby\"```), JavaScript (```\"javascript\"```, ```\"js\"```),\nCoffeeScript (```\"coffee\"```), Rust (```\"rc\"```, ```\"rs\"```, ```\"rust\"```), Appollo (```\"apollo\"```\n, ```\"agc\"```, ```\"aea\"```), Basic (```\"basic\"```, ```\"cbm\"```), Clojure (```\"clj\"```),\nCss (```\"css\"```), Dart (```\"dart\"```), Erlang (```\"erlang\"```, ```\"erl\"```), Go (```\"go\"```),\nHaskell (```\"hs\"```), Lisp (```\"cl\"```, ```\"el\"```, ```\"lisp\"```, ```\"lsp\"```, ```\"scm\"```\n, ```\"ss\"```, ```\"rkt\"```), Llvm (```\"llvm\"```, ```\"ll\"```), Lua (```\"lua\"```),\nMatlab (```\"matlab\"```), ML (OCaml, SML, F#, etc) (```\"fs\"```, ```\"ml\"```), Mumps (```\"mumps\"```),\nN (```\"n\"```, ```\"nemerle\"```), Pascal (```\"pascal\"```), R (```\"r\"```, ```\"s\"```, ```\"R\"```\n, ```\"S\"```, ```\"Splus\"```), Rd (```\"Rd\"```, ```\"rd\"```), Scala (```\"scala\"```), SQL (```\"sql\"```),\nTex (```\"latex\"```, ```\"tex\"```), VB (```\"vb\"```, ```\"vbs\"```), VHDL (```\"vhdl\"```, ```\"vhd\"```),\nTcl (```\"tcl\"```), Wiki (```\"wiki.meta\"```), XQuery (```\"xq\"```, ```\"xquery\"```), YAML (```\"yaml\"```\n, ```\"yml\"```), Markdown (```\"md\"```, ```\"markdown\"```), formats (```\"json\"```, ```\"xml\"```\n, ```\"proto\"```), ```\"regex\"```\n\nDidn't found yours? Please, open issue to show your interest \u0026 I'll try to add this language in next\nreleases.\n\n## List of available themes\n\n* Default\n* [Monokai](http://www.eclipsecolorthemes.org/?view=theme\u0026id=386)\n\n## Issues\n\n* Lack of themes\n","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQawaz%2Fcompose-code-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FQawaz%2Fcompose-code-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQawaz%2Fcompose-code-editor/lists"}