What causes two leading spaces to be removed from template strings?

[shepmaster]

Using the MDX playground, I entered:

<pre><code>{`01234
    abcd`}</code></pre>

Looking at the compiled code, I see:

function _createMdxContent(props) {
  return <pre><code>{`01234
  abcd`}</code></pre>;
}

Notably, the template literal string now has only two spaces before abcd compared to the four it started with and I want. This isn't the usual behavior of template literals.

I'm working around this for now by replacing my spaces with non-breaking spaces, which aren't removed.

---

Zooming out a bit, I have a custom component for the pre tag which comes into play when I am writing fenced code blocks. In this case, I want to pass some additional arguments to the component, but I can't figure out how to do that other than directly invoking the component. That is, I wish I could do something like:

```my-language additional-argument="1"
cool
    stuff here
```

Instead I've been calling the component directly using a template string to get newlines:

<MyFormatting language="my-language" additional-argument="1">{`cool
    stuff here`}</MyFormatting>

Is there any syntax I've missed to pass additional arguments to the fenced code block?

[wooorm]

Hi! Markdown is a whitespace sensitive language. We must take that into account. And so do you. This example illustrates things:

> * {`a
>   b`}

So, you indent things in MD(X):

> * {
>     `a
>     b`
>   }

For your practical example, you can write it as:

<MyFormatting
  additional-argument="1"
  language="my-language"
>
  {
    `cool
    stuff here`
  }
</MyFormatting>

Though, because you probably do not allow markup as children, I would write:

<MyFormatting
  additional-argument="1"
  language="my-language"
  value={
    `cool
    stuff here`
  }
/>

[remcohaszing]

I’m not sure what you mean by “enhance a fenced code block”, but perhaps you want rehype-mdx-code-props?

[wooorm]

@shepmaster I think you are misreading: leading spaces are very much there. There is one level of indent.
And indeed, to your deeper question, there are also answers, such as what Remco shows. See also “Syntax highlighting with the meta field” on mdxjs.com

[shepmaster]

I’m not sure what you mean

I have an example in my original post:

```my-language additional-argument="1"
cool
    stuff here
```

---

perhaps you want rehype-mdx-code-props?

See also “Syntax highlighting with the meta field” on mdxjs.com

Yup, that is what I meant, thank you. The doc search for "fenced" didn't return that page and the searches for "code" and "block" returned enough other results that I did not see it. I did not think to search for syntax highlighting (although that is what I'm using it for).

Unfortunately for me, I plan / hope to switch to mdxjs-rs and thus I would not be able to use the plugin.

---

leading spaces are very much there

I did not mean to imply that the leading spaces are not there at all. As the title of my post attempts to indicate, the amount of leading space is being reduced but not completely eliminated:

What causes two leading spaces to be removed

I'm still not clear on which part of Markdown it is that removes the two spaces from the original example, however. If it removed 4 leading spaces and made it into a code block then I'd understand it somewhat.

[wooorm]

I'm still not clear on which part of Markdown

Expressions is the part of “markdown” that does that.
MDX, the language, extends markdown.
Expressions are one extension.
When you type {, an expression is opened, and that expression extensions allows an indent, of 2 spaces.