How to use Goldmark Markdown (with extensions) as parser?

Hi, my preview looks good, but the footnotes do not preview properly. I think this is because Netlify uses a different parser. Is there a way to change this parser/allow for Goldmark footnote rendering?

Hey @lobotommy168 , we’ll need a bit more information on this in order to help. Can you let us know your site name so we can investigate?

Hi, this is an issue with the CMS preview. I know there are custom previews, but I’m not sure how I would go about adding the ability to parse Markdown footnotes. Here is the site: https://stupendous-crisp-adadb4.netlify.app.

The footnotes render fine with Hugo, it’s just the preview that’s the issue.

I found this issue: Remark plugins - extend markdown - how to (based off of docs)

I think it’s similar… I’m not super experienced with Javascript.

<script type="module">
  import remarkGfm from 'https://esm.sh/remark-gfm@3?bundle'

  CMS.registerRemarkPlugin(remarkGfm);
</script>
<script>
  CMS.registerPreviewStyle("style.css");
</script>

Here is how I’m importing the plugin. Perhaps I’m importing incorrectly?

According to this:

the plugin you’re using works with Remark 14+, but Netlify CMS uses Remark 10: Beta Features! | Decap CMS | Open-Source Content Management System

From CMS documentation:

Note that netlify-widget-markdown currently uses remark@10 , so you should check a plugin’s compatibility first.

Thank you! So for now, is previewing footers, tables, strikethrough, etc. not supported?

I tried the following and it enabled strikethroughs but not tables or footnotes…

<body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
    <script src="https://unpkg.com/react-markdown@5.0.3/react-markdown.min.js"></script>
    <script type="module">
      import remarkGfm from 'https://esm.sh/remark-gfm@1'

      var PostPreview = createClass({
        render: function() {
          var entry = this.props.entry;
          var body = entry.getIn(['data', 'body']);

          return h(window.ReactMarkdown, { plugins: [remarkGfm] }, body);
        }
      });
    
      CMS.registerPreviewTemplate("posts", PostPreview);
    </script>
  </body>

I haven’t really tried, but that seems to be the case. However, the plugin mentions this:

Earlier versions of remark-parse and remark had a gfm option that enabled this functionality, which defaulted to true.

So maybe that option exists in Remark by default? But, not sure how to toggle it, honestly even if it does exist.

You can take a look at:

which seems to be a much more maintained version of Netlify CMS.