Add smartypants

src/components/molecules/Markdown.svelte

@@ -14,8 +14,10 @@
   import TableRow from "../atoms/TableRow.svelte";
   import TableCell from "../atoms/TableCell.svelte";
   import Image from "../atoms/Image.svelte";
-  import { markedEmoji } from "marked-emoji";
   import emojis from "$lib/emojis";
+  import { smartypants } from "$lib/utils";
+
+  import { markedEmoji } from "marked-emoji";
 
   type Props = {
     markdown: string;
@@ -24,6 +26,7 @@
   const { markdown }: Props = $props();
 
   marked.use(markedEmoji({ emojis }));
+
   const markdownTokens = marked.lexer(markdown);
 </script>
 
@@ -93,7 +96,7 @@
       {@render markdownToken(childToken)}
     {/each}
   {:else if token.text}
-    {token.text}
+    {@html smartypants(token.text)}
   {:else}{@html "<!-- This token does not hold value -->"}{/if}
 {/snippet}
 

src/components/molecules/MarkdownInline.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Token } from "marked";
   import HighlightedCode from "../atoms/HighlightedCode.svelte";
+  import { smartypants } from "$lib/utils";
 
   type Props = {
     markdownToken: Token;
@@ -35,8 +36,11 @@
     {#each token.tokens as childToken}
       {@render inlineMarkdown(childToken)}
     {/each}
-  {:else}
+  {:else if token.type === "codespan"}
+    <!-- don't smartypants code -->
     {@html token.text}
+  {:else}
+    {@html smartypants(token.text)}
   {/if}
 {/snippet}
 

src/lib/utils.ts

@@ -0,0 +1,23 @@
+export function smartypants(text: string): string {
+	const replacements = [
+		["---", "—"],
+		[",,", "¸"],
+		["(c)", "ⓒ"],
+		["(C)", "Ⓒ"],
+		["(r)", "ⓡ"],
+		["(R)", "Ⓡ"],
+		["(tm)", "™"],
+		["(TM)", "™"],
+		["(p)", "ⓟ"],
+		["(P)", "Ⓟ"],
+		["+-", "±"],
+	];
+
+	let result = text;
+
+	for (const [search, replacement] of replacements) {
+		result = result.replaceAll(search, replacement);
+	}
+
+	return result;
+}