{"id":21686179,"url":"https://github.com/val-istar-guo/rehype-prism","last_synced_at":"2025-04-10T03:55:43.117Z","repository":{"id":40604446,"uuid":"159167084","full_name":"Val-istar-Guo/rehype-prism","owner":"Val-istar-Guo","description":"The unified plugin used to highlight code block in html with Prism","archived":false,"fork":false,"pushed_at":"2024-10-29T02:54:54.000Z","size":91,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T03:55:37.133Z","etag":null,"topics":["code","code-highlight","code-highlighter","highlight","markdwon","prismjs","rehype","rehype-parse","remark","unified"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Val-istar-Guo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2018-11-26T12:36:39.000Z","updated_at":"2024-12-09T23:38:17.000Z","dependencies_parsed_at":"2023-02-09T10:46:32.657Z","dependency_job_id":"c10f8bcc-a4fc-47e3-8d22-28731673e3ef","html_url":"https://github.com/Val-istar-Guo/rehype-prism","commit_stats":{"total_commits":47,"total_committers":2,"mean_commits":23.5,"dds":0.06382978723404253,"last_synced_commit":"25133dbfbcb6cb83c1752b90edef7643d8d277e7"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Val-istar-Guo%2Frehype-prism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Val-istar-Guo%2Frehype-prism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Val-istar-Guo%2Frehype-prism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Val-istar-Guo%2Frehype-prism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Val-istar-Guo","download_url":"https://codeload.github.com/Val-istar-Guo/rehype-prism/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248155001,"owners_count":21056542,"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":["code","code-highlight","code-highlighter","highlight","markdwon","prismjs","rehype","rehype-parse","remark","unified"],"created_at":"2024-11-25T16:28:10.458Z","updated_at":"2025-04-10T03:55:43.095Z","avatar_url":"https://github.com/Val-istar-Guo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- title --\u003e\n\u003cp align=\"center\" style=\"padding-top: 40px\"\u003e\n  \u003cimg src=\"./images/logo.svg?sanitize=true\" alt=\"logo\" /\u003e\n\u003c/p\u003e\n\n\u003c!-- \u003ch1 align=\"center\" style=\"text-align: center\"\u003eREHYPE-PRISM\u003c/h1\u003e --\u003e\n\u003c!-- title --\u003e\n\n[![version](https://img.shields.io/npm/v/rehype-prism.svg?logo=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/rehype-prism)\n[![downloads](https://img.shields.io/npm/dm/rehype-prism.svg?logo=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/rehype-prism)\n[![dependencies](https://img.shields.io/librariesio/release/npm/rehype-prism?logo=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/rehype-prism)\n[![license](https://img.shields.io/npm/l/rehype-prism.svg?logo=github\u0026style=for-the-badge)](https://www.npmjs.com/package/rehype-prism)\n[![Codecov](https://img.shields.io/codecov/c/gh/Val-istar-Guo/rehype-prism?logo=codecov\u0026token=PWMEC8L6DN\u0026style=for-the-badge)](https://codecov.io/gh/Val-istar-Guo/rehype-prism)\n\n\u003c!-- description --\u003e\n\nThe unified plugin used to highlight code block in html with Prism.\n\n\u003c!-- description --\u003e\n\n## Usage\n\n\u003c!-- usage --\u003e\n\nThis package is ESM only. [unified \u003e= 10](https://www.npmjs.com/package/unified) is needed to use it. If running on the server side, NodeJS needs to be greater than 12\n\n```typescript\nimport { unified } from \"unified\";\nimport rehype from \"rehype\";\nimport remarkParse from \"remark-parse\";\nimport remarkRehype from \"remark-rehype\";\nimport rehypePrism from \"rehype-prism\";\nimport rehypeStringify from \"rehype-stringify\";\n\n// you have to load css manual\nimport \"prismjs/themes/prism-coy.css\";\nimport \"prismjs/plugins/line-numbers/prism-line-numbers.css\";\n\n// load languages manual\n// import 'prismjs/components/prism-{language}'\nimport \"prismjs/components/prism-go\";\nimport \"prismjs/components/prism-java\";\nimport \"prismjs/components/prism-python\";\n\n// parse markdown to html\nunified()\n  .use(remarkParse)\n  .use(remarkRehype)\n  // it should be after rehype\n  .use(rehypePrism, { plugins: [\"line-numbers\"] })\n  .use(rehypeStringify)\n  .parse(/* markdown string */);\n// .processSync(/* markdown string */)\n\n// parse code block in html string\nrehype().use(rehypePrism).use(rehypeStringify).parse(/* html string */);\n// .processSync(/* html string */)\n```\n\n## Server Side Render\n\n`PrismJS` will auto highlight all code at `pre code` after browser `document` loaded.\n\n**Disabled prism autoHighlight** before `import 'rehype-prism'`. there are two way to do this:\n\n- set the `window.Prism = { manual: true }`\n- use the attribute `data-manual` on the `\u003cscript\u003e` element you used for prism.\n\n  `\u003cscript src=\"prism.js\" data-manual\u003e\u003c/script\u003e`\n\n\u003e Some plugins will not work. Because it's only work in browser.\n\n## Load Plugins\n\nThe names to use can be found [here](https://github.com/PrismJS/prism/tree/master/plugins).\n\n### Plugins Reimplemented By rehype-prism\n\nThe table list plugins that cannot running on the server side.\nTherefor it has been re-implemented by rehype-prism.\n\n| Plugin Name       |\n| :---------------- |\n| line-numbers      |\n| toolbar           |\n| copy-to-clipboard |\n\n\u003e I haven't tested all prism plugins.\n\u003e If there are another plugins not work,\n\u003e submit issue on github.\n\n## Load More Languages\n\n- Use [babel-plugin-prismjs](https://www.npmjs.com/package/babel-plugin-prismjs).\n- Use `loadLanguages()` provided by `prismjs`.(don't use `loadLanguages()` with Webpack or another bundler)\n- Import language manual. e.g. `import 'prismjs/components/prism-yaml.js'`\n\n## Load Themes\n\n- If you use [babel-plugin-prismjs](https://www.npmjs.com/package/babel-plugin-prismjs).\n  `import 'prismjs'` will auto load the theme setted in babel-plugin-prismjs config.\n- Import theme css manual. e.g. `import 'prismjs/themes/prism-coy.css'`\n\n## See More\n\n[shiki](https://github.com/shikijs/shiki) is another code highlight tools that support [unified](https://www.npmjs.com/package/unified).\nI recommend you try it. It's new, but better suited for modern front-end projects than Prismjs.\n\nThis does not mean that I will give up maintaining this library. If you need this library and have any issue, let me know it.\n\n\u003c!-- usage --\u003e\n\n## Contributing \u0026 Development\n\nIf there is any doubt, it is very welcome to discuss the issue together.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fval-istar-guo%2Frehype-prism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fval-istar-guo%2Frehype-prism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fval-istar-guo%2Frehype-prism/lists"}