Ideal KaTeX MDX usecase

components.js

import React from "react";
import { CodeBlock } from "../components/CodeBlock";
import { MathBlock } from "../components/MathBlock";
import TeX from "@matejmazur/react-katex";

export default {
  pre: ({ children }) => <>{children}</>,
  inlineCode: ({ children }) => <code>{children}</code>,
  inlineMath: ({ children }) => <TeX>{children}</TeX>,
  code: CodeBlock,
  math: MathBlock
};

index.mdx

Some inline math $a+b=c$

$$ title=a-block-of-math S_n = \frac{n(2a + (n-1)d)}{2} $$

MathBlock.js

/** @jsx jsx */
import React from "react";
import TeX from "@matejmazur/react-katex";
import { jsx } from "theme-ui";

const CodeBlock: React.FC<IProps> = ({
  children,
  title,
  ...props
}) => {
  return (
      <React.Fragment>
        {title && <div sx={{ variant: `styles.MathBlock.title` }}>{title}</div>}
        <div sx={{ variant: `styles.MathBlock` }}>
          <TeX block>{children}</TeX>
        </div>
      </React.Fragment>
  )
 }
};

export { MathBlock };