{"id":27821521,"url":"https://github.com/mapbox/rehype-prism","last_synced_at":"2025-05-01T17:03:45.245Z","repository":{"id":22036657,"uuid":"95053645","full_name":"mapbox/rehype-prism","owner":"mapbox","description":"rehype plugin to highlight code blocks in HTML with Prism (via refractor)","archived":true,"fork":false,"pushed_at":"2024-04-16T15:39:51.000Z","size":333,"stargazers_count":176,"open_issues_count":11,"forks_count":24,"subscribers_count":104,"default_branch":"main","last_synced_at":"2025-04-23T23:39:02.808Z","etag":null,"topics":["docs-infrastructure"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mapbox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-21T23:04:19.000Z","updated_at":"2025-04-23T18:54:33.000Z","dependencies_parsed_at":"2024-04-16T16:57:40.572Z","dependency_job_id":null,"html_url":"https://github.com/mapbox/rehype-prism","commit_stats":{"total_commits":35,"total_committers":6,"mean_commits":5.833333333333333,"dds":0.5714285714285714,"last_synced_commit":"a0a7d5d18e6a868b37c84800d3864f7d575aa261"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Frehype-prism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Frehype-prism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Frehype-prism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Frehype-prism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mapbox","download_url":"https://codeload.github.com/mapbox/rehype-prism/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250771334,"owners_count":21484536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docs-infrastructure"],"created_at":"2025-05-01T17:01:46.259Z","updated_at":"2025-05-01T17:03:45.204Z","avatar_url":"https://github.com/mapbox.png","language":"JavaScript","readme":"## Note:  This repository is no longer maintained\nAs of April 2024, this repo is no longer being used by the Mapbox docs team. \n\n# @mapbox/rehype-prism\n\n[![Build Status](https://travis-ci.com/mapbox/rehype-prism.svg?branch=main)](https://travis-ci.com/mapbox/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 @mapbox/rehype-prism\n```\n\n## API\n\n`rehype().use(rehypePrism, [options])`\n\nSyntax highlights `pre \u003e 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 `\u003ccode\u003e` element.\nYou can use any [language supported by refractor].\n\nIf no `language-{name}` class is found on a `\u003ccode\u003e` 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 `\u003ccode\u003e` elements with invalid languages, set this option to `true`.\n\n#### options.alias\n\nType: `Record\u003cstring, string | string[]\u003e`.\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('@mapbox/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('@mapbox/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('@mapbox/rehype-prism');\n\nunified()\n  .use(remarkParse)\n  .use(remarkRehype)\n  .use(rehypePrism)\n  .process(/* some markdown */);\n```\n\n## FAQ\n\n\u003cdetails\u003e\n  \u003csummary\u003eWhy does rehype-prism copy the \u003ccode\u003elanguage-\u003c/code\u003e class to the \u003ccode\u003e\u0026lt;pre\u0026gt;\u003c/code\u003e tag?\u003c/summary\u003e\n  \n  [Prism recommends](https://prismjs.com/#basic-usage) adding the `language-` class to the `\u003ccode\u003e` tag like this:\n\n  ```html\n  \u003cpre\u003e\u003ccode class=\"language-css\"\u003ep { color: red }\u003c/code\u003e\u003c/pre\u003e\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 `\u003cpre\u003e` tag:\n\n  ```html\n  \u003cpre class=\"language-css\"\u003e\u003ccode class=\"language-css\"\u003e\u003cspan class=\"token selector\"\u003ep\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e \u003cspan class=\"token property\"\u003ecolor\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e:\u003c/span\u003e red \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\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\u003c/details\u003e\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","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmapbox%2Frehype-prism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmapbox%2Frehype-prism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmapbox%2Frehype-prism/lists"}