fix tests and types

packages/processor/src/__test__/lists.test.ts

@@ -103,7 +103,7 @@ test('parsing bug3', async () => {
 
   const expectedHtml = unindentStringAndTrim(`
     <div id="lemma-1" class="boxout lemma">
-      <p><span class="type">Lemma <span class="count">1.</span></span> If $f: U$ then</p>
+      <p><span class="type">Lemma <span class="count">1.</span></span> If <code class="language-math math-inline">f: U</code> then</p>
       <ul>
         <li>
           <p>(Additivity) Alpha</p>

packages/processor/src/__test__/maths.test.ts

@@ -48,10 +48,11 @@ test('parsing bug', async () => {
 
   const expectedHtml = unindentStringAndTrim(`
     <div id="example-1" class="boxout example">
-      <p><span class="type">Example <span class="count">1.</span></span> If $n$ is a natural number, then</p>$$\\dfrac{d}{dz}z^{n} = nz^{n-1}.$$<p>and bla bla bla.</p>
+      <p><span class="type">Example <span class="count">1.</span></span> If <code class="language-math math-inline">n</code> is a natural number, then</p><pre><code class="language-math math-display">\\dfrac{d}{dz}z^{n} = nz^{n-1}.</code></pre>
+      <p>and bla bla bla.</p>
     </div>
-    <p>If $n$ is a natural number, then</p>
-    $$\\dfrac{d}{dz}z^{n} = nz^{n-1}.$$
+    <p>If <code class="language-math math-inline">n</code> is a natural number, then</p>
+    <pre><code class="language-math math-display">\\dfrac{d}{dz}z^{n} = nz^{n-1}.</code></pre>
     <p>and bla bla bla.</p>
   `);
 
@@ -105,10 +106,11 @@ test('parsing bug2', async () => {
 
   const expectedHtml = unindentStringAndTrim(`
     <div id="example-1" class="boxout example">
-      <p><span class="type">Example <span class="count">1.</span></span> If $n$ is a natural number, then</p>$$\\begin{align*}\\dfrac{d}{dz}z^{n} = nz^{n-1}.\\end{align*}$$<p>and bla bla bla.</p>
+      <p><span class="type">Example <span class="count">1.</span></span> If <code class="language-math math-inline">n</code> is a natural number, then</p><pre><code class="language-math math-display">\\begin{align*}\\dfrac{d}{dz}z^{n} = nz^{n-1}.\\end{align*}</code></pre>
+      <p>and bla bla bla.</p>
     </div>
-    <p>If $n$ is a natural number, then</p>
-    $$\\begin{align*}\\dfrac{d}{dz}z^{n} = nz^{n-1}.\\end{align*}$$
+    <p>If <code class="language-math math-inline">n</code> is a natural number, then</p>
+    <pre><code class="language-math math-display">\\begin{align*}\\dfrac{d}{dz}z^{n} = nz^{n-1}.\\end{align*}</code></pre>
     <p>and bla bla bla.</p>
   `);
 
@@ -186,7 +188,12 @@ test('parsing bug3', async () => {
 
   const expectedHtml = unindentStringAndTrim(`
     <div id="solution-1" class="boxout solution">
-      <p><span class="type">Solution.</span> We treat the equation</p>$$\\tfrac{1}{2}(e^{iz}+ e^{-iz}) = 10$$<p>as a quadratic equation in $e^{iz}$. After rearrangement it becomes</p>$$(e^{iz})^{2}-20 e^{iz}+ 1 = 0.$$<p>The solutions are</p>$$e^{iz}= \\dfrac{20\\pm\\sqrt{396}}{2}= 10\\pm\\sqrt{99},$$<p>so that</p>$$iz = \\log(10\\pm\\sqrt{99}) + 2k\\pi i,$$<p>that is,</p>$$z = -i\\log(10\\pm\\sqrt{99}) + 2k\\pi,$$<p>where $k$ is an arbitrary integer.<span class="proof-box">◻</span></p>
+      <p><span class="type">Solution.</span> We treat the equation</p><pre><code class="language-math math-display">\\tfrac{1}{2}(e^{iz}+ e^{-iz}) = 10</code></pre>
+      <p>as a quadratic equation in <code class="language-math math-inline">e^{iz}</code>. After rearrangement it becomes</p><pre><code class="language-math math-display">(e^{iz})^{2}-20 e^{iz}+ 1 = 0.</code></pre>
+      <p>The solutions are</p><pre><code class="language-math math-display">e^{iz}= \\dfrac{20\\pm\\sqrt{396}}{2}= 10\\pm\\sqrt{99},</code></pre>
+      <p>so that</p><pre><code class="language-math math-display">iz = \\log(10\\pm\\sqrt{99}) + 2k\\pi i,</code></pre>
+      <p>that is,</p><pre><code class="language-math math-display">z = -i\\log(10\\pm\\sqrt{99}) + 2k\\pi,</code></pre>
+      <p>where <code class="language-math math-inline">k</code> is an arbitrary integer.<span class="proof-box">◻</span></p>
     </div>
   `);
 
@@ -214,7 +221,7 @@ test('parsing bug4', async () => {
 
   const expectedHtml = unindentStringAndTrim(`
     <div class="framed">
-      <p>The $A$.</p>
+      <p>The <code class="language-math math-inline">A</code>.</p>
     </div>
   `);
 

packages/processor/src/__test__/references.test.ts

@@ -28,7 +28,7 @@ test('environment references', async () => {
 
   const expected = unindentStringAndTrim(`
     <div id="cmd11" class="boxout definition">
-      <p><span class="type">Definition <span class="count">1.</span></span> Let $\\epsilon > 0$ be a subset.</p>
+      <p><span class="type">Definition <span class="count">1.</span></span> Let <code class="language-math math-inline">\\epsilon > 0</code> be a subset.</p>
     </div>
     <p>Definition <a href="#cmd11" class="ref">1</a> is automatically satisfied.</p>
   `);

packages/processor/src/index.ts

@@ -9,7 +9,7 @@ export { inputToMarkdown } from './latex-to-markdown';
 
 export {
   markdownToJs,
-  runOptions,
+  createRunOptions,
   sidebarRunOptions,
 } from './markdown-to-mdx';
 

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

@@ -26,7 +26,7 @@ export function createRehypePlugins(ctx: Context, options: Options) {
 export async function toHast(
   children: PhrasingContent[],
   ctx: Context,
-  options?: Partial<Options>,
+  options: Partial<Options> = {},
 ) {
   const processor = unified().use(
     createRehypeFragmentPlugins(ctx, options),
@@ -42,7 +42,7 @@ export async function toHast(
 
 function createRehypeFragmentPlugins(
   _ctx: Context,
-  options: Partial<Options> = {},
+  _options: Partial<Options> = {},
 ): PluggableList {
   return [
     // TODO:

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

@@ -1,6 +1,6 @@
 import { createRehypePlugins, processorOptions } from './hast-transforms';
 import { markdownToMdast } from './mdast-transforms';
-import { useMDXComponents } from './mdx-handlers';
+import { createMDXComponents } from './mdx-handlers';
 import { Options, defaultOptions } from './options';
 import { RunOptions, createProcessor } from '@mdx-js/mdx';
 import { Fragment, jsx, jsxDEV, jsxs } from 'preact/jsx-runtime';
@@ -18,17 +18,21 @@ export { MathsProvider, MathsContext } from './mdx-handlers/math';
 
 export { sidebarRunOptions } from './sidebar';
 
-export const runOptions: RunOptions = {
-  Fragment,
-  useMDXComponents,
-
-  // @ts-expect-error: jsx is incompatible for unknown reasons
-  jsx,
-  // @ts-expect-error: jsxs is incompatible for unknown reasons
-  jsxs,
-  // @ts-expect-error: jsxDEV is incompatible for unknown reasons
-  jsxDEV,
-};
+export function createRunOptions(
+  options: Partial<Options> = {},
+): RunOptions {
+  return {
+    Fragment,
+    useMDXComponents: createMDXComponents(options),
+
+    // @ts-expect-error: jsx is incompatible for unknown reasons
+    jsx,
+    // @ts-expect-error: jsxs is incompatible for unknown reasons
+    jsxs,
+    // @ts-expect-error: jsxDEV is incompatible for unknown reasons
+    jsxDEV,
+  };
+}
 
 export async function markdownToJs(
   markdown: string,

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

@@ -1,12 +1,13 @@
+import { Options } from '../options';
 import { MDXComponents } from 'mdx/types';
 
 import { MathJax } from './math';
 import { Task } from './task/Task';
 import { Section } from './toc-highlight/section';
 
-export function useMDXComponents(): MDXComponents {
+export function createMDXComponents(options: Partial<Options>) {
   // const ctx = {}
-  return {
+  return (): MDXComponents => ({
     div(props) {
       if (props.class?.includes('task')) {
         return <Task {...props} />;
@@ -18,10 +19,13 @@ export function useMDXComponents(): MDXComponents {
     // TODO: remove sectionize and use the titles
     section: Section,
     code(props) {
-      if (props.class?.includes('language-math')) {
+      if (
+        props.class?.includes('language-math') &&
+        options.mathsAsTex === false
+      ) {
         return <MathJax expr={props.children} />;
       }
       return <code {...props} />;
     },
-  };
+  });
 }

packages/processor/src/test-utils/unit-test-processor.ts

@@ -1,4 +1,9 @@
-import { FileType, inputToMarkdown, markdownToJs, runOptions } from '..';
+import {
+  FileType,
+  createRunOptions,
+  inputToMarkdown,
+  markdownToJs,
+} from '..';
 import { run } from '@mdx-js/mdx';
 import { resolve } from 'pathe';
 import { createElement } from 'preact';
@@ -27,11 +32,12 @@ async function markdownToHtml(md: string) {
   const prepared = unindentStringAndTrim(md);
   const ctx = createTestContext(FileType.markdown, prepared);
   const markdown = await inputToMarkdown(ctx);
-  const { article } = await markdownToJs(markdown, {
+  const options = {
     mathsAsTex: true,
     noWrapper: true,
-  });
-  const component = await run(article, runOptions);
+  };
+  const { article } = await markdownToJs(markdown, options);
+  const component = await run(article, createRunOptions(options));
   // @ts-expect-error
   const element = createElement(component.default);
   return formatHtml(renderToString(element));

packages/runtime/package.json

@@ -28,6 +28,7 @@
     "@babel/preset-typescript": "^7.24.1",
     "@linaria/core": "^6.1.0",
     "@linaria/react": "^6.1.0",
+    "@types/prismjs": "^1.26.5",
     "@wyw-in-js/babel-preset": "^0.5.1",
     "@wyw-in-js/vite": "^0.5.1",
     "vite-plugin-prismjs": "^0.0.11"

packages/runtime/src/article.tsx

@@ -3,7 +3,7 @@ import { MDXModule } from 'mdx/types';
 import { useEffect, useState } from 'preact/hooks';
 import { Fragment } from 'preact/jsx-runtime';
 
-import { runOptions } from '@isos/processor';
+import { createRunOptions } from '@isos/processor';
 
 type Props = {
   jsString: string;
@@ -15,7 +15,7 @@ export function Article({ jsString }: Props) {
 
   useEffect(() => {
     (async () => {
-      setMDX(await run(jsString, runOptions));
+      setMDX(await run(jsString, createRunOptions()));
 
       // window.MathJax = {
       //   tex: {