feat: enhance markdown rendering

Adds remark-breaks for newline-to-br conversion and a custom
remarkSplitBlocks plugin to split paragraphs at hard breaks. Code blocks
over 15KB are truncated with a 'Show all' toggle for better
performance.

app/components/Markdown/ShikiHighlight.vue

@@ -5,16 +5,31 @@ const props = defineProps<{ code: string; language: string }>();
 
 const start = Date.now();
 
+const MAX_LENGTH = 15000;
+
 const renderId = `${useId()}-${hashSync(props.code + props.language)}`;
 const copied = ref(false);
 const collapsed = ref(false);
+const showFull = ref(false);
+
+const isTruncated = computed(() => props.code.length > MAX_LENGTH);
+const displayCode = computed(() => isTruncated.value && !showFull.value ? props.code.slice(0, MAX_LENGTH) : props.code);
+
+function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}kB`;
+    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)}GB`;
+}
+
+const fullSizeFormatted = computed(() => formatSize(props.code.length));
 
 const { $shiki } = useNuxtApp();
 
 const { data: parsed, clear } = await useAsyncData(`shiki-${renderId}`,
-    () => parseCode(props.code, props.language.toLowerCase()),
+    () => parseCode(displayCode.value, props.language.toLowerCase()),
     {
-        watch: [() => props.code],
+        watch: [displayCode],
         dedupe: 'defer'
     }
 );
@@ -72,6 +87,14 @@ console.log("shiki codeblock rendered in", Date.now() - start);
                 {{ parsed?.displayLang }}
             </div>
             <div class="flex gap-2">
+                <button v-if="isTruncated && !showFull" @click="showFull = true"
+                    class="flex items-center px-1 gap-0.5 rounded-md @hover:bg-[var(--color-hover)] transition-colors duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                    Show all ({{ fullSizeFormatted }})
+                </button>
+                <button v-else-if="isTruncated" @click="showFull = false"
+                    class="flex items-center px-1 gap-0.5 rounded-md @hover:bg-[var(--color-hover)] transition-colors duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                    Collapse
+                </button>
                 <button @click="copyCode()"
                     class="flex items-center px-1 gap-0.5 rounded-md @hover:bg-[var(--color-hover)] transition-colors duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                     {{ copied ? 'Copied' : 'Copy' }}