fix(ui): preserve code spans adjacent to tildes (anomalyco#35835)

Author: Hona

bun.lock

@@ -70,7 +70,7 @@
       "hono-openapi": "1.1.2",
       "fuzzysort": "3.1.0",
       "luxon": "3.6.1",
-      "marked": "17.0.1",
+      "marked": "17.0.6",
       "marked-shiki": "1.2.1",
       "remend": "1.3.0",
       "@playwright/test": "1.59.1",

package.json

@@ -0,0 +1,15 @@
+import { expect, test } from "bun:test"
+import { Marked } from "marked"
+import { markedCodeSpanBoundary } from "./marked-code-span"
+
+test("preserves code spans adjacent to tildes", async () => {
+  const marked = new Marked(markedCodeSpanBoundary)
+
+  expect(await marked.parse("~`0.1576` to measurement-window-only `0.00092`")).toBe(
+    "<p>~<code>0.1576</code> to measurement-window-only <code>0.00092</code></p>\n",
+  )
+  expect(await marked.parse("`before`~`after`")).toBe(
+    "<p><code>before</code>~<code>after</code></p>\n",
+  )
+  expect(await marked.parse("~~`deleted code`~~")).toBe("<p><del><code>deleted code</code></del></p>\n")
+})

packages/ui/src/context/marked-code-span.test.ts

@@ -0,0 +1,17 @@
+import type { MarkedExtension } from "marked"
+
+// Keep adjacent tilde and backtick runs separate until markedjs/marked#4011 is released.
+export const markedCodeSpanBoundary = {
+  tokenizer: {
+    inlineText(src) {
+      const match = /^(`+(?=~)|~+(?=`))/.exec(src)
+      if (!match) return false
+      return {
+        type: "text",
+        raw: match[0],
+        text: match[0],
+        escaped: this.lexer.state.inRawBlock,
+      }
+    },
+  },
+} satisfies MarkedExtension

packages/ui/src/context/marked-code-span.ts

@@ -3,6 +3,7 @@ import markedShiki from "marked-shiki"
 import katex from "katex"
 import { bundledLanguages, type BundledLanguage } from "shiki"
 import { createSimpleContext } from "./helper"
+import { markedCodeSpanBoundary } from "./marked-code-span"
 import { getSharedHighlighter, registerCustomTheme, ThemeRegistrationResolved } from "@pierre/diffs"
 
 export const OpenCodeTheme = {
@@ -521,6 +522,7 @@ export const { use: useMarked, provider: MarkedProvider } = createSimpleContext(
   name: "Marked",
   init: (props: { nativeParser?: NativeMarkdownParser }) => {
     const jsParser = marked.use(
+      markedCodeSpanBoundary,
       {
         renderer: {
           link({ href, title, text }) {