| null | undefined} [options]
+ * Configuration (optional).
+ * @returns
+ * Transform.
+ */
+ return function (options) {
+ /**
+ * Transform.
+ *
+ * @param {Root} tree
+ * Tree.
+ * @param {VFile} file
+ * File.
+ * @returns {undefined}
+ * Nothing.
+ */
+ return function (tree, file) {
+ const renderer = createRenderer(options || emptyOptions);
+ let found = false;
+ /** @type {Element | Root} */
+ let context = tree;
+
+ visitParents(tree, "element", function (element, parents) {
+ const classes = Array.isArray(element.properties.className) ? element.properties.className : emptyClasses;
+ // This class can be generated from markdown with ` ```math `.
+ const languageMath = classes.includes("language-math");
+ // This class is used by `remark-math` for flow math (block, `$$\nmath\n$$`).
+ const mathDisplay = classes.includes("math-display");
+ // This class is used by `remark-math` for text math (inline, `$math$`).
+ const mathInline = classes.includes("math-inline");
+ let display = mathDisplay;
+
+ // Find ``.
+ if (element.tagName === "head") {
+ context = element;
+ }
+
+ // Any class is fine.
+ if (!languageMath && !mathDisplay && !mathInline) {
+ return;
+ }
+
+ let parent = parents[parents.length - 1];
+ let scope = element;
+
+ // If this was generated with ` ```math `, replace the `` and use
+ // display.
+ if (
+ element.tagName === "code" &&
+ languageMath &&
+ parent &&
+ parent.type === "element" &&
+ parent.tagName === "pre"
+ ) {
+ scope = parent;
+ parent = parents[parents.length - 2];
+ display = true;
+ }
+
+ /* c8 ignore next -- verbose to test. */
+ if (!parent) return;
+
+ if (!found && renderer.register) renderer.register();
+ found = true;
+
+ const text = toText(scope, { whitespace: "pre" });
+ /** @type {Array | undefined} */
+ let result;
+
+ try {
+ result = renderer.render(text, { display });
+ } catch (error) {
+ const cause = /** @type {Error} */ (error);
+
+ file.message("Could not render math with mathjax", {
+ ancestors: [...parents, element],
+ cause,
+ place: element.position,
+ ruleId: "mathjax-error",
+ source: "rehype-mathjax",
+ });
+
+ result = [
+ {
+ type: "element",
+ tagName: "span",
+ properties: {
+ className: ["mathjax-error"],
+ style: "color:#cc0000",
+ title: String(cause),
+ },
+ children: [{ type: "text", value: text }],
+ },
+ ];
+ }
+
+ const index = parent.children.indexOf(scope);
+ parent.children.splice(index, 1, ...result);
+ return SKIP;
+ });
+
+ if (found) {
+ if (renderer.styleSheet) context.children.push(renderer.styleSheet());
+ if (renderer.unregister) renderer.unregister();
+ }
+ };
+ };
+}
diff --git a/src/ui/GameRoot.tsx b/src/ui/GameRoot.tsx
index 6575fce60..70d337579 100644
--- a/src/ui/GameRoot.tsx
+++ b/src/ui/GameRoot.tsx
@@ -69,7 +69,6 @@ import { BypassWrapper } from "./React/BypassWrapper";
import { Apr1 } from "./Apr1";
import { V2Modal } from "../utils/V2Modal";
-import { MathJaxContext } from "better-react-mathjax";
import { useRerender } from "./React/hooks";
import { HistoryProvider } from "./React/Documentation";
import { GoRoot } from "../Go/ui/GoRoot";
@@ -505,7 +504,7 @@ export function GameRoot(): React.ReactElement {
}, []);
return (
-
+ <>
@@ -547,6 +546,6 @@ export function GameRoot(): React.ReactElement {
-
+ >
);
}
diff --git a/src/ui/MD/MD.tsx b/src/ui/MD/MD.tsx
index 592bfdcb0..40ca18772 100644
--- a/src/ui/MD/MD.tsx
+++ b/src/ui/MD/MD.tsx
@@ -6,11 +6,31 @@ import { h1, h2, h3, h4, h5, h6, li, Td, Th, table, tr, Blockquote, p } from "./
import { code, Pre } from "./code";
import { A } from "./a";
import remarkMath from "remark-math";
-import rehypeMathjax from "rehype-mathjax/svg";
import rehypeRaw from "rehype-raw";
import { FilePath } from "../../Paths/FilePath";
-import { getPage } from "../../Documentation/root";
+import { convertMathNotation, getPage } from "../../Documentation/root";
import { DocImages } from "../../Documentation/pages";
+import { createPlugin } from "../../ThirdParty/RehypePlugin.mjs";
+import { Settings } from "../../Settings/Settings";
+import { fromDom } from "hast-util-from-dom";
+
+const rehypePlugin = createPlugin(function () {
+ return {
+ render(value: string, { display }: { display: boolean }) {
+ const mml = convertMathNotation(value);
+ const element = document.createElement(display ? "div" : "span");
+ if (display) {
+ element.style.textAlign = "center";
+ }
+ element.style.fontFamily = Settings.styles.fontFamily;
+ // Check the comment in src/Themes/ui/StyleEditorModal.tsx to see why we need to convert the font size.
+ element.style.fontSize = `${Settings.styles.fontSize * (16 / 14)}px`;
+ element.style.color = Settings.theme.primary;
+ element.innerHTML = mml;
+ return [fromDom(element)];
+ },
+ };
+});
export function MD({ pageFilePath }: { pageFilePath: FilePath }): React.ReactElement {
const pageContent = getPage(pageFilePath);
@@ -38,8 +58,9 @@ export function MD({ pageFilePath }: { pageFilePath: FilePath }): React.ReactEle
a: A,
}}
remarkPlugins={[remarkGfm, remarkMath]}
- // Use rehypeRaw to support HTML content in NS API docs.
- rehypePlugins={[rehypeMathjax, rehypeRaw]}
+ // Use a custom rehype plugin to render LaTeX notation in md files. Use rehypeRaw to support HTML content in NS
+ // API docs.
+ rehypePlugins={[rehypePlugin, rehypeRaw]}
transformImageUri={(__src, alt) => {
return DocImages[alt];
}}
diff --git a/src/ui/React/FavorInfo.tsx b/src/ui/React/FavorInfo.tsx
index 44964db4c..faf349b79 100644
--- a/src/ui/React/FavorInfo.tsx
+++ b/src/ui/React/FavorInfo.tsx
@@ -1,11 +1,11 @@
import React from "react";
-import { MathJax } from "better-react-mathjax";
-
import InfoIcon from "@mui/icons-material/Info";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { Favor } from "../../ui/React/Favor";
+import MathNotation from "../../Documentation/data/MathNotation.json";
+import { MathNotationOutput } from "../../Documentation/ui/MathNotationOutput";
export function FavorInfo({ favor, boldLabel }: { favor: number; boldLabel?: boolean }): React.ReactElement {
return (
@@ -17,8 +17,8 @@ export function FavorInfo({ favor, boldLabel }: { favor: number; boldLabel?: boo
favor is gained whenever you install an Augmentation. The amount of favor you gain depends on the total
amount of reputation you earned with this faction across all resets.