feat: mathjax

I know, I'm ~~a little~~over-opinionated.

deno.json

@@ -34,7 +34,9 @@
     "preact": "https://esm.sh/v135/preact@10.19.5",
     "preact/": "https://esm.sh/v135/preact@10.19.5/",
     "@mdx-js/mdx": "npm:@mdx-js/mdx@3.0.1",
+    "rehype-mathjax": "npm:rehype-mathjax@6.0.0",
     "remark-frontmatter": "npm:remark-frontmatter@5.0.0",
+    "remark-math": "npm:remark-math@6.0.0",
     "remark-mdx-frontmatter": "npm:remark-mdx-frontmatter@4.0.0",
     "remark-preset-lint-consistent": "npm:remark-preset-lint-consistent@5.1.2",
     "remark-preset-lint-recommended": "npm:remark-preset-lint-recommended@6.1.3",

src/content/geothermal/environment.mdx

@@ -4,8 +4,8 @@ description: When it comes to carbon emissions, geothermal energy is very effici
 ---
 
 When it comes to carbon emissions, geothermal energy is very efficient.
-It produces 10 times less CO2 than coal!
-But it still isn’t as efficient as solar as it produces roughly 3x more CO2.
+It produces 10 times less $$CO_{2}$$ than coal!
+But it still isn’t as efficient as solar as it produces roughly 3x more $$CO_{2}$$.
 Possibly the biggest issue with geothermal though is the land it takes to build the infrastructure.
 The building of larger plants can often disrupt ecosystems but this effect comes with all types of energy.
 This effect is mitigated though with smaller systems such as ones installed on houses.

src/routes/solutions/[category]/[[slug]].tsx

@@ -78,7 +78,7 @@ export default function Solution({
         >
           <p class="my-4 dark:text-white">{description}</p>
         </Cover>
-        <article class="py-10 px-40 prose prose-lg dark:prose-invert max-w-none prose-headings:flex prose-headings:flex-row prose-headings:items-center bg-slate-200 dark:bg-slate-800">
+        <article class="py-10 px-40 prose prose-lg dark:prose-invert max-w-none prose-headings:flex prose-headings:flex-row prose-headings:items-center bg-slate-200 dark:bg-slate-800 [&_mjx-container>svg]:inline">
           <data.page.default />
         </article>
       </main>

src/routes/solutions/[category]/index.tsx

@@ -131,7 +131,7 @@ export default function Category({
         >
           <p class="my-4 dark:text-white">{description}</p>
         </Cover>
-        <article class="py-10 px-40 prose prose-lg dark:prose-invert max-w-none prose-headings:flex prose-headings:flex-row prose-headings:items-center bg-slate-200 dark:bg-slate-800">
+        <article class="py-10 px-40 prose prose-lg dark:prose-invert max-w-none prose-headings:flex prose-headings:flex-row prose-headings:items-center bg-slate-200 dark:bg-slate-800 [&_mjx-container>svg]:inline">
           <h2>What is it?</h2>
           <p>
             {whatShort}.

tool/compile-mdx.ts

@@ -6,7 +6,9 @@ import {
   resolve,
 } from "$std/path/mod.ts";
 import { type CompileOptions, compile } from "@mdx-js/mdx";
+import rehypeMathjax from "rehype-mathjax";
 import remarkFrontmatter from "remark-frontmatter";
+import remarkMath from "remark-math";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import remarkPresetLintConsistent from "remark-preset-lint-consistent";
 import remarkPresetLintRecommended from "remark-preset-lint-recommended";
@@ -151,11 +153,15 @@ const remarkPlugins = [
   remarkPresetLintConsistent,
   // @ts-expect-error: remark-lint it still on Unified 10, but it works fine with Unified 11.
   remarkPresetLintRecommended,
+  remarkMath,
 ] as const satisfies PluggableList;
 
+const rehypePlugins = [rehypeMathjax] as const satisfies PluggableList;
+
 /** MDX compilation options. */
 const compileOptions = {
   jsxImportSource: "preact",
+  rehypePlugins,
   // @ts-expect-error: Typescript dislikes current Deno deduping of Unified.
   remarkPlugins,
 } as const satisfies CompileOptions;