{"_id":"@clintonsteiner/rehype-prism","name":"@clintonsteiner/rehype-prism","dist-tags":{"latest":"0.9.0"},"versions":{"0.9.0":{"name":"@clintonsteiner/rehype-prism","version":"0.9.0","description":"rehype plugin to highlight code blocks in HTML with Prism","main":"index.js","scripts":{"lint":"eslint .","format":"prettier --write '{,lib/,test/}*.js'","test-jest":"jest","pretest":"npm run lint","test":"jest","prepare":"husky install"},"repository":{"type":"git","url":"git+https://github.com/clintonsteiner/rehype-prism.git"},"keywords":["rehype","rehype-plugin","syntax-highlighting","prism","html"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/clintonsteiner/rehype-prism/issues"},"homepage":"https://github.com/clintonsteiner/rehype-prism#readme","dependencies":{"eslint-plugin-jest":"^29.0.1","hast-util-to-string":"^1.0.4","refractor":"^3.4.0","unist-util-visit":"^2.0.3"},"devDependencies":{"@eslint/eslintrc":"^3.3.1","@eslint/js":"^9.33.0","dedent":"^0.7.0","eslint":"^9.33.0","eslint-plugin-node":"^11.1.0","globals":"^16.3.0","husky":"^8","jest":"^29","lint-staged":"^15","prettier":"^3","rehype":"^11.0.0"},"prettier":"@mapbox/prettier-config-docs","lint-staged":{"{,lib/,test/}*.js":["prettier --write"],"*.js":["eslint --fix","prettier --write"]},"jest":{"coverageReporters":["json","lcov","text","html"],"resetMocks":true,"testRegex":"/test\\.js$"},"engines":{"node":">=10"},"_id":"@clintonsteiner/rehype-prism@0.9.0","gitHead":"27633dc3c7938948b013d4ec2bfd805cafacadf3","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-gCNTJ4MNZkiPVMOvbdegtN1HOdrS/4jTPhr+8G6dOaZEeg7Ns18SwepF77hrifAEhXCxkuHDTpzHNtvLMZ38rw==","shasum":"f94e7bc124f7a98835770f09395b822f5e055008","tarball":"https://registry.npmjs.org/@clintonsteiner/rehype-prism/-/rehype-prism-0.9.0.tgz","fileCount":13,"unpackedSize":15764,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFGIatMNvvhPPnzGN45UhJckuuTYI6e4S37NWbU4kiYjAiAy41gkh2H0TZO2QtHcu3bMKgyuvQIKwkg11wAAdAlbfQ=="}]},"_npmUser":{"name":"clintonsteiner","email":"clintonsteiner@gmail.com"},"directories":{},"maintainers":[{"name":"clintonsteiner","email":"clintonsteiner@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rehype-prism_0.9.0_1755878915654_0.9458501926712501"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-22T16:08:35.589Z","0.9.0":"2025-08-22T16:08:35.863Z","modified":"2025-08-22T16:08:36.082Z"},"maintainers":[{"name":"clintonsteiner","email":"clintonsteiner@gmail.com"}],"description":"rehype plugin to highlight code blocks in HTML with Prism","homepage":"https://github.com/clintonsteiner/rehype-prism#readme","keywords":["rehype","rehype-plugin","syntax-highlighting","prism","html"],"repository":{"type":"git","url":"git+https://github.com/clintonsteiner/rehype-prism.git"},"author":{"name":"Mapbox"},"bugs":{"url":"https://github.com/clintonsteiner/rehype-prism/issues"},"license":"MIT","readme":"As of April 2024, the mapbox repo is no longer being used by the Mapbox docs team. \nUpstream fork to keep vulnerabilities patched\n\n# @clintonsteiner/rehype-prism\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```\nnpm install @clintonsteiner/rehype-prism\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 `<code>` element.\nYou can use any [language supported by refractor].\n\nIf no `language-{name}` class is found on a `<code>` element, it will be skipped.\n\n### options\n\n#### options.ignoreMissing\n\nType: `boolean`.\nDefault: `false`.\n\nBy default, if `{name}` does not correspond to a [language supported by refractor] an error will be thrown.\n\nIf you would like to silently skip `<code>` elements with invalid languages, set this option to `true`.\n\n#### options.alias\n\nType: `Record<string, string | string[]>`.\nDefault: `undefined`.\n\nProvide [aliases] to refractor to register as alternative names for a language.\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 rehypePrism = require('@clintonsteiner/rehype-prism');\n\nrehype()\n  .use(rehypePrism)\n  .process(/* some html */);\n```\n\n```js\nconst unified = require('unified');\nconst rehypeParse = require('rehype-parse');\nconst rehypePrism = require('@clintonsteiner/rehype-prism');\n\nunified()\n  .use(rehypeParse)\n  .use(rehypePrism)\n  .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 rehypePrism = require('@clintonsteiner/rehype-prism');\n\nunified()\n  .use(remarkParse)\n  .use(remarkRehype)\n  .use(rehypePrism)\n  .process(/* some markdown */);\n```\n\n## FAQ\n\n<details>\n  <summary>Why does rehype-prism copy the <code>language-</code> class to the <code>&lt;pre&gt;</code> tag?</summary>\n  \n  [Prism recommends](https://prismjs.com/#basic-usage) adding the `language-` class to the `<code>` tag like this:\n\n  ```html\n  <pre><code class=\"language-css\">p { color: red }</code></pre>\n  ```\n\n  It 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 `<pre>` tag:\n\n  ```html\n  <pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">p</span> <span class=\"token punctuation\">{</span> <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> red <span class=\"token punctuation\">}</span></code></pre>\n  ```\n\n  This 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 rehype-prism to get the most out of these themes, we decided to do the same.\n</details>\n\n[Prism]: http://prismjs.com/\n\n[refractor]: https://github.com/wooorm/refractor\n\n[language supported by refractor]: https://github.com/wooorm/refractor#syntaxes\n\n[aliases]: https://github.com/wooorm/refractor#refractoraliasname-alias\n","readmeFilename":"README.md","_rev":"1-648cf916f920832c7a2eebec20a6b651"}