Fix copy of "language-xxx" class from code tag to pre tag

[tholst]

Hi there,

Note: I created a new PR which is the same as #58 but without the change to Readme as I saw now that my assumption wrt. rehype-prism was wrong.

Original Message I was using your mdx-loader package (Thanks!) and found that prisjms-highlighted code did not receive any background styling due to missing language-xxx classes on the pre tags. As you pointed out in your code comments, prismjs expects those language classes on the pre tags.

~Also you are not using rehype-prism as far as I can see. So I took the liberty of removing it from the README.~

Cheers

[yehudamakarov]

nice, this is also an issue for me.

I found a template that uses mdx-loader. Looks like they used some css for the prism.css theme in order to supplement the pre tag's missing CSS.

doing something like this for now:

const components = {
    pre: Pre
}

where Pre is:

import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
  root: {}
}));

export default function Pre(props) {
  const classes = useStyles();

  return (
    <pre
      className={clsx(classes.root, props.children.props.className)}
      {...props}
    />
  );
}

and components gets used at:

<MDXProvider components={components}>
    {children}
</MDXProvider>

note the props.children.props.className. Looks like from inside the pre function I don't get the className (it is undefined) so I have to take it from the code which is the children