Display syntax signatures within a CodeExampleBox on the detail screen for improved readability.

Author: yesshreyes

README.md

@@ -27,7 +27,7 @@
 - [ ] Assign unique IDs to objects and enforce consistent ordering logic
 - [ ] Correct usage of visibility modifiers across the codebase
 - [ ] Introduce common `@Preview` annotations for reusable Composable previews
-- [ ] Add inline code formatting support for syntax display on the `Detail Screen`
+- [x] Add code block for syntax display on the `Detail Screen`
 - [ ] Implement caching on the `Detail Screen` to store previously viewed topic data
 - [ ] Implement dynamic topic loading in `TopicRepository` to support scalability
 - [ ] Integrate Room database to persist bookmark states

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreenComponents.kt

@@ -3,6 +3,7 @@ package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -63,10 +64,9 @@ fun SyntaxSection(
         color = MaterialTheme.colorScheme.onPrimary,
     )
     Spacer(Modifier.height(4.dp))
-    KdText(
-        modifier = Modifier,
-        text = syntax.signature,
-        style = MaterialTheme.typography.bodyMedium,
+    CodeExampleBox(
+        code = syntax.signature,
+        modifier = Modifier.padding(bottom = 8.dp),
     )
     syntax.notes?.let {
         Spacer(Modifier.height(4.dp))