decaporg / decap-cms

A Git-based CMS for Static Site Generators
https://decapcms.org
MIT License
17.93k stars 3.04k forks source link

Support for Equations in the Markdown Editor #1279

Open NoopDog opened 6 years ago

NoopDog commented 6 years ago

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:

screen shot 2018-04-17 at 11 31 34 pm

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:

screen shot 2018-04-17 at 11 34 57 pm

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

Cheers and Thanks Dave

erquhart commented 6 years ago

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

Ir1d commented 5 years ago

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

Ir1d commented 5 years ago

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 commented 5 years ago

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] commented 5 years ago

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 commented 3 years ago

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 commented 11 months ago

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/react-markdown-math@1.0.2?bundle'
    import Markdown from 'https://esm.sh/react-markdown@9?bundle'
    import remarkMath from 'https://esm.sh/remark-math@6.0.0?bundle'
    import rehypeMathjax from 'https://esm.sh/rehype-mathjax@5.0.0?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 commented 9 months ago
<script type="module">
    // import { ReactMarkdownMath } from 'https://esm.sh/react-markdown-math@1.0.2?bundle'
    import Markdown from 'https://esm.sh/react-markdown@9?bundle'
    import remarkMath from 'https://esm.sh/remark-math@6.0.0?bundle'
    import rehypeMathjax from 'https://esm.sh/rehype-mathjax@5.0.0?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.

crossault033 commented 2 weeks ago

Hey Tim 👋 I have a similar problem with admonitions ( :::info, :::note type) and a separate discussion running. I tried your snippet shared here (no changes, just rendering mathjax) and it didn't worked on my end. I am on decap version 3.0.0 (running it on a vitepress site but that should not be the issue for all I know). I am not receiving any console errors either rn image