feat(example): Update sample app

README.md

@@ -1,5 +1,6 @@
 <div align="center">
     <h1>CodeView</h1>
+    <p>👻 <a href="https://komodgn.github.io/compose-codeview/">Live Playground</a></p>
     <p>🎨 Beautiful Syntax Highlighting for your Compose apps. Display code everywhere with CodeView.</p>
     <img width="700" alt="Group 10 (1)" src="https://github.com/user-attachments/assets/346b3b3a-5d67-4d3c-a003-30fde3d22346" />
     <br>
@@ -11,6 +12,11 @@
     </a>
 </div>
 
+## Table of contents
+1. [Setup](#setup)
+2. [Usage](#usage)
+3. [Contributing](#-contributing)
+
 ## Setup
 Add the dependency below to your module's build.gradle.kts file.
 
@@ -81,3 +87,6 @@ fun CodeViewerExample() {
     )
 }
 ```
+
+## ⭐ Contributing
+You can see the 👉 [Contributing Guide](https://github.com/komodgn/compose-codeview?tab=contributing-ov-file).

codeview/compose/src/commonMain/kotlin/io/github/komodgn/codeview/compose/CodeView.kt

@@ -39,6 +39,7 @@ fun CodeView(
     code: String,
     language: CodeLanguage,
     modifier: Modifier = Modifier,
+    fontFamily: FontFamily? = null,
 ) {
     val tokens = SyntaxParser.parse(code, language.toDefinition())
 
@@ -62,7 +63,7 @@ fun CodeView(
                 text = annotatedString,
                 color = Color.White,
                 fontSize = 14.sp,
-                fontFamily = FontFamily.Monospace,
+                fontFamily = fontFamily ?: FontFamily.Monospace,
                 lineHeight = 20.sp,
             )
         }

example/src/androidMain/AndroidManifest.xml

@@ -4,6 +4,7 @@
         <activity
             android:name=".MainActivity"
             android:exported="true"
+            android:windowSoftInputMode="adjustResize"
             android:theme="@android:style/Theme.Material.Light.NoActionBar">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

example/src/commonMain/kotlin/io/github/komodgn/example/Application.kt

@@ -15,64 +15,96 @@
  */
 package io.github.komodgn.example
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.displayCutoutPadding
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import io.github.komodgn.AppConfig
-import io.github.komodgn.codeview.compose.CodeView
-import io.github.komodgn.codeview.core.CodeLanguage
+import io.github.komodgn.example.component.CodeViewSection
+import io.github.komodgn.example.component.EditorSection
+import io.github.komodgn.example.theme.CodeViewTheme
 
 @Composable
 fun App() {
+    var userInput by remember { mutableStateOf(getInitialCode(AppConfig.LIBRARY_VERSION)) }
     val scrollState = rememberScrollState()
 
-    val demoCode = """
-    package io.github.komodgn.example
-
-    /**
-     * CodeView enables seamless syntax highlighting within KMP projects.
-     * It efficiently handles multi-line documentation and complex annotations.
-     */
-    @Composable
-    fun CodeDisplay(version: String) {
-        // You can integrate dynamic string interpolation effortlessly
-        val greeting = "Hello, CodeView ${AppConfig.LIBRARY_VERSION} version"
-
-        /*
-           Block comment support:
-           Developers can verify the accuracy of color rendering
-           for improved code readability.
-        */
-        CodeView(
-            code = greeting,
-            language = CodeLanguage.KOTLIN,
-        )
-    }
-    """.trimIndent()
-
-    MaterialTheme {
+    CodeViewTheme {
         Scaffold(
-            modifier = Modifier.fillMaxSize(),
+            modifier = Modifier
+                .fillMaxSize(),
+            contentWindowInsets = WindowInsets(0, 0, 0, 0),
         ) { innerPadding ->
-            Column(
+            BoxWithConstraints(
                 modifier = Modifier
                     .padding(innerPadding)
-                    .padding(16.dp)
                     .fillMaxSize()
-                    .verticalScroll(scrollState),
+                    .background(Color.White)
+                    .statusBarsPadding()
+                    .displayCutoutPadding()
+                    .navigationBarsPadding()
+                    .imePadding(),
             ) {
-                CodeView(
-                    code = demoCode,
-                    language = CodeLanguage.KOTLIN,
-                )
+                val isCompact = maxWidth < 600.dp
+
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .verticalScroll(scrollState)
+                        .padding(horizontal = 16.dp, vertical = 8.dp),
+                    verticalArrangement = Arrangement.Center,
+                ) {
+                    if (isCompact) {
+                        CodeViewSection(userInput, modifier = Modifier.fillMaxWidth())
+                        EditorSection(userInput, onValueChange = { userInput = it }, modifier = Modifier.fillMaxWidth())
+                    } else {
+                        Row(modifier = Modifier.fillMaxWidth().padding(16.dp, 0.dp, 16.dp, 0.dp)) {
+                            EditorSection(userInput, onValueChange = { userInput = it }, modifier = Modifier.weight(1f))
+                            CodeViewSection(userInput, modifier = Modifier.weight(1f))
+                        }
+                    }
+                }
             }
         }
     }
 }
+
+private fun getInitialCode(version: String) = """
+package io.github.komodgn.example
+
+/**
+ * Welcome to Compose CodeView v$version Demo!
+ *
+ * This library provides syntax highlighting for Compose Multiplatform.
+ * Feel free to edit the code on the left to see real-time updates.
+ */
+@Composable
+fun CodeDisplay() {
+    val greeting = println("Hello, CodeView!")
+
+    CodeView(
+        code = greeting,
+        language = CodeLanguage.KOTLIN,
+    )
+}
+""".trimIndent()

example/src/commonMain/kotlin/io/github/komodgn/example/component/CodeViewSection.kt

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2026 komodgn
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.github.komodgn.example.component
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import io.github.komodgn.codeview.compose.CodeView
+import io.github.komodgn.codeview.core.CodeLanguage
+import io.github.komodgn.example.theme.LocalAppFontFamily
+
+@Composable
+fun CodeViewSection(code: String, modifier: Modifier) {
+    Column(modifier = modifier.padding(8.dp)) {
+        Text("Preview", modifier = Modifier.padding(4.dp))
+        CodeView(
+            code = code,
+            language = CodeLanguage.KOTLIN,
+            modifier = Modifier.fillMaxWidth(),
+            fontFamily = LocalAppFontFamily.current,
+        )
+    }
+}

example/src/commonMain/kotlin/io/github/komodgn/example/component/EditorSection.kt

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2026 komodgn
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.github.komodgn.example.component
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import io.github.komodgn.example.theme.LocalAppFontFamily
+
+@Composable
+fun EditorSection(code: String, onValueChange: (String) -> Unit, modifier: Modifier) {
+    Column(modifier = modifier.padding(8.dp)) {
+        Text("Edit Code", modifier = Modifier.padding(4.dp))
+        TextField(
+            value = code,
+            onValueChange = onValueChange,
+            modifier = Modifier.fillMaxWidth(),
+            textStyle = MaterialTheme.typography.bodyMedium.copy(
+                fontFamily = LocalAppFontFamily.current,
+            ),
+            colors = TextFieldDefaults.colors(
+                focusedContainerColor = Color.Blue.copy(0.3f),
+            ),
+        )
+    }
+}

example/src/commonMain/kotlin/io/github/komodgn/example/theme/CodeViewTheme.kt

@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2026 komodgn
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.github.komodgn.example.theme
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Typography
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import compose_codeview.example.generated.resources.Res
+import compose_codeview.example.generated.resources.*
+import org.jetbrains.compose.resources.Font
+
+@Composable
+fun CodeViewTheme(content: @Composable () -> Unit) {
+    val codeFont = FontFamily(
+        Font(Res.font.NotoSansKR_Regular),
+        Font(Res.font.NotoColorEmoji),
+    )
+
+    val typography = Typography(
+        bodyMedium = TextStyle(
+            fontFamily = codeFont,
+        ),
+        labelLarge = TextStyle(
+            fontFamily = codeFont,
+        ),
+    )
+
+    CompositionLocalProvider(LocalAppFontFamily provides codeFont) {
+        MaterialTheme(
+            typography = typography,
+            content = content,
+        )
+    }
+}

example/src/commonMain/kotlin/io/github/komodgn/example/theme/Font.kt

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2026 komodgn
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.github.komodgn.example.theme
+
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.text.font.FontFamily
+
+val LocalAppFontFamily = staticCompositionLocalOf<FontFamily> {
+    FontFamily.Default
+}

example/src/jsMain/kotlin/io/github/komodgn/example/Platform.js.kt

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) 2026 komodgn
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.github.komodgn.example
+
+actual fun platform() = "Web with JS"