Feature/line numbers

README.md

@@ -90,12 +90,13 @@ fun CodeViewerExample() {
 
 #### 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) |
-| `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`     |
+| 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`     |
 
 ## ⭐ 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

@@ -16,15 +16,20 @@
 package io.github.komodgn.codeview.compose
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontFamily
@@ -38,9 +43,13 @@ import io.github.komodgn.codeview.core.extension.toDefinition
 fun CodeView(
     code: String,
     language: CodeLanguage,
+    showLineNumbers: Boolean = true,
     modifier: Modifier = Modifier,
     fontFamily: FontFamily? = null,
 ) {
+    val lines = code.lines()
+    val lineCount = lines.size
+
     val tokens = SyntaxParser.parse(code, language.toDefinition())
 
     val annotatedString = tokens.toAnnotatedString(code)
@@ -49,6 +58,11 @@ fun CodeView(
         modifier = modifier
             .fillMaxWidth()
             .background(Color(0xFF0D1117), RoundedCornerShape(8.dp))
+            .border(
+                width = 1.dp,
+                color = Color(0xFF30363D),
+                shape = RoundedCornerShape(8.dp),
+            )
             .padding(12.dp),
     ) {
         Text(
@@ -58,14 +72,34 @@ fun CodeView(
             modifier = Modifier.padding(bottom = 8.dp),
         )
 
-        Box(modifier = Modifier.horizontalScroll(rememberScrollState())) {
-            Text(
-                text = annotatedString,
-                color = Color.White,
-                fontSize = 14.sp,
-                fontFamily = fontFamily ?: FontFamily.Monospace,
-                lineHeight = 20.sp,
-            )
+        Row {
+            if (showLineNumbers) {
+                Spacer(modifier = Modifier.width(16.dp))
+                Column(
+                    modifier = Modifier.padding(end = 12.dp),
+                    horizontalAlignment = Alignment.End,
+                ) {
+                    for (i in 1..lineCount) {
+                        Text(
+                            text = i.toString(),
+                            color = Color(0xFF8B949E),
+                            fontSize = 14.sp,
+                            fontFamily = fontFamily ?: FontFamily.Monospace,
+                            lineHeight = 20.sp,
+                        )
+                    }
+                }
+            }
+
+            Box(modifier = Modifier.horizontalScroll(rememberScrollState())) {
+                Text(
+                    text = annotatedString,
+                    color = Color.White,
+                    fontSize = 14.sp,
+                    fontFamily = fontFamily ?: FontFamily.Monospace,
+                    lineHeight = 20.sp,
+                )
+            }
         }
     }
 }

docs/codeview/overview.md

@@ -28,9 +28,10 @@ fun CodeViewerExample() {
 
 ### 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) |
-| `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`     |
+| 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`     |

example/src/androidMain/kotlin/io/github/komodgn/example/Platform.android.kt

@@ -15,4 +15,24 @@
  */
 package io.github.komodgn.example
 
+import android.app.Activity
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.platform.LocalView
+import androidx.core.view.WindowCompat
+
 actual fun platform() = "Android"
+
+@Composable
+actual fun PlatformColors(isDarkTheme: Boolean) {
+    val view = LocalView.current
+    if (!view.isInEditMode) {
+        SideEffect {
+            val window = (view.context as Activity).window
+            val insetsController = WindowCompat.getInsetsController(window, view)
+
+            insetsController.isAppearanceLightStatusBars = !isDarkTheme
+            insetsController.isAppearanceLightNavigationBars = !isDarkTheme
+        }
+    }
+}

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

@@ -21,23 +21,33 @@ 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.safeDrawing
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.DarkMode
+import androidx.compose.material.icons.filled.LightMode
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import io.github.komodgn.AppConfig
 import io.github.komodgn.codeview.core.CodeLanguage
@@ -48,24 +58,48 @@ import io.github.komodgn.example.util.getInitialCode
 
 @Composable
 fun App() {
+    var isDark by rememberSaveable { mutableStateOf(true) }
     var currentLang by remember { mutableStateOf(CodeLanguage.KOTLIN) }
     var userInput by remember { mutableStateOf(getInitialCode(currentLang, AppConfig.LIBRARY_VERSION)) }
     val scrollState = rememberScrollState()
 
-    CodeViewTheme {
+    CodeViewTheme(isDarkTheme = isDark) {
         Scaffold(
             modifier = Modifier
                 .fillMaxSize(),
             contentWindowInsets = WindowInsets(0, 0, 0, 0),
+            topBar = {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .statusBarsPadding()
+                        .navigationBarsPadding()
+                        .background(MaterialTheme.colorScheme.primary)
+                        .padding(horizontal = 16.dp, vertical = 8.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        text = "Compose CodeView Demo",
+                        fontWeight = FontWeight.Bold,
+                        color = MaterialTheme.colorScheme.background,
+                        modifier = Modifier.padding(8.dp),
+                    )
+                    IconButton(onClick = { isDark = !isDark }) {
+                        Icon(
+                            imageVector = if (isDark) Icons.Default.LightMode else Icons.Default.DarkMode,
+                            contentDescription = "Toggle Theme",
+                            tint = MaterialTheme.colorScheme.background,
+                        )
+                    }
+                }
+            },
         ) { innerPadding ->
             BoxWithConstraints(
                 modifier = Modifier
-                    .padding(innerPadding)
                     .fillMaxSize()
-                    .background(Color.White)
-                    .statusBarsPadding()
-                    .displayCutoutPadding()
-                    .navigationBarsPadding()
+                    .padding(innerPadding)
+                    .background(MaterialTheme.colorScheme.background)
+                    .windowInsetsPadding(WindowInsets.safeDrawing)
                     .imePadding(),
             ) {
                 val isCompact = maxWidth < 600.dp

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

@@ -15,4 +15,9 @@
  */
 package io.github.komodgn.example
 
+import androidx.compose.runtime.Composable
+
 expect fun platform(): String
+
+@Composable
+expect fun PlatformColors(isDarkTheme: Boolean)

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

@@ -62,7 +62,8 @@ fun LanguageDropDown(
             Text(
                 text = selectedLanguage.name,
                 style = MaterialTheme.typography.labelLarge,
-                color = MaterialTheme.colorScheme.onSurface,
+                color = MaterialTheme.colorScheme.primary,
+                fontWeight = FontWeight.Bold,
             )
             Icon(
                 imageVector = Icons.Default.ArrowDropDown,
@@ -83,6 +84,8 @@ fun LanguageDropDown(
                         Text(
                             text = language.name,
                             style = MaterialTheme.typography.bodyMedium,
+                            fontWeight = if (language == selectedLanguage) FontWeight.Bold else FontWeight.Normal,
+                            color = if (language == selectedLanguage) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurfaceVariant,
                         )
                     },
                     onClick = {

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

@@ -50,6 +50,7 @@ fun EditorSection(
             horizontalArrangement = Arrangement.SpaceBetween,
         ) {
             Text(
+                modifier = Modifier.padding(4.dp),
                 text = "Edit Code",
                 style = MaterialTheme.typography.titleMedium,
             )
@@ -67,8 +68,10 @@ fun EditorSection(
                 fontFamily = LocalAppFontFamily.current,
             ),
             colors = TextFieldDefaults.colors(
-                unfocusedContainerColor = Color.Blue.copy(0.3f),
-                focusedContainerColor = Color.Blue.copy(0.3f),
+                focusedTextColor = MaterialTheme.colorScheme.onPrimary,
+                unfocusedTextColor = MaterialTheme.colorScheme.onPrimary,
+                unfocusedContainerColor = MaterialTheme.colorScheme.onBackground,
+                focusedContainerColor = MaterialTheme.colorScheme.onBackground,
                 focusedIndicatorColor = Color.Transparent,
                 unfocusedIndicatorColor = Color.Transparent,
                 disabledIndicatorColor = Color.Transparent,

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

@@ -15,19 +15,55 @@
  */
 package io.github.komodgn.example.theme
 
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Typography
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import compose_codeview.example.generated.resources.NotoColorEmoji
 import compose_codeview.example.generated.resources.NotoSansKR_Regular
 import compose_codeview.example.generated.resources.Res
+import io.github.komodgn.example.PlatformColors
 import org.jetbrains.compose.resources.Font
 
+private val DarkColors = darkColorScheme(
+    primary = CodeAccent,
+    onPrimary = Color.Black,
+    background = CodeBackground,
+    onBackground = CodeTextPrimary,
+    surface = CodeSurface,
+    onSurface = CodeTextPrimary,
+    surfaceVariant = Grey700,
+    error = ErrorRed,
+    onError = Color.White,
+)
+
+private val LightColors = lightColorScheme(
+    primary = CodeAccentRed,
+    onPrimary = Color.White,
+    background = CodeBackgroundLight,
+    onBackground = CodeTextPrimaryLight,
+    surface = CodeSurfaceLight,
+    onSurface = CodeTextPrimaryLight,
+    surfaceVariant = LightGrey200,
+    error = LightError,
+    onError = Color.White,
+)
+
 @Composable
-fun CodeViewTheme(content: @Composable () -> Unit) {
+fun CodeViewTheme(
+    isDarkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) {
+    val colors = if (isDarkTheme) DarkColors else LightColors
+
+    PlatformColors(isDarkTheme)
+
     val codeFont = FontFamily(
         Font(Res.font.NotoSansKR_Regular),
         Font(Res.font.NotoColorEmoji),
@@ -45,6 +81,7 @@ fun CodeViewTheme(content: @Composable () -> Unit) {
     CompositionLocalProvider(LocalAppFontFamily provides codeFont) {
         MaterialTheme(
             typography = typography,
+            colorScheme = colors,
             content = content,
         )
     }