ttcMD: Added line breaks to text elements

app/help/[article]/page.tsx

@@ -17,10 +17,10 @@ export default async function Help({
     <>
       <section className="heading">
         <h2 className="strapline">Help</h2>
-        <h1>How to use TTCMD</h1>
+        <h1>{decodeURIComponent(params.article).replace(".md", "")}</h1>
       </section>
       <section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
-        <div className="col-span-2 card">
+        <div className="col-span-2">
           <Suspense>
             <TTCMD body={body} />
           </Suspense>

components/ttcmd/index.tsx

@@ -141,7 +141,11 @@ function render(token: Token, usedIds: string[]) {
         </Poppable>
       );
     case "text":
-      return <span>{token.content}</span>;
+      return (
+        <span className="whitespace-pre-wrap">
+          {token.content.replaceAll("\\n", "\n")}
+        </span>
+      );
     case "p":
       return (
         <div className="p">

md/help articles/How to use ttcMD.md

@@ -7,6 +7,7 @@
     - [Pop-outs](#pop-outs)
   - [Block-level Elements](#block-level-elements)
     - [Accordions](#accordions)
+    - [Card](#card)
 
 # How do you use ttcMD?
 
@@ -82,3 +83,40 @@ I can even include a card, like this one
 ]]
 [/accordion]
 /[]
+
+### Card
+
+Cards are just neat boxes. They can hold any markdown within them, but not other cards (it looks bad).
+
+[][][]
+```
+[[
+Card text!
+
+This is a real wild thing! Look, an accordion!
+
+[accordion Hello, am accordion!]
+super secret! I'll never tell!
+[/accordion]
+]]
+```
+[[
+Card text!
+
+This is a real wild thing! Look, an accordion!
+
+[accordion Hello, am accordion!]
+
+Never gonna give you up,\n
+Never gonna let you down,\n
+Never gonna run around\n
+And desert you.
+
+Never gonna make you cry,\n
+Never gonna say good-bye,\n
+Never gonna tell a lie\n
+And hurt you.
+
+[/accordion]
+]]
+/[]