{"id":13907235,"url":"https://github.com/akiran/react-highlight","last_synced_at":"2025-05-15T07:07:24.562Z","repository":{"id":24325455,"uuid":"27722280","full_name":"akiran/react-highlight","owner":"akiran","description":"React component for syntax highlighting","archived":false,"fork":false,"pushed_at":"2022-11-17T15:06:14.000Z","size":49,"stargazers_count":770,"open_issues_count":29,"forks_count":87,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-14T12:58:58.783Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-highlight.neostack.com/","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/akiran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-08T15:53:16.000Z","updated_at":"2025-04-02T17:19:48.000Z","dependencies_parsed_at":"2023-01-14T00:46:48.091Z","dependency_job_id":null,"html_url":"https://github.com/akiran/react-highlight","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/akiran%2Freact-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akiran%2Freact-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akiran%2Freact-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akiran%2Freact-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akiran","download_url":"https://codeload.github.com/akiran/react-highlight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292042,"owners_count":22046426,"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":[],"created_at":"2024-08-06T23:01:50.679Z","updated_at":"2025-05-15T07:07:19.544Z","avatar_url":"https://github.com/akiran.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-highlight\n\nReact component for syntax highlighting using highlight.js\n\n![Build Status](https://travis-ci.org/akiran/react-highlight.svg?branch=master)\n\n### Latest version\n\n`0.11.1`\n\n## [Documentation](https://react-highlight.neostack.com/)\n\n### CodeSandbox Example\n\n[![Edit new](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mj6wlmor9p)\n\n### Installation\n\n```bash\n  npm install react-highlight --save\n```\n\n### Usage\n\n#### Importing component\n\n```js\nimport Highlight from 'react-highlight'\n```\n\n#### Adding styles\n\nChoose the [theme](https://highlightjs.org/static/demo/) for syntax highlighting and add corresponding styles of highlight.js\n\n```css\n  \u003clink rel=\"stylesheet\" href=\"/path/to/styles/theme-name.css\"\u003e\n```\n\nThe styles will most likely be in `node_modules/highlight.js/styles` folder.\n\nProps:\n\n* className: custom class name\n* innerHTML: enable to render markup with dangerouslySetInnerHTML\n* element: render code snippet inside specified element\n\n#### Syntax highlighting of single code snippet\n\nCode snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.\n\n```html\n\u003cHighlight className='language-name-of-snippet'\u003e\n  {\"code snippet to be highlighted\"}\n\u003c/Highlight\u003e\n```\n\n#### Syntax highlighting of mutiple code snippets\n\nSet `innerHTML=true` to highlight multiple code snippets at a time.\nThis is especially usefull if html with multiple code snippets is generated from preprocesser tools like markdown.\n\n**Warning:** If innerHTML is set to true, make sure the html generated with code snippets is from trusted source.\n\n```html\n\u003cHighlight innerHTML={true}\u003e\n  {\"html with multiple code snippets\"}\n\u003c/Highlight\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakiran%2Freact-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakiran%2Freact-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakiran%2Freact-highlight/lists"}