Add FntColor and Highlight modules

src/components/FntColor.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function FntColor({ children, color }) {
+  return (
+    <span
+      style={{
+        color: color,
+      }}
+    >
+      {children}
+    </span>
+  );
+}

src/components/Highlight.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function Highlight({ children, color }) {
+  return (
+    <span
+      style={{
+        backgroundColor: color,
+        borderRadius: "2px",
+        color: "#fff",
+        padding: "0.2rem",
+      }}
+    >
+      {children}
+    </span>
+  );
+}

src/theme/MDXComponents.js

@@ -0,0 +1,14 @@
+import React from "react";
+// Import the original mapper
+import MDXComponents from "@theme-original/MDXComponents";
+import Highlight from "@site/src/components/Highlight";
+import FntColor from "@site/src/components/FntColor";
+
+export default {
+  // Re-use the default mapping
+  ...MDXComponents,
+  // Map the "<Highlight>" tag to our Highlight component
+  // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
+  Highlight,
+  FntColor,
+};