From 05e70ea641688caf135cb73290cb83bdb0dce1fd Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Sun, 5 Jul 2026 03:59:57 +0200
Subject: [PATCH] extracted actual highlighting to a CodeBlock component

---
 src/components/CodeBlock.svelte         | 129 ++++++++++++++++++++++++
 src/components/PlainTextWithCode.svelte | 129 +-----------------------
 src/utils/code_markup_parser.ts         |   2 +-
 3 files changed, 133 insertions(+), 127 deletions(-)
 create mode 100644 src/components/CodeBlock.svelte

diff --git a/src/components/CodeBlock.svelte b/src/components/CodeBlock.svelte
new file mode 100644
index 0000000..4ab3a55
--- /dev/null
+++ b/src/components/CodeBlock.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { sanitizeHTML } from '../utils.js';
+
+  let { text, language }: { text: string, language?: string | undefined } = $props();
+
+  let highlighterLoaded = $state(window.Highlighter !== undefined);
+
+  $effect(() => {
+    let onHighlighterLoaded = () => { highlighterLoaded = true };
+
+    window.addEventListener('highlighter-loaded', onHighlighterLoaded);
+
+    return () => {
+      window.removeEventListener('highlighter-loaded', onHighlighterLoaded);
+    };
+  });
+
+  let highlightResult: CodeHighlightResult = $derived.by(() => {
+    if (highlighterLoaded && window.Highlighter) {
+      return window.Highlighter.highlightCodeBlock(text, language);
+    } else {
+      return { kind: 'plain', text: text };
+    }
+  });
+
+  let codeClass = $derived(language ? `language-${language}` : "");
+</script>
+
+{#if highlightResult.kind == 'highlighted'}
+  <pre><code class={codeClass}>{@html sanitizeHTML(highlightResult.html)}</code></pre>
+{:else}
+  <pre><code>{highlightResult.text}</code></pre>
+{/if}
+
+<style>
+  pre {
+    overflow-x: auto;
+    max-width: 100%;
+    margin: 10px 0;
+    padding: 8px 10px;
+    border-radius: 6px;
+    background-color: rgba(0, 0, 0, 0.07);
+  }
+
+  code {
+    display: block;
+    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+    font-size: 0.92em;
+    background-color: transparent;
+    border-radius: 0;
+    padding: 0;
+    white-space: pre;
+  }
+
+  code :global(.hljs-keyword),
+  code :global(.hljs-selector-tag),
+  code :global(.hljs-title.function_) {
+    color: #9d174d;
+  }
+
+  code :global(.hljs-built_in),
+  code :global(.hljs-title.class_),
+  code :global(.hljs-type) {
+    color: #7c3aed;
+  }
+
+  code :global(.hljs-string),
+  code :global(.hljs-attr),
+  code :global(.hljs-symbol) {
+    color: #047857;
+  }
+
+  code :global(.hljs-number),
+  code :global(.hljs-literal) {
+    color: #b45309;
+  }
+
+  code :global(.hljs-comment),
+  code :global(.hljs-quote) {
+    color: #6b7280;
+    font-style: italic;
+  }
+
+  code :global(.hljs-meta),
+  code :global(.hljs-tag),
+  code :global(.hljs-name) {
+    color: #0369a1;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    pre {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    code :global(.hljs-keyword),
+    code :global(.hljs-selector-tag),
+    code :global(.hljs-title.function_) {
+      color: #f472b6;
+    }
+
+    code :global(.hljs-built_in),
+    code :global(.hljs-title.class_),
+    code :global(.hljs-type) {
+      color: #c4b5fd;
+    }
+
+    code :global(.hljs-string),
+    code :global(.hljs-attr),
+    code :global(.hljs-symbol) {
+      color: #6ee7b7;
+    }
+
+    code :global(.hljs-number),
+    code :global(.hljs-literal) {
+      color: #fbbf24;
+    }
+
+    code :global(.hljs-comment),
+    code :global(.hljs-quote) {
+      color: #9ca3af;
+    }
+
+    code :global(.hljs-meta),
+    code :global(.hljs-tag),
+    code :global(.hljs-name) {
+      color: #7dd3fc;
+    }
+  }
+</style>
diff --git a/src/components/PlainTextWithCode.svelte b/src/components/PlainTextWithCode.svelte
index 3eaad59..c00139a 100644
--- a/src/components/PlainTextWithCode.svelte
+++ b/src/components/PlainTextWithCode.svelte
@@ -1,38 +1,11 @@
 <script lang="ts">
-  import { sanitizeHTML } from '../utils.js';
-  import { CodeMarkupParser, type Segment } from '../utils/code_markup_parser.js';
+  import { CodeMarkupParser } from '../utils/code_markup_parser.js';
+  import CodeBlock from './CodeBlock.svelte';
 
   let { text, renderCode = false }: { text: string, renderCode?: boolean } = $props();
 
   let parser = $derived(new CodeMarkupParser(text));
   let segments = $derived(renderCode ? parser.segments() : [parser.asSingleSegment()]);
-  let highlighterLoaded = $state(window.Highlighter != null);
-
-  $effect(() => {
-    function onHighlighterLoaded() {
-      highlighterLoaded = true;
-    }
-
-    window.addEventListener('highlighter-loaded', onHighlighterLoaded);
-    return () => window.removeEventListener('highlighter-loaded', onHighlighterLoaded);
-  });
-
-  function codeBlockClass(segment: Segment): string {
-    return segment.language ? `language-${segment.language}` : "";
-  }
-
-  function highlightCodeBlock(segment: Segment): CodeHighlightResult {
-    if (segment.kind == 'codeBlock') {
-      highlighterLoaded;
-
-      return window.Highlighter?.highlightCodeBlock(segment.text, segment.language) ?? {
-        kind: 'plain',
-        text: segment.text
-      };
-    } else {
-      return { kind: 'plain', text: segment.text };
-    }
-  }
 </script>
 
 {#each segments as segment}
@@ -45,13 +18,7 @@
   {:else if segment.kind == 'inlineCode'}
     <code>{segment.text}</code>
   {:else}
-    {@const result = highlightCodeBlock(segment)}
-
-    {#if result.kind == 'highlighted'}
-      <pre><code class={codeBlockClass(segment)}>{@html sanitizeHTML(result.html)}</code></pre>
-    {:else}
-      <pre><code>{result.text}</code></pre>
-    {/if}
+    <CodeBlock text={segment.text} language={segment.language} />
   {/if}
 {/each}
 
@@ -64,99 +31,9 @@
     padding: 1px 3px;
   }
 
-  pre {
-    overflow-x: auto;
-    max-width: 100%;
-    margin: 10px 0;
-    padding: 8px 10px;
-    border-radius: 6px;
-    background-color: rgba(0, 0, 0, 0.07);
-  }
-
-  pre code {
-    display: block;
-    background-color: transparent;
-    border-radius: 0;
-    padding: 0;
-    white-space: pre;
-  }
-
-  pre code :global(.hljs-keyword),
-  pre code :global(.hljs-selector-tag),
-  pre code :global(.hljs-title.function_) {
-    color: #9d174d;
-  }
-
-  pre code :global(.hljs-built_in),
-  pre code :global(.hljs-title.class_),
-  pre code :global(.hljs-type) {
-    color: #7c3aed;
-  }
-
-  pre code :global(.hljs-string),
-  pre code :global(.hljs-attr),
-  pre code :global(.hljs-symbol) {
-    color: #047857;
-  }
-
-  pre code :global(.hljs-number),
-  pre code :global(.hljs-literal) {
-    color: #b45309;
-  }
-
-  pre code :global(.hljs-comment),
-  pre code :global(.hljs-quote) {
-    color: #6b7280;
-    font-style: italic;
-  }
-
-  pre code :global(.hljs-meta),
-  pre code :global(.hljs-tag),
-  pre code :global(.hljs-name) {
-    color: #0369a1;
-  }
-
   @media (prefers-color-scheme: dark) {
     code {
       background-color: rgba(255, 255, 255, 0.12);
     }
-
-    pre {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    pre code :global(.hljs-keyword),
-    pre code :global(.hljs-selector-tag),
-    pre code :global(.hljs-title.function_) {
-      color: #f472b6;
-    }
-
-    pre code :global(.hljs-built_in),
-    pre code :global(.hljs-title.class_),
-    pre code :global(.hljs-type) {
-      color: #c4b5fd;
-    }
-
-    pre code :global(.hljs-string),
-    pre code :global(.hljs-attr),
-    pre code :global(.hljs-symbol) {
-      color: #6ee7b7;
-    }
-
-    pre code :global(.hljs-number),
-    pre code :global(.hljs-literal) {
-      color: #fbbf24;
-    }
-
-    pre code :global(.hljs-comment),
-    pre code :global(.hljs-quote) {
-      color: #9ca3af;
-    }
-
-    pre code :global(.hljs-meta),
-    pre code :global(.hljs-tag),
-    pre code :global(.hljs-name) {
-      color: #7dd3fc;
-    }
   }
 </style>
diff --git a/src/utils/code_markup_parser.ts b/src/utils/code_markup_parser.ts
index f003105..34742bf 100644
--- a/src/utils/code_markup_parser.ts
+++ b/src/utils/code_markup_parser.ts
@@ -1,6 +1,6 @@
 import type { ByteSlice, Facet } from '../../lib/rich_text_lite.js';
 
-export type Segment = {
+type Segment = {
   kind: 'text' | 'inlineCode' | 'codeBlock';
   text: string;
   start: number;
-- 
2.51.2