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>
   </>

package.json

@@ -42,6 +42,7 @@
     "hex-rgb": "^5.0.0",
     "highlight.js": "^11.3.1",
     "is-absolute-url": "^4.0.1",
+    "markdown-to-jsx": "^7.1.5",
     "modern-normalize": "github:sindresorhus/modern-normalize#1fc6b5a86676b7ac8abc62d04d6080f92debc70f",
     "next": "v12.0.8-canary.16",
     "next-mdx-remote": "^3.0.8",

yarn.lock

@@ -3875,6 +3875,11 @@ markdown-escapes@^1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
   integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
+markdown-to-jsx@^7.1.5:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.1.5.tgz#caf72ad8a8c34a2bb692c4d17e44aabbe4eb19fd"
+  integrity sha512-YQEMMMCX3PYOWtUAQu8Fmz5/sH09s17eyQnDubwaAo8sWmnRTT1og96EFv1vL59l4nWfmtF3L91pqkuheVqRlA==
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"