Support for Equations in the Markdown Editor

[NoopDog]

Would be great to have support for equations in the markdown editor so that if I enter something like

$$ a^2 + b^2 = c^2 $$

I get a pretty formatted equation like:

I just tried this on the demo site: https://cms-demo.netlify.com/#/collections/posts/entries/2018-4-18-post-number-10

And it does not currently format:

Is this a planned or current feature? If current how do you use it?

Cheers and Thanks Dave

[erquhart]

Related Remark plugin, in case someone wants to take a stab: https://github.com/Rokt33r/remark-math

[Ir1d]

Are we using remark to render markdown? What about enabling for users to choose which plugins to install

[Ir1d]

I did a little digging, this is not a remark related problem (I mean, plugging in remark plugins is really really easy, just follow the README and use the mentioned remark-math and etc). This is a SLATE related problem. We can easily get the mdast, but when converting to SLATE AST it became beyond my ability. Also, we need to handle the conversion between rich editing and raw markdown. Honestly I'd really wish netlify-cms could support math equations (katex or mathjax, etc), but time is not on my side.

Good luck to future warriors tackling this problem. :heart:

[erquhart]

Ah, you're totally right, remark doesn't have anything to do with this - we don't need to touch the content, just display it pretty in the CMS UI.

We would support this through a Math Block editor component, so you'd select Math Block from the + dropdown in the markdown editor. Check out the image editor component source for an example. There are also docs.

Khan Academy made a fantastic library for displaying math in the browser, that can handle the actual work of formatting math for display.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ChauhanT]

Hi, just wanted to add that if an equation block is in the works, it might be better to add mathjax support and not katex. The reason is that mathjax allows for referencing which, imo, is a basic requirement for numbering equations on a website.

[ShwStone]

Hey! I have a solution with Custom Previews.

Add the following code to the index.html:

<script type="module">
    // import { ReactMarkdownMath } from 'https://esm.sh/[email protected]?bundle'
    import Markdown from 'https://esm.sh/react-markdown@9?bundle'
    import remarkMath from 'https://esm.sh/[email protected]?bundle'
    import rehypeMathjax from 'https://esm.sh/[email protected]?bundle'
    
    var PostPreview = createClass({
      render: function() {
        // return ReactMarkdownMath({markdown: this.props.widgetFor('body').props.value});
        return Markdown({
          children: this.props.widgetFor('body').props.value, 
          rehypePlugins: [rehypeMathjax],
          remarkPlugins: [remarkMath]
        });
      }
    });
    CMS.registerPreviewTemplate("posts", PostPreview);
  </script>

This will only renderer the "body" widget with mathjax.

[tim-at-topos]

<script type="module">
    // import { ReactMarkdownMath } from 'https://esm.sh/[email protected]?bundle'
    import Markdown from 'https://esm.sh/react-markdown@9?bundle'
    import remarkMath from 'https://esm.sh/[email protected]?bundle'
    import rehypeMathjax from 'https://esm.sh/[email protected]?bundle'
    
    var PostPreview = createClass({
      render: function() {
        // return ReactMarkdownMath({markdown: this.props.widgetFor('body').props.value});
        return Markdown({
          children: this.props.widgetFor('body').props.value, 
          rehypePlugins: [rehypeMathjax],
          remarkPlugins: [remarkMath]
        });
      }
    });
    CMS.registerPreviewTemplate("posts", PostPreview);
  </script>

This will only renderer the "body" widget with mathjax.

This worked fantastically for me, but I had to add

var entryBody = (this.props.widgetFor('body') === null) ? ' ' : this.props.widgetFor('body').props.value

and then replace

children: this.props.widgetFor('body').props.value, 

by

children: entryBody,

otherwise I got an error on loading the editor, since when there's nothing in the body widget this.props.widgetFor('body') is null, so this.props.widgetFor('body').props.value throws an error.