What is wrong with this string?

[hahnbeelee]

I've noticed that when I parse this string through remark a random HTML comment in injected <!----> which throws an error when I try rendering the content in my next.js app. I'm pretty familiar with MDX syntax so I'm really stumped on why this isn't working. Code sandbox

- Step 4: Write the policy document: "Condition": \{ "Bool": \{ "aws:SecureTransport": "true" } }, when the Effect element value is set to "Allow". If the Effect element is "Deny" then the condition will be "Condition": \{ "Bool": \{ "aws:SecureTransport": "false" } } as shown in the image below. Now only SSL traffic will be allowed to your S3 bucket.

* Condition: Allow

[wooorm]

First, the error in your code sandbox: you are using a \ before {. But you are embedding this text in a JavaScript string. The \ is removed by JavaScript (because \{ is the same as {). It isn’t available in the markdown/MDX. So what remark sees here is just {. So it crashes. Double encode it, so that JavaScript sees the first one, and remark sees the other one:

const sourceMarkdown = `
- Step 4: Write the policy document: "Condition": \\{ "Bool": \\{ "aws:SecureTransport": "true" } }, when the Effect element value is set to "Allow". If the Effect element is "Deny" then the condition will be "Condition": \\{ "Bool": \\{ "aws:SecureTransport": "false" } } as shown in the image below. Now only SSL traffic will be allowed to your S3 bucket.

* Condition: Allow
`;

But even beter, this looks a lot like code, and markdown has something for code:

const sourceMarkdown = `
- Step 4: Write the policy document: \`"Condition": { "Bool": { "aws:SecureTransport": "true" } }\`, when the \`Effect\` element value is set to \`"Allow"\`. If the \`Effect\` element is \`"Deny"\` then the condition will be \`"Condition": { "Bool": { "aws:SecureTransport": "false" } }\` as shown in the image below. Now only SSL traffic will be allowed to your S3 bucket.

* Condition: Allow
`;

Second, you are writing two lists next to each other, but they are not the same list, they are separate. When we generate a string of markdown/MDX, we need to generate markdown that is two lists and not one.

More info on this is here: https://github.com/syntax-tree/mdast-util-to-markdown#optionsjoin and https://github.com/syntax-tree/mdast-util-to-markdown/blob/651ce97714573eb410f8f620b94afaec043dda95/lib/join.js#L23-L33.

There are several solutions:

Solution a): Change your content.

It’s not simple for humans to understand this as being two lists too. You can change your text to introduce lists. How to do it depends on the rest of your content, but for example:

Perform the following steps to do X Y Z:

- Step 1: …
- Step 2: …
- Step 3: …
- Step 4: …

Metadata:

- `Condition: Allow`

But, this also shows that it’s a bit weird that you are numbering (step X) your unordered list? Maybe use an ordered list?:

Steps:

1. …
2. …
3. …
4. …

Metadata:

- `Condition: Allow`

(Note that you could also have meant to put the list into the other list, in which case you should indent the second list, and don’t need separate bullets:

- Step 4: …

  - `Condition: Allow`

Solution b): Set bulletOther

You can set a bullet to use if the primary bullet cannot be used: https://github.com/syntax-tree/mdast-util-to-markdown#optionsbulletother.

  …
  const file = await remark()
    .use({settings: {bulletOther: '-'}})
    .use(remarkMdx)
    …

Solution c) syntax-tree/mdast-util-to-markdown#56 (but this is a major change, so will happen in a couple of months.