Unable to use remark-math with rehype-remark?

[dmca-glasgow]

Hello,

Given the following Markdown:

const test1 = await unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(() => {
    return (tree) => {
      console.log('mdast1:');
      console.dir(tree, { depth: null });
    };
  })
  .use(remarkStringify)
  .process(`Hello $C_{L}$ you.`);

The mdast1 log (with positions removed) appears as expected:

{
  type: 'root',
  children: [
    {
      type: 'paragraph',
      children: [
        {
          type: 'text',
          value: 'Hello '
        },
        {
          type: 'inlineMath',
          value: 'C_{L}',
          data: {
            hName: 'code',
            hProperties: { className: [ 'language-math', 'math-inline' ] },
            hChildren: [ { type: 'text', value: 'C_{L}' } ]
          }
        },
        {
          type: 'text',
          value: ' you.'
        }
      ]
    }
  ]
}

and the resulting markdown is as expected:

Hello $C_{L}$ you.

Now trying the same with remark-rehype:

const test2 = await unified()
  .use(rehypeParse)
  .use(rehypeRemark)
  .use(remarkMath)
  .use(() => {
    return (tree) => {
      console.log('mdast2:');
      console.dir(tree, { depth: null });
    };
  })
  .use(remarkStringify)
  .process(`Hello $C_{L}$ you.`);

The mdast2 log doesn't seem to have picked up remark-math:

{
  type: 'root',
  children: [
    {
      type: 'paragraph',
      children: [
        {
          type: 'text',
          value: 'Hello $C_{L}$ you.'
        }
      ]
    }
  ]
}

And the resulting markdown is not what I want (it has escape characters that break the maths):

Hello \$C\_{L}\$ you.

And without remark-math I still have incorrect escape characters (which is why I thought remark-math might help in the first place):

const test2 = await unified()
  .use(rehypeParse)
  .use(rehypeRemark)
  // .use(remarkMath)
  .use(() => {
    return (tree) => {
      console.log('mdast3:');
      console.dir(tree, { depth: null });
    };
  })
  .use(remarkStringify)
  .process(`Hello $C_{L}$ you.`);

{
  type: 'root',
  children: [
    {
      type: 'paragraph',
      children: [
        {
          type: 'text',
          value: 'Hello $C_{L}$ you.'
        }
      ]
    }
  ]
}

The Markdown:

Hello $C\_{L}$ you.

I'm not sure why remark-math isn't picked up since the MDAST tree seems fine? Is there something I'm missing?

Thanks.

[ChristianMurphy]

Welcome @dmca-glasgow! 👋
Taking a step back, why do you want to go from HTML to markdown? and how does latex fit into that picture?

I'm not sure why remark-math isn't picked up since the MDAST tree seems fine? Is there something I'm missing?

remark-math is a parser plugin, it hooks into remark-parse and the parsing step of the process.
When using rehype-parse it doesn't have anything to hook into, it's designed to work on markdown.
And rehype-remark works on the AST not on source/re-parsing content.

[dmca-glasgow]

Thanks @ChristianMurphy, I had made the incorrect assumption thatremark-math was an AST transformation!

why do you want to go from HTML to markdown? and how does latex fit into that picture?

I am actually working with LaTeX files, and converting them to Markdown, using unified-latex. If you have a look at unified-latex-to-mdast you'll see it first converts LaTeX to hast (using unified-latex-to-hast) then to mdast.

With that context, this processor should make more sense:

import { unified } from 'unified';
import { unifiedLatexFromString } from '@unified-latex/unified-latex-util-parse';
import { unifiedLatexToHast } from '@unified-latex/unified-latex-to-hast';
import rehypeRemark from 'rehype-remark';
import rehypeStringify from 'rehype-stringify';

const file = await unified()
  .use(unifiedLatexFromString)
  .use(unifiedLatexToHast)
  .use(rehypeRemark, {
    handlers: {
      span: customSpanHandler
    },
  })
  .use(remarkStringify)
  .process(`
    \\documentclass{article}
    
    \\begin{document}
    
    Hello $ C_L $ you.
    
    \\end{document}
  `);

console.log(String(file))
// Hello $C\_{L}$ you.

// So far, I've found the curly braces around L don't cause issues with MathJax, but the backslash before _ does!

// I'm currently using this to put the $ delimiters back in
function customSpanHandler(state: State, node: Element) {
  const { className } = node.properties;

  if (Array.isArray(className)) {
    if (className.includes('inline-math')) {
      const math = node.children[0] as Text;
      const result: Text = {
        type: 'text',
        value: `$${math.value || ''}$`,
      };

      state.patch(node, result);
      return result;
    }
  }

  return state.all(node);
}

The \ seems to come from remark-stringify. Ideally, I'd like remark-stringify to ignore all the maths, leaving it verbatim.

[ChristianMurphy]

If you want math to be left alone, you may want to hook in even sooner, like the unifiedLatexToHast to prevent it from being converted to HTML.

Ideally, I'd like remark-stringify to ignore all the maths, leaving it verbatim.

It sounds like you are ending up with a text node, which is correctly escaping special characters.
You probably want to make it an inlineMath MDAST node and include remark-math, which also includes a serializer to take math and inlineMath MDAST nodes back to markdown (with Latex appropriate escapes only).

[dmca-glasgow]

You probably want to make it an inlineMath MDAST node and include remark-math

Thanks for your help @ChristianMurphy, this was the correct way to think about it!

A working example in case anyone ends up here:

import { unified } from 'unified';
import { unifiedLatexFromString } from '@unified-latex/unified-latex-util-parse';
import { unifiedLatexToHast } from '@unified-latex/unified-latex-to-hast';
import rehypeRemark from 'rehype-remark';
import rehypeStringify from 'rehype-stringify';
import { State } from 'hast-util-to-mdast';
import { Element } from 'hast';
import { InlineMath } from 'mdast-util-math';

const file = await unified()
  .use(unifiedLatexFromString)
  .use(unifiedLatexToHast)
  .use(rehypeRemark, {
    handlers: {
      span: customSpanHandler
    },
  })
  .use(remarkMath)
  .use(remarkStringify)
  .process(`
    \\documentclass{article}
    
    \\begin{document}
    
    Hello $ C_L $ you.
    
    \\end{document}
  `);

function customSpanHandler(state: State, node: Element) {
  const { className } = node.properties;

  if (Array.isArray(className)) {
    if (className.includes('inline-math')) {
      const math = node.children[0] as Text;

      const result: InlineMath = {
        type: 'inlineMath',
        value: math.value,
      };

      state.patch(node, result);
      return result;
    }
  }

  return state.all(node);
}

console.log(String(file))
// Hello $C_{L}$ you.