Possible to parse expressions between delimiters inside of math environments?

[mattvague]

Hey there, this is kind of a continuation of the question I asked here. I've made a fair bit of progress on this to the point where I can now transform e.g. What is $1 + 1$ ➡️ What is <Katex>{`1 + 1`}</Katex>, I'll try and post how I accomplished as a follow up answer once I'm done.

The thing I need to figure out now though is how to map something like What is $<a> + <b>$ ➡️ What is <Katex>{`${a} + ${b}`}</Katex> where < and > are arbitrary delimiters.

My Question: is it possible to write a micromark extension that works with micromark-extension-math in such a way that for a given math environment I can tokenize any contained expressions first, then let micromark-extension-math do it's own parsing? I'm not familiar enough with the ecosystem to know if this is even possible without forking micromark-extension-math so would be very grateful if someone can point me in the right direction, here's what I have so far:

import { ok as assert } from "uvu/assert";
import { codes, values } from "micromark-util-symbol/codes.js";

export function cas() {
  return {
    text: {
      [codes.dollarSign]: mathWithExpressionsText(options)
    },
  };
}

export const mathWithExpressionsText = (options) => {
  const { expressionStartDelimiter = values.lessThan, expressionEndDelimiter = codes.greaterThan } = options;

  return {
    name: "cas",
    tokenize: tokenizeCasMath,
    add: 'before'
  };

  function tokenizeCasMath(effects, ok, nok) {
    return start;

    function start(code) {
      assert(code === codes.dollarSign, `expected \`${codes.dollarSign}\``);
      console.log("tokenizeCasMath", { code });
      return insideMath(code);
    }

    function insideMath(code) {
      console.log("insideMath", { code });

      if (code === expressionStartDelimiter) {
        // Do my custom expression parsing
      }

      // Somehow pass the parsing back to micromark-math-extension?
    }
  }
};

Thanks a million!

Matt

[wooorm]

Heya!

e.g. What is $1 + 1$ ➡️ What is <Katex>{1 + 1}</Katex>, I'll try and post how I accomplished as a follow up answer once I'm done.

I’m not sure what you did, but this is very close to what remark-math already exposes, plus a small tree transform afterwards? Is that what you’re doing (and if not, why are you doing more complicated things?)

how to map something like What is $<a> + <b>$ ➡️ What is <Katex>{${a} + ${b}}</Katex> where < and > are arbitrary delimiters.

It would help a lot here if I know what your actual input is, and your expected output. What is the syntax of your variables? What are the limitations? Is it JavaScript? Can they include complete programs? Statements? Are they just identifiers?

My Question

No, it is not possible to add custom parsing to micromark-extension-math, or practically to “hijack” the occurrence of { when it is found in math
Depending on the previous question, you might not need to.
Alternatively, your attached code shows a start of a fork, which is indeed another way to go about it.

[mattvague]

Great feedback, thanks! If I were to pull this into a module, do you think the name remark-math-mdx would make sense? Do you think there would be value in doing so, or is this use case too specific?

[wooorm]

Two ideas:

• remark-mdx-math (*the* mdx and math plugin)
• remark-mdx-math-enhanced (*a* useful mdx and math plugin)

Think the remark-mdx prefix makes sense. Then it can also be listed on https://mdxjs.com/docs/extending-mdx/ and https://mdxjs.com/guides/math/

[mattvague]

Sweet! How's this for a start? https://github.com/goodproblems/remark-mdx-math-enhanced

remark-mdx-math-enhanced sounds like it might be the least confusing compared to remark-math?

It's definitely not ready for prime time yet; I think I'll want to test it a bit in my own app before sharing it widely but would be great to get your veteran eyes on it in the mean time though. Thanks!

[wooorm]

• I believe the type annotations in visit<Root>(tree, (node, index, parent: Parent) => { are not needed?
• You can get the math and mdx nodes “into” the tree with https://github.com/remarkjs/remark-math/tree/main/packages/remark-math#types, https://mdxjs.com/packages/remark-mdx/#types
• then you should be able to inline the isInline?MathNodes, as the types support them, and you don’t need to cast to Literal but they’ll be the actual math node types
• I don’t think the return [CONTINUE, index];s are needed, or any return value. The default is [CONTINUE, index + 1] I believe, and there shouldn’t be math nodes in math nodes, so those are equivalent

---

Looks fine to me. Feel free to add them to the lists!

[mattvague]

Alright, feedback has been addressed and package is published: https://www.npmjs.com/package/remark-mdx-math-enhanced. Will open a PR to add to the lists. Thanks!