React-markdown: Support shortcodes

[miguelpeixe]

It would be very interesting to support shortcodes for rendering specific components, like Hugo does.

There's already a remark plugin for parsing.

[rexxars]

const shortcodes = require('remark-shortcodes')

<Markdown
  source={input}
  plugins={[[shortcodes, {startBlock: "{{>", endBlock: "<}}"}]]}
  renderers={{shortcode: ShortcodeRenderer}}
/>

[1999]

The code above seems to not work right now. Firstly, the start block and end block are a bit misleading: they should be {{< and >}}. Furthermore, the plugin does work but it doesn't "eat" the strings - maybe it should be used as an "astPlugin" instead @rexxars?

[melbourne2991]

@1999 Just tested it, seems to work fine for me... the strings are replaced with whatever the ShortCodeRenderer renders.

[1999]

@melbourne2991 that's interesting. Can you share an example of how you tested this? It didn't work when I tried it a week ago.

[melbourne2991]

Sure (shortCodeRenders is just a dictionary of react function components):

const ShortCodeRenderer = ({ identifier, attributes }) => {
  const Renderer = shortCodeRenderers[identifier];

  if (!Renderer) {
    console.warn("No renderer for shortcode:", identifier);
    return null;
  }

  return <Renderer {...attributes} />;
};

export const MarkdownRenderer = ({ ...props }) => {
  return (
    <ReactMarkdown
      renderers={{
        code: CodeBlockRenderer,
        shortcode: ShortCodeRenderer
      }}
      plugins={[
        [
          shortcodes,
          {
            startBlock: "[[",
            endBlock: "]]"
          }
        ]
      ]}
      {...props}
    />
  );
};

[1999]

Thanks! I took your code and put it into the sandbox + added the shortcodes syntax from Hugo. Still doesn't look like the plugin works: https://codesandbox.io/s/407yn2okl4?fontsize=14. Can you check what's wrong there?

[melbourne2991]

@1999 Ah it looks as though what you're after is not supported by the shortcodes plugin, see this issue:

https://github.com/djm/remark-shortcodes/issues/7

[phanatuan]

I could confirm that the shortcode is not working. Can you shed any light on this? @rexxars

[ChristianMurphy]

@phanatuan give https://github.com/remarkjs/react-markdown/issues/113#issuecomment-387216043 a try.
If you have a question feel free to reach out at https://github.com/remarkjs/remark/discussions
If you believe there is a bug please file a new issue with more detail

[lucascaton]

Hi there. Since version 5, this no longer works.

I tried adding the new node serializer property but it didn't solve the problem.

[ChristianMurphy]

Again
If you have a question feel free to reach out at https://github.com/remarkjs/remark/discussions
If you believe there is a bug please file a new issue with more detail

[ChristianMurphy]

For folks looking for more information on shortcodes and react-markdown v5+, please see https://github.com/remarkjs/react-markdown/issues/501