allow markdown in mdx page titles (carefully)

mainly for `code` but also bold and italic text

components/notes/List.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Markdown from "markdown-to-jsx";
 import { format } from "date-fns";
 
 import styles from "./List.module.scss";
@@ -22,7 +23,9 @@ const List = ({ notesByYear }) => {
               <span className={styles.date}>{format(new Date(note.date), "MMM d")}</span>
               <span>
                 <Link href={`/notes/${note.slug}/`} prefetch={false}>
-                  <a>{note.title}</a>
+                  <a>
+                    <Markdown options={{ disableParsingRawHTML: true, forceInline: true }}>{note.title}</Markdown>
+                  </a>
                 </Link>
               </span>
             </li>

components/notes/Meta.module.scss

@@ -67,4 +67,12 @@
     padding-bottom: 0;
     color: inherit;
   }
+
+  code {
+    font-size: 1em;
+    background: none !important;
+    border: 0 !important;
+    margin: 0 0.075em !important;
+    padding: 0 !important;
+  }
 }

components/notes/Meta.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { format } from "date-fns";
+import Markdown from "markdown-to-jsx";
 import Hits from "../hits/Hits";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../icons";
 import * as config from "../../lib/config";
@@ -61,7 +62,9 @@ const Meta = ({ title, date, slug, tags = [] }: Props) => (
 
     <h1 className={styles.title}>
       <Link href={`/notes/${slug}/`}>
-        <a>{title}</a>
+        <a>
+          <Markdown options={{ disableParsingRawHTML: true, forceInline: true }}>{title}</Markdown>
+        </a>
       </Link>
     </h1>
   </>