mdx-js/mdx v0.15.3

on GitHub

Fix translating style, aria-* and data-* properties to JSX

Some plugins like rehype-katex add style and aria-* properties. These properties need to be handled differently in JSX, so now we convert all style properties from string to object syntax, and all aria-* and data-* property names from camelCase to param-case. (#261)

Info string

Both CommonMark and GFM support adding additional text after language definition in fenced code blocks, a.k.a. the info string. Now MDX passes this data as props:

```js repl
console.log('Hello world!')
```

The above compiles roughly to:

<MDXTag name="pre" components={components}>
  <MDXTag
    name="code"
    components={components}
    parentName="pre"
    props={{
      className: 'language-js',
      metaString: 'repl',
      repl: true,
    }}
  >
    {`console.log('Hello world!');`}
  </MDXTag>
</MDXTag>

One use case for this is adding props for Prism's line-highlight plugin:

```js data-line=2
function doSomething() {
  throw new Error('Something went wrong') // this line will be highlighted!
}
```

More stable support for comments

Our support for comments was a spotty (#244, #256), but now we're taking advantage of remark's ability to recognize comments, which should take care of all edge cases.

Nested comments

We used to support Markdown-like comments nested in JSX:

## Heading

<MyComp>
  <!-- this is a comment?! -->
</MyComp>

This was odd and misleading because the rest of the comment wasn't being interpreted as MDX. We removed this feature, so if you were relying on this behavior, simply use JSX comments instead:

## Heading

<MyComp>
  {/* now that's a comment! */}
</MyComp>