![\"Snippet](\"https://jolvera.dev/static/overreacted-code-snippet.jpg\")
\n\n[rehype](https://github.com/wooorm/rehype) plugin to highlight code blocks in HTML with [Prism] (via [refractor]).\n\n(If you would like to highlight code blocks with [highlight.js](https://github.com/isagalaev/highlight.js), instead, check out [rehype-highlight](https://github.com/wooorm/rehype-highlight).)\n\n**Best suited for usage in Node.**\nIf you would like to perform syntax highlighting _in the browser_, you should look into [less heavy ways to use refractor](https://github.com/wooorm/refractor#browser).\n\n## Installation\n\n```bash\nnpm install mdx-prism-2\n```\n\n## API\n\n`rehype().use(rehypePrism, [options])`\n\nSyntax highlights `pre > code`.\nUnder the hood, it uses [refractor], which is a virtual version of [Prism].\n\nThe code language is configured by setting a `language-{name}` class on the `` element.\nYou can use any [language supported by refractor].\n\nIf no `language-{name}` class is found on a `` element, it will be skipped.\n\n### options\n\n| Parameter | Type | Default | Description |\n| :------------------------ | :----------------------------------------------------------------------------------: | :----------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `ignoreMissing` | `boolean` | `false` | By default, if `{name}` does not correspond to a [language supported by refractor] an error will be thrown. If you would like to silently skip `` elements with invalid languages, set this option to `true`. |\n| `lineHighlight.component` | `string` ([HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)) | `div` | The HTML tag used to wrap the highlight line. |\n| `lineHighlight.className` | `string` | `mdx-marker` | CSS class applied to highlight line. |\n\n## Usage\n\nUse this package [as a rehype plugin](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#using-plugins).\n\nSome examples of how you might do that:\n\n```js\nconst rehype = require('rehype');\nconst mdxPrism = require('mdx-prism-2');\n\nrehype().use(mdxPrism).process(/* some html */);\n```\n\n```js\nconst rehype = require('rehype');\nconst mdxPrism = require('mdx-prism-2');\n\nrehype()\n .use(mdxPrism, {\n lineHighlight: {\n component: 'span',\n className: 'my-line-highlight-class',\n },\n })\n .process(/* some html */);\n```\n\n```js\nconst unified = require('unified');\nconst rehypeParse = require('rehype-parse');\nconst mdxPrism = require('mdx-prism-2');\n\nunified().use(rehypeParse).use(mdxPrism).processSync(/* some html */);\n```\n\nIf you'd like to get syntax highlighting in Markdown, parse the Markdown (with remark-parse), convert it to rehype, then use this plugin.\n\n```js\nconst unified = require('unified');\nconst remarkParse = require('remark-parse');\nconst remarkRehype = require('remark-rehype');\nconst mdxPrism = require('mdx-prism-2');\n\nunified()\n .use(remarkParse)\n .use(remarkRehype)\n .use(mdxPrism)\n .process(/* some markdown */);\n```\n\n## FAQ\n\n\n Why does mdx-prism-2 copy the language- class to the <pre> tag?
\n \n [Prism recommends](https://prismjs.com/#basic-usage) adding the `language-` class to the `` tag like this:\n\n```html\np { color: red }
\n```\n\nIt bases this recommendation on the HTML5 spec. However, an undocumented behavior of their JavaScript is that, in the process of highlighting the code, they also copy the `language-` class to the `` tag:\n\n```html\np { color: red }
\n```\n\nThis resulted in many [Prism themes](https://github.com/PrismJS/prism-themes) relying on this behavior by using CSS selectors like `pre[class*=\"language-\"]`. So in order for people using mdx-prism-2 to get the most out of these themes, we decided to do the same.\n\n\n\n[prism]: http://prismjs.com/\n[refractor]: https://github.com/wooorm/refractor\n[language supported by refractor]: https://github.com/wooorm/refractor#syntaxes\n"
}