ReactMarkdown outputting "Y-m-d H:i:s" incorrectly

[takaaki12353491]

Hello,

I'm currently using ReactMarkdown to render Markdown, but I'm encountering an issue where the date string "Y-m-d H:i:s" is being output as "Y-m-d H:i" by using remarkDirective. Specifically, "Y-m-d H:i:s" is output as "Y-m-d H:i<s></s>", with the <s> tag causing problems.

Is there a way to correctly handle this without escaping the string?

[ChristianMurphy]

Welcome @takaaki12353491! 👋
Sorry you ran into some confusion.

It's hard to comment specifically because you haven't shared that you tried and what your expected result it.

My assumption is that you're looking for something like

:test{example="Y-m-d H:i:s"}

Which will add an attribute example with the date format as it's value.

[takaaki12353491]

Thank you, @ChristianMurphy!
I apologize for the unclear question.

I want the string "Y-m-d H:i:s" to be output as "Y-m-d H:i:s" in Markdown without adding any other special characters.
I tried creating the following custom plugin, but it seems that escape processing cannot be done before the remark-directive processing (the order in which plugins are passed to remarkPlugins does not seem to matter).
Is there any workaround, such as adding another plugin?

...
import breaks from 'remark-breaks';
import remarkGfm from 'remark-gfm';
import remarkDirective from 'remark-directive';
import remarkDirectiveRehype from 'remark-directive-rehype/dist';
...
export const directiveEscape = () => {
  /**
   * @param {Root} tree
   *   Tree.
   * @returns {undefined}
   *   Nothing.
   */
  return (tree: Root): void => {
    visit(tree, (node) => {
      if (node.type === 'containerDirective') {
        const content = `:::${node.name}${
          node.attributes ? `[${JSON.stringify(node.attributes)}]` : ''
        }${node.children ? `{${node.children.map((child) => child.value).join('')}}` : ''}`;
        const textNode = {
          type: 'text',
          value: content,
          children: undefined,
        };
        Object.assign(node, textNode);
      }

      if (node.type === 'leafDirective') {
        const content = `::${node.name}${
          node.attributes ? `[${JSON.stringify(node.attributes)}]` : ''
        }${node.children ? `{${node.children.map((child) => child.value).join('')}}` : ''}`;
        const textNode = {
          type: 'text',
          value: content,
          children: undefined,
        };
        Object.assign(node, textNode);
      }

      if (node.type === 'textDirective') {
        const content = `:${node.name}${
          node.attributes ? `[${JSON.stringify(node.attributes)}]` : ''
        }${node.children ? `{${node.children.map((child) => child.value).join('')}}` : ''}`;
        const textNode = {
          type: 'text',
          value: content,
          children: undefined,
        };
        Object.assign(node, textNode);
      }
    });
  };
};
...
<ReactMarkdown
  remarkPlugins={[
    breaks,
    remarkGfm,
    directiveEscape,
    remarkDirective,
    remarkDirectiveRehype,
  ]}
>
...

[wooorm]

It sounds like you are in control of the markdown.
Given that “Y-m-d H:i:s” is not human language, it’s not words, I recommend using code for such formats:

The format is `Y-m-d H:i:s`.

[takaaki12353491]

Thank you, @wooorm!

If it's not possible to output "Y-m-d H:i:s" as plain text without using special characters through an additional plugin or other means, I will consider using inline code.