{"id":15668855,"url":"https://github.com/jaydenseric/babel-plugin-syntax-highlight","last_synced_at":"2025-08-19T20:14:24.826Z","repository":{"id":62354733,"uuid":"207234983","full_name":"jaydenseric/babel-plugin-syntax-highlight","owner":"jaydenseric","description":"A Babel plugin that transforms the code contents of template literals lead by comments specifying a Prism.js language into syntax highlighted HTML.","archived":false,"fork":false,"pushed_at":"2022-08-25T23:44:32.000Z","size":64,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T02:19:51.894Z","etag":null,"topics":["babel","maintained","node","npm","prism"],"latest_commit_sha":null,"homepage":"https://npm.im/babel-plugin-syntax-highlight","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/jaydenseric.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":".github/funding.yml","license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"jaydenseric"}},"created_at":"2019-09-09T05:59:27.000Z","updated_at":"2023-03-10T09:27:21.000Z","dependencies_parsed_at":"2022-10-31T10:51:34.311Z","dependency_job_id":null,"html_url":"https://github.com/jaydenseric/babel-plugin-syntax-highlight","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/jaydenseric/babel-plugin-syntax-highlight","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fbabel-plugin-syntax-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fbabel-plugin-syntax-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fbabel-plugin-syntax-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fbabel-plugin-syntax-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaydenseric","download_url":"https://codeload.github.com/jaydenseric/babel-plugin-syntax-highlight/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fbabel-plugin-syntax-highlight/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271215037,"owners_count":24720098,"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","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["babel","maintained","node","npm","prism"],"created_at":"2024-10-03T14:20:19.923Z","updated_at":"2025-08-19T20:14:24.802Z","avatar_url":"https://github.com/jaydenseric.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jaydenseric"],"categories":[],"sub_categories":[],"readme":"# babel-plugin-syntax-highlight\n\nA [Babel](https://babeljs.io) plugin that transforms the code contents of template literals lead by comments specifying a [Prism.js](https://prismjs.com) language into syntax highlighted HTML.\n\nBuild-time syntax highlighting advantages:\n\n- 🚀 No runtime JS to slow page loads.\n- 🖌 Less client rendering work.\n- 🎨 Beautiful code the instant the HTML and CSS loads.\n\n## Installation\n\nTo install [`babel-plugin-syntax-highlight`](https://npm.im/babel-plugin-syntax-highlight) with [npm](https://npmjs.com/get-npm), run:\n\n```sh\nnpm install babel-plugin-syntax-highlight --save-dev\n```\n\nConfigure [Babel](https://babeljs.io) to use the plugin:\n\n```json\n{\n  \"plugins\": [\"syntax-highlight\"]\n}\n```\n\n## Examples\n\nIn a file transpiled by [Babel](https://babeljs.io), lead a template literal containing syntax to highlight with a comment containing `syntax-highlight` and a [Prism.js language name](https://prismjs.com/#supported-languages):\n\n```js\nconst highlighted = /* syntax-highlight graphql */ `\n  scalar Upload\n`;\n```\n\nThe comment may be surrounded by others on the same or other lines for editor syntax highlighting, [Prettier](https://prettier.io) formatting, etc.\n\n```js\nconst highlighted =\n  /* syntax-highlight graphql */\n  /* GraphQL */ `\n    scalar Upload\n  `;\n```\n\nA block or line comment may be used:\n\n```js\nconst highlighted =\n  // syntax-highlight graphql\n  `scalar Upload`;\n```\n\nThe plugin removes the comment (preserving surrounding comments) and transforms the template literal contents into HTML:\n\n```js\nconst highlighted = `\u003cspan class=\"token keyword\"\u003escalar\u003c/span\u003e \u003cspan class=\"token class-name\"\u003eUpload\u003c/span\u003e`;\n```\n\nStyling the HTML is up to you; there are many theme stylesheets available. Often themes require `\u003cpre\u003e` and `\u003ccode\u003e` containers with appropriate language classes.\n\nA [React](https://reactjs.org) component can be used display highlighted code with appropriate HTML and styles:\n\n```jsx\nfunction SyntaxHighlightedCode({ language, code }) {\n  return (\n    \u003cpre className={`language-${language}`}\u003e\n      \u003ccode\n        className={`language-${language}`}\n        dangerouslySetInnerHTML={{ __html: code }}\n      /\u003e\n    \u003c/pre\u003e\n  );\n}\n```\n\n```jsx\nconst syntaxHighlightedCode = (\n  \u003cSyntaxHighlightedCode language=\"css\" code={highlighted} /\u003e\n);\n```\n\n## Requirements\n\nSupported runtime environments:\n\n- [Node.js](https://nodejs.org) versions `^14.17.0 || ^16.0.0 || \u003e= 18.0.0`.\n\nProjects must configure [TypeScript](https://typescriptlang.org) to use types from the modules that have a `// @ts-check` comment:\n\n- [`compilerOptions.allowJs`](https://typescriptlang.org/tsconfig#allowJs) should be `true`.\n- [`compilerOptions.maxNodeModuleJsDepth`](https://typescriptlang.org/tsconfig#maxNodeModuleJsDepth) should be reasonably large, e.g. `10`.\n- [`compilerOptions.module`](https://typescriptlang.org/tsconfig#module) should be `\"node16\"` or `\"nodenext\"`.\n\n## Exports\n\nThe [npm](https://npmjs.com) package [`babel-plugin-syntax-highlight`](https://npm.im/babel-plugin-syntax-highlight) features [optimal JavaScript module design](https://jaydenseric.com/blog/optimal-javascript-module-design). These CommonJS modules are exported via the [`package.json`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):\n\n- [`babelPluginSyntaxHighlight.js`](./babelPluginSyntaxHighlight.js)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fbabel-plugin-syntax-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaydenseric%2Fbabel-plugin-syntax-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fbabel-plugin-syntax-highlight/lists"}