Add custom list rendering for body frontmatter

- Set the list style type based on whether the list is ordered or
  unordered
- Set list-style-position to inside to avoid weird layouts when text is
  centered

src/pages/c/[configKind]/[tip].astro

@@ -51,6 +51,7 @@ export async function getStaticPaths() {
       });
       return `<div class="rounded-md px-2 bg-gray-800 w-full overflow-x-auto"><pre><code class="language-${lang}">${html}</code></pre></div>`;
     };
+
     return marked(markdown, { renderer });
   }
 

src/pages/c/[configKind]/index.astro

@@ -12,11 +12,20 @@ import type { BreadCrumbList } from '../../../components/Navigation/BreadCrumb.a
 
 export async function getStaticPaths() {
     const configKinds = await getCollection("configKinds");
+    const renderer = new marked.Renderer();
+
+    // Custom render lists in the body
+    renderer.list = (body, ordered) => {
+      const type = ordered ? 'ol' : 'ul';
+      const className = ordered ? 'list-decimal' : 'list-disc';
+
+      return `<${type} class="${className} list-inside">${body}</${type}>`
+    };
 
     const paths = await Promise.all(configKinds.map(async (configKind) => {
         const allTips = await getCollection("tips");
         const tips = allTips.filter(tip => tip.data.kind.id === configKind.id);
-        const htmlBody = marked(configKind.data.body);
+        const htmlBody = marked(configKind.data.body, { renderer });
         return {
             params: { configKind: configKind.id },
             props: { configKind, tips, htmlBody },
@@ -67,4 +76,4 @@ const breadCrumbList: BreadCrumbList = [
         ))}
       </div>
     </div>
-</Layout>
+</Layout>