feat(Markdown): Add support for codeblocks

shared/src/commonMain/moko-resources/assets/markdown/markdown.css

@@ -114,4 +114,40 @@ table, table *, pre {
     background-color: var(--surfaceContainer);
     color: var(--onSurfaceVariant);
     font-weight: 500;
+}
+
+/* Code */
+
+pre, code, kbd {
+    font-size: 1em;
+    font-family: monospace;
+}
+
+.markdown-body code, /* Inline code blocks */
+.markdown-body tt {
+    padding: .2em .4em;
+    margin: 0;
+    background-color: var(--surfaceContainerHigh);
+    border-radius: 6px;
+}
+
+.markdown-body code br,
+.markdown-body tt br { /* Hide horizontal divider in code blocks */
+    display: none;
+}
+
+.markdown-body .highlight pre, /* Syntax highlighted code blocks */
+.markdown-body pre {
+    padding: 16px;
+    overflow: auto;
+    line-height: 1.45;
+    background-color: var(--surfaceContainer);
+    border-radius: 8px
+}
+
+.markdown-body pre > code { /* Reset styles meant for inline code when inside a syntax highlighted block */
+    padding: 0;
+    margin: 0;
+    background-color: none;
+    border-radius: 0;
 }

shared/src/commonMain/moko-resources/assets/markdown/syntax.css

@@ -0,0 +1,131 @@
+/*!
+ * GitHub Dark v0.5.0
+ * Copyright (c) 2012 - 2017 GitHub, Inc.
+ * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+ */
+
+/* This is just temporary, code theme will be synced with the app theme later */
+
+.pl-c /* comment, punctuation.definition.comment, string.comment */ {
+    color: #959da5;
+}
+
+.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.quote, markup.raw, meta.diff.header */,
+.pl-s .pl-v /* string variable */ {
+    color: #c8e1ff;
+}
+
+.pl-e /* entity */,
+.pl-en /* entity.name */ {
+    color: #b392f0;
+}
+
+.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
+.pl-s .pl-s1 /* string source */ {
+    color: #f6f8fa;
+}
+
+.pl-ent /* entity.name.tag */ {
+    color: #7bcc72;
+}
+
+.pl-k /* keyword, storage, storage.type */ {
+    color: #ea4a5a;
+}
+
+.pl-s /* string */,
+.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
+.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
+.pl-sr /* string.regexp */,
+.pl-sr .pl-cce /* string.regexp constant.character.escape */,
+.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
+.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
+    color: #79b8ff;
+}
+
+.pl-v /* variable */,
+.pl-ml /* markup.list, sublimelinter.mark.warning */ {
+    color: #fb8532;
+}
+
+.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
+    color: #d73a49;
+}
+
+.pl-ii /* invalid.illegal */ {
+    color: #fafbfc;
+    background-color: #d73a49;
+}
+
+.pl-c2 /* carriage-return */ {
+    color: #fafbfc;
+    background-color: #d73a49;
+}
+
+.pl-c2::before /* carriage-return */ {
+    content: "^M";
+}
+
+.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+    font-weight: bold;
+    color: #7bcc72;
+}
+
+.pl-mh /* markup.heading */,
+.pl-mh .pl-en /* markup.heading entity.name */,
+.pl-ms /* meta.separator */ {
+    font-weight: bold;
+    color: #0366d6;
+}
+
+.pl-mi /* markup.italic */ {
+    font-style: italic;
+    color: #f6f8fa;
+}
+
+.pl-mb /* markup.bold */ {
+    font-weight: bold;
+    color: #f6f8fa;
+}
+
+.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
+    color: #b31d28;
+    background-color: #ffeef0;
+}
+
+.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
+    color: #176f2c;
+    background-color: #f0fff4;
+}
+
+.pl-mc /* markup.changed, punctuation.definition.changed */ {
+    color: #b08800;
+    background-color: #fffdef;
+}
+
+.pl-mi2 /* markup.ignored, markup.untracked */ {
+    color: #2f363d;
+    background-color: #959da5;
+}
+
+.pl-mdr /* meta.diff.range */ {
+    font-weight: bold;
+    color: #b392f0;
+}
+
+.pl-mo /* meta.output */ {
+    color: #0366d6;
+}
+
+.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
+    color: #ffeef0;
+}
+
+.pl-sg /* sublimelinter.gutter-mark */ {
+    color: #6a737d;
+}
+
+.pl-corl /* constant.other.reference.link, string.other.link */ {
+    text-decoration: underline;
+    color: #79b8ff;
+}

shared/src/commonMain/moko-resources/assets/markdown/template.html

@@ -9,6 +9,7 @@
         />
         <meta name="HandheldFriendly" content="true" />
         <link rel="stylesheet" type="text/css" href="file:///android_asset/markdown/markdown.css" />
+        <link rel="stylesheet" type="text/css" href="file:///android_asset/markdown/syntax.css" />
 
         <style>
             /* Colors are injected in order to sync with device theming */
@@ -56,6 +57,18 @@
                 --surfaceContainerHighest: $surfaceContainerHighest$;
                 --surfaceContainerLow: $surfaceContainerLow$;
                 --surfaceContainerLowest: $surfaceContainerLowest$;
+
+
+                /* Syntax Highlighting */
+                --code: $code$;
+                --keyword: $keyword$;
+                --string: $string$;
+                --literal: $literal$;
+                --comment: $comment$;
+                --metadata: $metadata$;
+                --multilineComment: $multilineComment$;
+                --punctuation: $punctuation$;
+                --mark: $mark$;
             }
         </style>
     </head>

ui/src/androidMain/kotlin/dev/materii/gloom/ui/widget/markdown/Markdown.android.kt

@@ -1,7 +1,6 @@
 package dev.materii.gloom.ui.widget.markdown
 
 import android.annotation.SuppressLint
-import android.view.MotionEvent
 import android.view.ViewGroup
 import com.benasher44.uuid.uuid4
 import com.multiplatform.webview.web.NativeWebView
@@ -14,7 +13,6 @@ actual fun <T> onWebViewCreated(view: T) {
     nativeView.setBackgroundColor(android.graphics.Color.TRANSPARENT)
     nativeView.isVerticalScrollBarEnabled = false
     nativeView.isHorizontalScrollBarEnabled = false
-    nativeView.setOnTouchListener { _, event -> event.action == MotionEvent.ACTION_MOVE }
     nativeView.layoutParams = ViewGroup.LayoutParams(
         ViewGroup.LayoutParams.MATCH_PARENT,
         ViewGroup.LayoutParams.WRAP_CONTENT

ui/src/commonMain/kotlin/dev/materii/gloom/ui/util/markdown/MarkdownUtil.kt

@@ -1,6 +1,7 @@
 package dev.materii.gloom.ui.util.markdown
 
 import androidx.compose.material3.ColorScheme
+import dev.materii.gloom.ui.theme.CodeTheme
 import dev.materii.gloom.ui.util.hexCode
 
 object MarkdownUtil {
@@ -17,7 +18,8 @@ object MarkdownUtil {
     fun injectAppTheme(
         markdownTemplate: String,
         isLight: Boolean,
-        colorScheme: ColorScheme
+        colorScheme: ColorScheme,
+        codeTheme: CodeTheme
     ): String {
         return markdownTemplate // Insert theme colors
             .replace("\$primary$", "#" + colorScheme.primary.hexCode)
@@ -64,6 +66,17 @@ object MarkdownUtil {
             .replace("\$surfaceContainerLow$", "#" + colorScheme.surfaceContainerLow.hexCode)
             .replace("\$surfaceContainerLowest$", "#" + colorScheme.surfaceContainerLowest.hexCode)
 
+            // Code
+            .replace("\$code$", "#" + codeTheme.code.hexCode)
+            .replace("\$keyword$", "#" + codeTheme.keyword.hexCode)
+            .replace("\$string$", "#" + codeTheme.string.hexCode)
+            .replace("\$literal$", "#" + codeTheme.literal.hexCode)
+            .replace("\$comment$", "#" + codeTheme.comment.hexCode)
+            .replace("\$metadata$", "#" + codeTheme.metadata.hexCode)
+            .replace("\$multilineComment$", "#" + codeTheme.multilineComment.hexCode)
+            .replace("\$punctuation$", "#" + codeTheme.punctuation.hexCode)
+            .replace("\$mark$", "#" + codeTheme.mark.hexCode)
+
             .replace("\$theme$", if (isLight) "light" else "dark") // Support the old way of theming images
     }
 

ui/src/commonMain/kotlin/dev/materii/gloom/ui/widget/markdown/Markdown.kt

@@ -20,6 +20,7 @@ import com.multiplatform.webview.web.WebView
 import com.multiplatform.webview.web.rememberWebViewNavigator
 import com.multiplatform.webview.web.rememberWebViewStateWithHTMLData
 import dev.icerock.moko.resources.compose.readTextAsState
+import dev.materii.gloom.ui.theme.CodeTheme
 import dev.materii.gloom.ui.util.markdown.MarkdownUtil
 import dev.materii.gloom.util.LocalLinkHandler
 
@@ -74,7 +75,7 @@ fun Markdown(
     }
 
     val colorScheme = MaterialTheme.colorScheme
-    val state = rememberWebViewStateWithHTMLData(data = MarkdownUtil.injectAppTheme(template, isLight, colorScheme))
+    val state = rememberWebViewStateWithHTMLData(data = MarkdownUtil.injectAppTheme(template, isLight, colorScheme, CodeTheme.getDefault()))
 
     LaunchedEffect(state.isLoading) {
         // See shared/src/commonMain/moko-resources/assets/markdown/markdown.js