How to read custom shortcodes?

[reypm]

I am trying to create a plugin to read shortcodes coming in the following format:

:::custom-shortcode{id=some-link}Content:::

but I can't make this work properly. My code looks like this:

import { visit } from "unist-util-visit";

export default function myPlugin() {
  return (tree: any) => {
    visit(tree, (node: any) => {
      switch (node.name) {
        case "custom-shortcode":
          console.log("plugin loaded");
          break;
        default:
          break;
      }
    });
  };
}

but nothing gets printed to the console. Here is a Codesandbox can I get some help and/or ideas?

[wooorm]

See the readme: https://github.com/remarkjs/remark-directive#use, https://github.com/remarkjs/remark-directive#examples, https://github.com/remarkjs/remark-directive#types.

But your input is not a container directive, this is:

:::custom-shortcode{id=some-link}
Content
:::

[reypm]

hi @wooorm I have checked on the links and fixed a few things but my example still not working, can you take a look here and see if you spot something wrong that I am unable to see?

[wooorm]

If you try this here:

:::custom-shortcode{id=some-link}
Content
:::

You can see that it doesn’t work. That‘s because that’s not standard markdown (or GFM).

You have to use remark-directive, you don’t yet. Import it and pass it in remarkPlugins.

[reypm]

thanks, it works now!