From 7f290bbf6a33e2811dbe2bd8ee905c0fa8e8db3b Mon Sep 17 00:00:00 2001
From: Alexander Petric <alpetric@users.noreply.github.com>
Date: Wed, 26 Feb 2025 11:35:10 -0500
Subject: [PATCH] fix(frontend): markdown shows single backtick in single line
 code block (#5391)

---
 .../components/display/AppMarkdown.svelte     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte b/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
index f2cb7f35cb..7ff2d6ae72 100644
--- a/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
@@ -5,12 +5,14 @@
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
-	import Markdown from 'svelte-exmarkdown'
+	import { Markdown, type Plugin } from 'svelte-exmarkdown'
+	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
+	import rehypeRaw from 'rehype-raw'
+	import { rehypeGithubAlerts } from 'rehype-github-alerts'
 	import { classNames } from '$lib/utils'
 	import { components } from '../../editor/component'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
-	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let initializing: boolean | undefined = undefined
@@ -18,6 +20,11 @@
 	export let render: boolean
 	export let configuration: RichConfigurations
 
+	const plugins: Plugin[] = [
+		gfmPlugin(),
+		{ rehypePlugin: [rehypeRaw] },
+		{ rehypePlugin: [rehypeGithubAlerts] }
+	]
 	const { app, worldStore, mode } = getContext<AppViewerContext>('AppViewerContext')
 
 	const resolvedConfig = initConfig(
@@ -86,7 +93,7 @@
 			{id}
 			bind:initializing
 			bind:result
-			>{#if result}{#key result}<Markdown md={result} plugins={[gfmPlugin()]} />{/key}{/if}
+			>{#if result}{#key result}<Markdown md={result} {plugins} />{/key}{/if}
 		</RunnableWrapper>
 	</div>
 {:else}
@@ -143,4 +150,12 @@
 	.wm-markdown h4:last-child {
 		margin-bottom: 0;
 	}
+	.wm-markdown code:not([class~="not-prose"]):not(.not-prose *)::before,
+	.wm-markdown code:not([class~="not-prose"]):not(.not-prose *)::after {
+		content: none !important;
+	}
+	.wm-markdown.prose code::before,
+	.wm-markdown.prose code::after {
+		content: none !important;
+	}
 </style>