Merge pull request #229 from mikepenz/develop

dev -> main

.github/workflows/ci.yml

@@ -58,6 +58,7 @@ jobs:
           ./gradlew multiplatform-markdown-renderer-m3:publishAllPublicationsToMavenCentralRepository --no-daemon --no-configure-on-demand --no-parallel
           ./gradlew multiplatform-markdown-renderer-coil2:publishAllPublicationsToMavenCentralRepository --no-daemon --no-configure-on-demand --no-parallel
           ./gradlew multiplatform-markdown-renderer-coil3:publishAllPublicationsToMavenCentralRepository --no-daemon --no-configure-on-demand --no-parallel
+          ./gradlew multiplatform-markdown-renderer-code:publishAllPublicationsToMavenCentralRepository --no-daemon --no-configure-on-demand --no-parallel
 
   build:
     name: Build

Gemfile.lock

@@ -57,16 +57,14 @@ GEM
     open4 (1.3.4)
     public_suffix (5.0.3)
     rchardet (1.8.0)
-    rexml (3.2.8)
-      strscan (>= 3.0.9)
+    rexml (3.3.9)
     ruby-ll (2.1.3)
       ansi
       ast
     ruby2_keywords (0.0.5)
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
-    strscan (3.1.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     unicode-display_width (2.4.2)

README.md

@@ -224,7 +224,42 @@ Markdown(
         paragraph = customParagraphComponent
     )
 )
+```
+
+Another example to of a custom component is changing the rendering of an unordered list.
+
+```kotlin
+// Define a custom component for rendering unordered list items in Markdown
+val customUnorderedListComponent: MarkdownComponent = {
+    // Use the MarkdownListItems composable to render the list items
+    MarkdownListItems(it.content, it.node, level = 0) { index, child ->
+        // Create a row layout for each list item with spacing between elements
+        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            // Render an icon for the bullet point with a green tint
+            Icon(
+                imageVector = icon,
+                tint = Color.Green,
+                contentDescription = null,
+                modifier = Modifier.size(20.dp),
+            )
+            // Extract the bullet marker text from the child node
+            val bulletMarker: String = child.findChildOfType(MarkdownTokenTypes.LIST_BULLET)?.getTextInNode(it.content).toString()
+            // Extract the item text and remove the bullet marker from it
+            val itemText = child.getTextInNode(it.content).toString().replace(bulletMarker, "")
+
+            // Render the item text using the MarkdownText composable
+            MarkdownText(content = itemText)
+        }
+    }
+}
 
+// Define the `Markdown` composable and pass in the custom unorderedList component
+Markdown(
+    content,
+    components = markdownComponents(
+        unorderedList = customUnorderedListComponent
+    )
+)
 ```
 
 </p>
@@ -251,7 +286,8 @@ Markdown(
 ```
 
 > [!NOTE]
-> 0.21.0 adds JVM support for this dependency via `HTTPUrlConnection` -> however this is expected to be removed in the future.
+> 0.21.0 adds JVM support for this dependency via `HTTPUrlConnection` -> however this is expected to be removed in the
+> future.
 
 > [!NOTE]  
 > Please refer to the official coil2 documentation on how to adjust the `ImageLoader`
@@ -276,6 +312,43 @@ Markdown(
 > [!NOTE]  
 > The `coil3` module does depend on SNAPSHOT builds of coil3
 
+### Syntax Highlighting
+
+The library (introduced with 0.27.0) offers optional support for syntax highlighting via
+the [Highlights](https://github.com/SnipMeDev/Highlights) project.
+This support is not included in the core, and can be enabled by adding the `multiplatform-markdown-renderer-code`
+dependency.
+
+```groovy
+implementation("com.mikepenz:multiplatform-markdown-renderer-code:${version}")
+```
+
+Once added, the `Markdown` has to be configured to use the alternative code highlighter. 
+
+```kotlin
+// Use default color scheme
+Markdown(
+    MARKDOWN,
+    components = markdownComponents(
+        codeBlock = highlightedCodeBlock,
+        codeFence = highlightedCodeFence,
+    )
+)
+
+// ADVANCED: Customize Highlights library by defining different theme
+val isDarkTheme = isSystemInDarkTheme()
+val highlightsBuilder = remember(isDarkTheme) {
+    Highlights.Builder().theme(SyntaxThemes.atom(darkMode = isDarkTheme))
+}
+Markdown(
+    MARKDOWN,
+    components = markdownComponents(
+        codeBlock = { MarkdownHighlightedCodeBlock(it.content, it.node, highlightsBuilder) },
+        codeFence = { MarkdownHighlightedCodeFence(it.content, it.node, highlightsBuilder) },
+    )
+)
+```
+
 ## Dependency
 
 This project uses JetBrains [markdown](https://github.com/JetBrains/markdown/) Multiplatform

app-desktop/build.gradle.kts

@@ -19,6 +19,7 @@ dependencies {
     implementation(projects.multiplatformMarkdownRenderer)
     implementation(projects.multiplatformMarkdownRendererM2)
     implementation(projects.multiplatformMarkdownRendererCoil3)
+    implementation(projects.multiplatformMarkdownRendererCode)
 
     implementation(compose.desktop.currentOs)
     implementation(compose.foundation)

app-desktop/src/main/kotlin/main.kt

@@ -1,3 +1,4 @@
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
@@ -11,12 +12,17 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.application
 import com.mikepenz.markdown.coil3.Coil3ImageTransformerImpl
+import com.mikepenz.markdown.compose.components.markdownComponents
+import com.mikepenz.markdown.compose.elements.MarkdownHighlightedCodeBlock
+import com.mikepenz.markdown.compose.elements.MarkdownHighlightedCodeFence
 import com.mikepenz.markdown.compose.extendedspans.ExtendedSpans
 import com.mikepenz.markdown.compose.extendedspans.RoundedCornerSpanPainter
 import com.mikepenz.markdown.compose.extendedspans.SquigglyUnderlineSpanPainter
 import com.mikepenz.markdown.compose.extendedspans.rememberSquigglyUnderlineAnimator
 import com.mikepenz.markdown.m2.Markdown
 import com.mikepenz.markdown.model.markdownExtendedSpans
+import dev.snipme.highlights.Highlights
+import dev.snipme.highlights.model.SyntaxThemes
 
 fun main() = application {
     Window(onCloseRequest = ::exitApplication, title = "Markdown Sample") {
@@ -29,9 +35,17 @@ fun main() = application {
                 }
             ) {
                 val scrollState = rememberScrollState()
+                val isDarkTheme = isSystemInDarkTheme()
+                val highlightsBuilder = remember(isDarkTheme) {
+                    Highlights.Builder().theme(SyntaxThemes.atom(darkMode = isDarkTheme))
+                }
 
                 Markdown(
                     MARKDOWN,
+                    components = markdownComponents(
+                        codeBlock = { MarkdownHighlightedCodeBlock(it.content, it.node, highlightsBuilder) },
+                        codeFence = { MarkdownHighlightedCodeFence(it.content, it.node, highlightsBuilder) },
+                    ),
                     imageTransformer = Coil3ImageTransformerImpl,
                     extendedSpans = markdownExtendedSpans {
                         val animator = rememberSquigglyUnderlineAnimator()
@@ -76,7 +90,7 @@ This is a paragraph with a [link](https://www.jetbrains.com/).
 This is a code block:
 ```kotlin
 fun main() {
-println("Hello, world!")
+    println("Hello, world!")
 }
 ```
 

app/build.gradle.kts

@@ -18,7 +18,7 @@ android {
 
     defaultConfig {
         applicationId = "com.mikepenz.markdown"
-        minSdk = libs.versions.minSdk.get().toInt()
+        minSdk = 24 // anything below faces: https://github.com/mikepenz/multiplatform-markdown-renderer/issues/223
         targetSdk = libs.versions.targetSdk.get().toInt()
 
         versionCode = property("VERSION_CODE").toString().toInt()

app/src/screenshotTest/kotlin/com.mikepenz.markdown.ui/SnapshotTests.kt

@@ -63,11 +63,11 @@ private val MARKDOWN_DEFAULT = """
 
 ###### This is an H6
 
-This is a paragraph with some *italic* and **bold** text.
+This is a paragraph with some *italic* and **bold** text\.
 
-This is a paragraph with some `inline code`.
+This is a paragraph with some `inline code`\.
 
-This is a paragraph with a [link](https://www.jetbrains.com/).
+This is a paragraph with a [link](https://www.jetbrains.com/)\.
 
 This is a code block:
 ```kotlin

gradle.properties

@@ -1,7 +1,7 @@
 # Maven stuff
 GROUP=com.mikepenz
-VERSION_NAME=0.26.0
-VERSION_CODE=2600
+VERSION_NAME=0.27.0
+VERSION_CODE=2700
 
 POM_URL=https://github.com/mikepenz/multiplatform-markdown-renderer
 
@@ -30,6 +30,7 @@ kotlin.js.compiler=both
 
 kotlin.mpp.stability.nowarn=true
 kotlin.mpp.androidSourceSetLayoutVersion=2
+kotlin.suppressGradlePluginWarnings=IncorrectCompileOnlyDependencyWarning
 
 org.jetbrains.compose.experimental.wasm.enabled=true
 org.jetbrains.compose.experimental.uikit.enabled=true

gradle/libs.versions.toml

@@ -1,23 +1,24 @@
 [versions]
-agp = "8.5.2"
+agp = "8.7.2"
 compileSdk = "34"
 minSdk = "21"
 targetSdk = "34"
-androidx-activityCompose = "1.9.1"
+androidx-activityCompose = "1.9.3"
 androidx-material = "1.12.0"
-compose = "1.6.8"
-compose-plugin = "1.6.11"
-kotlin = "2.0.20"
-coroutines = "1.8.1"
-dokka = "1.9.20"
-coil = "3.0.0-alpha10"
+compose = "1.7.5"
+compose-plugin = "1.7.0"
+kotlin = "2.0.21"
+coroutines = "1.9.0"
+dokka = "2.0.0-Beta"
+coil = "3.0.0-rc02"
 coil2 = "2.7.0"
 aboutlib = "11.2.3"
 markdown = "0.7.3"
-detekt = "1.23.6"
-gradleMvnPublish = "0.29.0"
-screenshot = "0.0.1-alpha05"
-ktor = "3.0.0-beta-2"
+detekt = "1.23.7"
+gradleMvnPublish = "0.30.0"
+screenshot = "0.0.1-alpha07"
+ktor = "3.0.1"
+highlights = "0.9.3"
 
 [libraries]
 androidx-material = { group = "com.google.android.material", name = "material", version.ref = "androidx-material" }
@@ -39,6 +40,7 @@ markdown = { module = "org.jetbrains:markdown", version.ref = "markdown" }
 kotlinx-coroutines-swing = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-swing", version.ref = "coroutines" }
 ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
 ktor-client-java = { module = "io.ktor:ktor-client-java", version.ref = "ktor" }
+highlights = { module = "dev.snipme:highlights", version.ref = "highlights" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }

multiplatform-markdown-renderer-code/.gitignore

@@ -0,0 +1 @@
+/build