add maths as tex feature

packages/processor/src/markdown-to-mdx/hast-transforms/index.ts

@@ -3,13 +3,9 @@ import { ProcessorOptions } from '@mdx-js/mdx';
 import { ElementContent } from 'hast';
 import { PhrasingContent, Root } from 'mdast';
 // import { createSvg } from '../utils/icons';
-// import rehypeRaw from 'rehype-raw';
-// import rehypeSlug from 'rehype-slug';
 import { PluggableList, unified } from 'unified';
 
-// import { visit } from 'unist-util-visit';
 import { Context } from '../context';
-// import { mathjax } from './mathjax';
 import { createWrapper } from './wrapper';
 
 export const processorOptions: ProcessorOptions = {
@@ -49,7 +45,6 @@ function createRehypeFragmentPlugins(
   options: Partial<Options> = {},
 ): PluggableList {
   return [
-    // mathjax(options),
     // TODO:
     // [
     // autolinkHeadings,

packages/processor/src/markdown-to-mdx/index.ts

@@ -12,9 +12,9 @@ export {
   TocHighlightContext,
 } from './mdx-handlers/toc-highlight/toc-highlight-provider';
 
-export type { FontName } from './mdx-handlers/mathjax';
+export type { FontName } from './mdx-handlers/math';
 
-export { MathsProvider, MathsContext } from './mdx-handlers/mathjax';
+export { MathsProvider, MathsContext } from './mdx-handlers/math';
 
 export { sidebarRunOptions } from './sidebar';
 

packages/processor/src/markdown-to-mdx/mdx-handlers/index.tsx

@@ -1,6 +1,6 @@
 import { MDXComponents } from 'mdx/types';
 
-import { MathJax } from './mathjax';
+import { MathJax } from './math';
 import { Task } from './task/Task';
 import { Section } from './toc-highlight/section';
 
@@ -18,10 +18,7 @@ export function useMDXComponents(): MDXComponents {
     // TODO: remove sectionize and use the titles
     section: Section,
     code(props) {
-      if (
-        props.class?.includes('math-inline') ||
-        props.class?.includes('math-display')
-      ) {
+      if (props.class?.includes('language-math')) {
         return <MathJax expr={props.children} />;
       }
       return <code {...props} />;

packages/processor/src/markdown-to-mdx/mdx-handlers/math/index.tsx

@@ -0,0 +1,30 @@
+import { useContext } from 'preact/hooks';
+
+import { toLaTeX } from './latex';
+import { getMathJax } from './mathjax';
+import { MathsContext } from './maths-provider';
+
+export { MathsContext, MathsProvider } from './maths-provider';
+
+export type { FontName } from './mathjax';
+
+type Props = {
+  expr: string;
+};
+
+export function MathJax({ expr }: Props) {
+  const ctx = useContext(MathsContext);
+  if (ctx.mathsAsTex) {
+    return (
+      <code
+        className="latex"
+        dangerouslySetInnerHTML={{
+          __html: toLaTeX(expr),
+        }}
+      />
+    );
+  } else {
+    const children = getMathJax(expr, ctx.fontName);
+    return <>{children}</>;
+  }
+}

packages/processor/src/markdown-to-mdx/mdx-handlers/math/latex.ts

@@ -0,0 +1,13 @@
+import Prism from 'prismjs';
+
+export function toLaTeX(expr: string) {
+  const formatted = formatLaTeX(expr);
+  return Prism.highlight(formatted, Prism.languages.latex, 'latex');
+}
+
+function formatLaTeX(expr: string) {
+  return expr
+    .replace(/\\\\\s?/g, '\\\\\n')
+    .replace(/\\begin{align(\*?)}/g, '\\begin{align$1}\n')
+    .replace(/\\end{align(\*?)}/g, '\n\\end{align$1}');
+}

packages/processor/src/markdown-to-mdx/mdx-handlers/mathjax/index.tsx → packages/processor/src/markdown-to-mdx/mdx-handlers/math/mathjax.ts

@@ -18,12 +18,8 @@ import { mathjax } from 'mathjax-full/js/mathjax.js';
 import { SVG } from 'mathjax-full/js/output/svg.js';
 import { MathJaxTermesFont } from 'mathjax-termes-font/js/svg.js';
 import 'mathjax-termes-font/js/svg/dynamic/double-struck.js';
-import { useContext } from 'preact/hooks';
 
 import { render } from './litedom';
-import { MathsContext } from './maths-provider';
-
-export { MathsContext, MathsProvider } from './maths-provider';
 
 type Document = MathDocument<LiteNode, LiteText, LiteDocument>;
 
@@ -61,23 +57,9 @@ const output: Output = {
   }),
 };
 
-export type Options = {
-  fontName: FontName;
-};
-
-export function getMathjaxHtml(tex: string, options: Options) {
-  doc.outputJax = output[options.fontName];
+export function getMathJax(expr: string, fontName: FontName) {
+  doc.outputJax = output[fontName];
   doc.outputJax.setAdaptor(doc.adaptor);
-  return doc.convert(tex) as LiteElement;
-}
-
-type Props = {
-  expr: string;
-};
-
-export function MathJax({ expr }: Props) {
-  const ctx = useContext(MathsContext);
-  const node = getMathjaxHtml(expr, ctx);
-  const children = render(node.children);
-  return <>{children}</>;
+  const node = doc.convert(expr) as LiteElement;
+  return render(node.children);
 }

packages/processor/src/markdown-to-mdx/mdx-handlers/mathjax/maths-provider.tsx → packages/processor/src/markdown-to-mdx/mdx-handlers/math/maths-provider.tsx

@@ -1,18 +1,22 @@
 import { ComponentChildren, createContext } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 
-import { FontName } from '@isos/processor';
+import { FontName } from './mathjax';
 
 const defaultFontName = 'termes';
 
 type Maths = {
   fontName: FontName;
+  mathsAsTex: boolean;
   setFontName: (fontName: FontName) => unknown;
+  setMathsAsTex: (mathsAsTex: boolean) => unknown;
 };
 
 export const MathsContext = createContext<Maths>({
   fontName: defaultFontName,
+  mathsAsTex: false,
   setFontName: () => {},
+  setMathsAsTex: () => {},
 });
 
 export function MathsProvider({
@@ -21,13 +25,16 @@ export function MathsProvider({
   children: ComponentChildren;
 }) {
   const [fontName, setFontName] = useState(defaultFontName);
+  const [mathsAsTex, setMathsAsTex] = useState(false);
 
   const context = useMemo((): Maths => {
     return {
       fontName,
+      mathsAsTex,
       setFontName,
+      setMathsAsTex,
     };
-  }, [fontName]);
+  }, [fontName, mathsAsTex]);
 
   return (
     <MathsContext.Provider value={context}>

packages/runtime/package.json

@@ -18,7 +18,8 @@
     "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/preact": "^3.0.1",
     "classnames": "^2.5.1",
-    "preact": "^10.20.2"
+    "preact": "^10.20.2",
+    "prismjs": "^1.29.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -28,6 +29,7 @@
     "@linaria/core": "^6.1.0",
     "@linaria/react": "^6.1.0",
     "@wyw-in-js/babel-preset": "^0.5.1",
-    "@wyw-in-js/vite": "^0.5.1"
+    "@wyw-in-js/vite": "^0.5.1",
+    "vite-plugin-prismjs": "^0.0.11"
   }
 }

packages/runtime/src/providers/index.tsx

@@ -10,29 +10,12 @@ type Props = {
   children: ComponentChildren;
 };
 
-// const mathjaxConfig: MathJax3Config = {
-//   tex: {
-//     inlineMath: [
-//       ['$', '$'],
-//       // ['\\(', '\\)'],
-//     ],
-//     displayMath: [
-//       ['$$', '$$'],
-//       // [`\\[`, `\\]`],
-//     ],
-//   },
-// };
-
 export function Providers({ children }: Props) {
   return (
     <TocHighlightProvider>
       <LoadingProvider>
         <ErrorProvider>
-          <MathsProvider>
-            {/* <MathJaxContext config={mathjaxConfig}> */}
-            {children}
-            {/* </MathJaxContext> */}
-          </MathsProvider>
+          <MathsProvider>{children}</MathsProvider>
         </ErrorProvider>
       </LoadingProvider>
     </TocHighlightProvider>

packages/runtime/src/sidebar/checkbox.tsx

@@ -28,6 +28,7 @@ const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: middle;
+  padding-bottom: 0.5em;
 
   label {
     font-size: 0.9em;

packages/runtime/src/sidebar/view-options.tsx

@@ -65,6 +65,11 @@ export function ViewOptions() {
             maths.setFontName(sansSerif ? 'fira' : 'termes')
           }
         />
+        <Checkbox
+          label="Maths as LaTeX"
+          value={maths.mathsAsTex}
+          onChange={(mathsAsTex) => maths.setMathsAsTex(mathsAsTex)}
+        />
       </Fieldset>
     </form>
   );

packages/runtime/src/styles/index.scss

@@ -51,6 +51,7 @@ main {
 @import './sidenote.scss';
 @import './scrollbars.scss';
 @import './range-input.scss';
+@import './syntax-highlight.scss';
 
 // @import './odl/index.scss';
 // @import './latex/index.scss';