{"id":18879222,"url":"https://github.com/iamskok/rehype-prism-template","last_synced_at":"2025-04-14T19:13:18.572Z","repository":{"id":85292521,"uuid":"172639832","full_name":"iamskok/rehype-prism-template","owner":"iamskok","description":"Highlight code blocks in HTML with Prism 🌈","archived":false,"fork":false,"pushed_at":"2020-06-14T23:52:27.000Z","size":1022,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T19:13:14.101Z","etag":null,"topics":["prismjs","rehype-plugin","syntax-highlighting","template-generator"],"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/iamskok.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":"2019-02-26T04:48:24.000Z","updated_at":"2020-09-07T02:06:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"ce32884e-f36c-4ee0-98f6-b13d93881c93","html_url":"https://github.com/iamskok/rehype-prism-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamskok%2Frehype-prism-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamskok%2Frehype-prism-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamskok%2Frehype-prism-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamskok%2Frehype-prism-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamskok","download_url":"https://codeload.github.com/iamskok/rehype-prism-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248943461,"owners_count":21186958,"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":["prismjs","rehype-plugin","syntax-highlighting","template-generator"],"created_at":"2024-11-08T06:34:21.834Z","updated_at":"2025-04-14T19:13:18.558Z","avatar_url":"https://github.com/iamskok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rehype-prism-teplate\n\n[![MIT License](https://img.shields.io/github/license/iamskok/rehype-prism-template.svg?style=flat)](https://github.com/imaskok/rehype-prism-template/blob/master/LICENSE)\n![Node Version](https://img.shields.io/node/v/rehype-prism-template.svg?style=flat)\n\n[rehype](https://github.com/wooorm/rehype) plugin to highlight code blocks in HTML with [Prism] (via [refractor]) fork from [mapbox/rehype-prism](https://github.com/mapbox/rehype-prism).\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## Installation\n\n```bash\nnpm install rehype-prism-template\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.langs\n\nType: `array`.\nDefault: `undefined`\n\nBy default, the full list of [languages supported by refractor] will be registered. \n\nIf you would like to include specific languages, set this option to an array of languages.\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('rehype-prism-template');\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('rehype-prism-template');\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('rehype-prism-template');\n\nunified()\n  .use(remarkParse)\n  .use(remarkRehype)\n  .use(rehypePrism)\n  .process(/* some markdown */);\n```\n\n## Registering languages\n\nBy default `rehype-prism-template` includes [all language definitions] from refractor, though it's possible to set your custom \nlist of registered languages by generating a new template of `index.js`. It is as easy as going in the package's root \ndirectory and specifing a list of languages:\n\n```bash\ncd /node_modules/rehype-prism\nyarn register python java ruby kotlin\n```\n\nTo reset the template back where it registers all languages:\n\n```bash\nyarn register-all\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[languages supported by refractor]: https://github.com/wooorm/refractor#syntaxes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamskok%2Frehype-prism-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamskok%2Frehype-prism-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamskok%2Frehype-prism-template/lists"}