From c08dde04768bd69c55c5162004767d23f19631e9 Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Fri, 3 Jul 2026 23:37:49 +0200
Subject: [PATCH] mark inline code and code blocks

---
 src/components/PlainTextWithCode.svelte  |  59 +++++++
 src/components/RichTextFromFacets.svelte |  20 ++-
 src/components/posts/PostBody.svelte     |  11 +-
 src/utils/code_markup_parser.ts          | 192 +++++++++++++++++++++++
 4 files changed, 272 insertions(+), 10 deletions(-)
 create mode 100644 src/components/PlainTextWithCode.svelte
 create mode 100644 src/utils/code_markup_parser.ts

diff --git a/src/components/PlainTextWithCode.svelte b/src/components/PlainTextWithCode.svelte
new file mode 100644
index 0000000..7ef40f6
--- /dev/null
+++ b/src/components/PlainTextWithCode.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { CodeMarkupParser } from '../utils/code_markup_parser.js';
+
+  let { text, renderCode = false }: { text: string, renderCode?: boolean } = $props();
+
+  let parser = $derived(new CodeMarkupParser(text));
+  let segments = $derived(renderCode ? parser.segments() : [parser.asSingleSegment()]);
+</script>
+
+{#each segments as segment}
+  {#if segment.kind == 'text'}
+    {@const lines = segment.text.split("\n")}
+
+    {#each lines as line, i}
+      {#if i > 0}<br>{/if}{line}
+    {/each}
+  {:else if segment.kind == 'inlineCode'}
+    <code>{segment.text}</code>
+  {:else}
+    <pre><code class={segment.language ? `language-${segment.language}` : undefined}>{segment.text}</code></pre>
+  {/if}
+{/each}
+
+<style>
+  code {
+    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+    font-size: 0.92em;
+    background-color: rgba(0, 0, 0, 0.07);
+    border-radius: 4px;
+    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;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    code {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+
+    pre {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+</style>
diff --git a/src/components/RichTextFromFacets.svelte b/src/components/RichTextFromFacets.svelte
index 1ce8a38..c907cea 100644
--- a/src/components/RichTextFromFacets.svelte
+++ b/src/components/RichTextFromFacets.svelte
@@ -2,10 +2,20 @@
   import { RichText, type Facet } from '../../lib/rich_text_lite.js';
   import { linkToHashtagPage } from '../router.js';
   import { isValidURL } from '../utils.js';
+  import { CodeMarkupParser } from '../utils/code_markup_parser.js';
+  import PlainTextWithCode from './PlainTextWithCode.svelte';
 
-  let { text, facets }: { text: string, facets: Facet[] } = $props();
+  type Props = {
+    text: string;
+    facets: Facet[] | undefined;
+    renderCode?: boolean;
+  }
 
-  let richText = $derived(new RichText({ text, facets }));
+  let { text, facets, renderCode = false }: Props = $props();
+
+  let parser = $derived(new CodeMarkupParser(text));
+  let filteredFacets = $derived(renderCode ? parser.removeFacetsInCodeSegments(facets) : facets);
+  let richText = $derived(new RichText({ text, facets: filteredFacets }));
   let segments = $derived(richText.segments());
 </script>
 
@@ -21,10 +31,6 @@
   {:else if segment.tag}
     <a href={linkToHashtagPage(segment.tag.tag)}>{segment.text}</a>
   {:else}
-    {@const lines = segment.text.split("\n")}
-
-    {#each lines as line, i}
-      {#if i > 0}<br>{/if}{line}
-    {/each}
+    <PlainTextWithCode text={segment.text} {renderCode} />
   {/if}
 {/each}
diff --git a/src/components/posts/PostBody.svelte b/src/components/posts/PostBody.svelte
index 583acc2..9925b64 100644
--- a/src/components/posts/PostBody.svelte
+++ b/src/components/posts/PostBody.svelte
@@ -67,12 +67,17 @@
     {@html sanitizeHTML(post.originalFediContent)}
   </div>
 {:else}
-  <p class="body" bind:this={mainElement}>
-    <RichTextFromFacets text={post.text} facets={post.facets as Facet[]} />
-  </p>
+  <div class="body" bind:this={mainElement}>
+    <RichTextFromFacets text={post.text} facets={post.facets as Facet[] | undefined} renderCode={true} />
+  </div>
 {/if}
 
 <style>
+  div.body {
+    margin-top: 10px;
+    margin-bottom: 1em;
+  }
+
   .bridged-body :global(p + p) {
     margin-top: 18px;
   }
diff --git a/src/utils/code_markup_parser.ts b/src/utils/code_markup_parser.ts
new file mode 100644
index 0000000..2a1edeb
--- /dev/null
+++ b/src/utils/code_markup_parser.ts
@@ -0,0 +1,192 @@
+import type { ByteSlice, Facet } from '../../lib/rich_text_lite.js';
+
+type Segment = {
+  kind: 'text' | 'inlineCode' | 'codeBlock';
+  text: string;
+  start: number;
+  end: number;
+  language?: string | undefined;
+};
+
+type Line = {
+  text: string;
+  start: number;
+  end: number;
+  nextStart: number;
+}
+
+const encoder = new TextEncoder();
+const codeBlockOpen = /^```([A-Za-z0-9\+\.\-]+)?$/;
+const codeBlockClose = /^```$/;
+
+export class CodeMarkupParser {
+  text: string;
+
+  constructor(text: string) {
+    this.text = text;
+  }
+
+  asSingleSegment(): Segment {
+    return { kind: 'text', text: this.text, start: 0, end: this.text.length };
+  }
+
+  segments(): Segment[] {
+    if (!this.text.includes('`')) {
+      return [this.asSingleSegment()];
+    }
+
+    let segments: Segment[] = [];
+    let cursor = 0;
+
+    let codeBlocks = findCodeBlocks(this.text);
+
+    for (let block of codeBlocks) {
+      let beforeBlock = splitInlineCodeSegments(this.text, cursor, block.start);
+      segments.push(...beforeBlock, block);
+      cursor = block.end;
+    }
+
+    let afterBlocks = splitInlineCodeSegments(this.text, cursor);
+    segments.push(...afterBlocks);
+
+    return segments;
+  }
+
+  removeFacetsInCodeSegments(facets: Facet[] | undefined): Facet[] | undefined {
+    if (!facets || !this.text.includes('`')) {
+      return facets;
+    }
+
+    let codeRanges = this.segments()
+      .filter(s => s.kind != 'text')
+      .map(s => byteSliceOfSegment(this.text, s));
+
+    if (codeRanges.length == 0) {
+      return facets;
+    }
+
+    return facets.filter(facet => {
+      let overlaps = codeRanges.some(r => facet.index.byteStart < r.byteEnd && facet.index.byteEnd > r.byteStart);
+      return !overlaps;
+    });
+  }
+}
+
+function findCodeBlocks(text: string): Segment[] {
+  let blocks: Segment[] = [];
+  let lines = splitLines(text);
+
+  for (let i = 0; i < lines.length; i++) {
+    let openingLine = lines[i];
+    let match = openingLine.text.trim().match(codeBlockOpen);
+
+    if (!match) {
+      continue;
+    }
+
+    let closingLineIndex = lines.findIndex((line, n) => n > i && codeBlockClose.test(line.text.trim()));
+
+    if (closingLineIndex == -1) {
+      return blocks;
+    } else {
+      let closingLine = lines[closingLineIndex];
+      let code = text.slice(openingLine.nextStart, closingLine.start);
+
+      blocks.push({
+        kind: 'codeBlock',
+        text: code,
+        language: match[1],
+        start: openingLine.start,
+        end: closingLine.nextStart
+      });
+
+      i = closingLineIndex;
+    }
+  }
+
+  return blocks;
+}
+
+function splitInlineCodeSegments(text: string, start: number, end = text.length): Segment[] {
+  let parts: Segment[] = [];
+  let cursor = start;
+
+  while (cursor < end) {
+    let opening = findSingleBacktick(text, cursor, end);
+
+    if (opening === undefined) {
+      parts.push({ kind: 'text', text: text.slice(cursor, end), start: cursor, end: end });
+      break;
+    }
+
+    let lineEnd = text.indexOf('\n', opening);
+
+    if (lineEnd == -1 || lineEnd > end) {
+      lineEnd = end;
+    }
+
+    let closing = findSingleBacktick(text, opening + 1, lineEnd);
+
+    if (closing === undefined) {
+      parts.push({ kind: 'text', text: text.slice(cursor, end), start: cursor, end: end });
+      break;
+    }
+
+    parts.push({ kind: 'text', text: text.slice(cursor, opening), start: cursor, end: opening });
+
+    parts.push({
+      kind: 'inlineCode',
+      text: text.slice(opening + 1, closing),
+      start: opening,
+      end: closing + 1
+    });
+
+    cursor = closing + 1;
+  }
+
+  return parts.filter(p => p.text.length > 0);
+}
+
+function splitLines(text: string): Line[] {
+  let lines: Line[] = [];
+  let start = 0;
+
+  while (start < text.length) {
+    let lineEnd = text.indexOf('\n', start);
+
+    if (lineEnd !== -1) {
+      let line = text.slice(start, lineEnd);
+      lines.push({ start: start, end: lineEnd, nextStart: lineEnd + 1, text: line });
+
+      start = lineEnd + 1;
+    } else {
+      let line = text.slice(start);
+      lines.push({ start: start, end: text.length, nextStart: text.length, text: line });
+
+      break;
+    }
+  }
+
+  return lines;
+}
+
+function findSingleBacktick(text: string, start: number, end = text.length): number | undefined {
+  let i = text.indexOf('`', start);
+
+  while (i != -1 && i < end) {
+    if (text[i-1] != '`' && text[i+1] != '`') { return i }
+    i = text.indexOf('`', i + 1);
+  }
+
+  return undefined;
+}
+
+function byteSliceOfSegment(text: string, segment: Segment): ByteSlice {
+  let beforeSegment = encoder.encode(text.slice(0, segment.start));
+  let insideSegment = encoder.encode(text.slice(segment.start, segment.end));
+
+  return {
+    byteStart: beforeSegment.byteLength,
+    byteEnd: beforeSegment.byteLength + insideSegment.byteLength
+  };
+}
-- 
2.51.2