{"id":26943581,"url":"https://github.com/gmsgowtham/react-native-code-highlighter","last_synced_at":"2025-04-09T18:16:07.285Z","repository":{"id":170339228,"uuid":"646466997","full_name":"gmsgowtham/react-native-code-highlighter","owner":"gmsgowtham","description":"Syntax highlighter for React Native powered by react-syntax-highlighter","archived":false,"fork":false,"pushed_at":"2025-04-08T22:14:42.000Z","size":4306,"stargazers_count":60,"open_issues_count":13,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-09T18:16:01.108Z","etag":null,"topics":["code-highlight","react","react-native","syntax-highlighting","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-code-highlighter","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/gmsgowtham.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"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},"funding":{"github":["gmsgowtham"],"custom":["https://www.buymeacoffee.com/gmsgowtham"]}},"created_at":"2023-05-28T13:49:50.000Z","updated_at":"2025-04-03T16:56:20.000Z","dependencies_parsed_at":"2023-11-19T00:25:25.017Z","dependency_job_id":"0b843f8e-450e-491b-91b7-11a0f189fb02","html_url":"https://github.com/gmsgowtham/react-native-code-highlighter","commit_stats":null,"previous_names":["gmsgowtham/react-native-code-highlighter"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmsgowtham%2Freact-native-code-highlighter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmsgowtham%2Freact-native-code-highlighter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmsgowtham%2Freact-native-code-highlighter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmsgowtham%2Freact-native-code-highlighter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmsgowtham","download_url":"https://codeload.github.com/gmsgowtham/react-native-code-highlighter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085322,"owners_count":21045139,"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-highlight","react","react-native","syntax-highlighting","typescript"],"created_at":"2025-04-02T17:16:00.239Z","updated_at":"2025-04-09T18:16:07.252Z","avatar_url":"https://github.com/gmsgowtham.png","language":"TypeScript","readme":"# react-native-code-highlighter\n\n![GitHub](https://img.shields.io/github/license/gmsgowtham/react-native-code-highlighter)\n[![CI](https://github.com/gmsgowtham/react-native-code-highlighter/actions/workflows/ci.yml/badge.svg)](https://github.com/gmsgowtham/react-native-code-highlighter/actions/workflows/ci.yml)\n[![Coverage Status](https://coveralls.io/repos/github/gmsgowtham/react-native-code-highlighter/badge.svg?branch=main)](https://coveralls.io/github/gmsgowtham/react-native-code-highlighter?branch=main)\n[![npm](https://img.shields.io/npm/v/react-native-code-highlighter)](https://www.npmjs.com/package/react-native-code-highlighter)\n[![npm](https://img.shields.io/npm/dw/react-native-code-highlighter)](https://www.npmjs.com/package/react-native-code-highlighter)\n\n\nCode/Syntax highlighter for React Native. Inspired by [react-native-syntax-highlighter](https://github.com/conorhastings/react-native-syntax-highlighter), using [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)\n\n## Installation\n\n#### NPM\n\n```sh\nnpm install react-native-code-highlighter react-syntax-highlighter\n```\n\n#### Yarn\n\n```sh\nyarn add react-native-code-highlighter react-syntax-highlighter\n```\n\n\u003e Additional for typescript\n\n#### NPM\n\n```sh\nnpm install --save-dev @types/react-syntax-highlighter\n```\n\n#### Yarn\n\n```sh\nyarn add -D @types/react-syntax-highlighter\n```\n\n## Usage\n\n### Props\n\n| Prop                                                                                                   | Description                                                                                                       | Type                                                             | Optional |\n| ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -------- |\n| hljsStyle                                                                                              | Highlight.js style imported from `react-syntax-highlighter/dist/esm/styles/hljs`                                  | `{ [key: string]: React.CSSProperties }`                         | false    |\n| textStyle                                                                                              | Style for the text text components. Note: `color` property will be overridden                                     | `StyleProp\u003cTextStyle\u003e`                                           | true     |\n| scrollViewProps                                                                                        | Props for the underlying scroll view. `horizontal` is ignored                                                     | [ScrollViewProps](https://reactnative.dev/docs/scrollview#props) | true     |\n| containerStyle                                                                                         | Deprecated. `containerStyle` for the underlying `ScrollView`. Use `scrollViewProps.contentContainerStyle` instead | `StyleProp\u003cViewStyle\u003e`                                           | true     |\n| [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) Props | Props supported by react-syntax-highlighter. i.e. `language`                                                      |                                                                  |          |\n\n### Example\n\n```tsx\nimport React from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport CodeHighlighter from \"react-native-code-highlighter\";\nimport { atomOneDarkReasonable } from \"react-syntax-highlighter/dist/esm/styles/hljs\";\n\nconst CODE_STR = `var hello = \"world\"`;\n\nexport default function HighlightComponent() {\n\treturn (\n\t\t\u003cCodeHighlighter\n\t\t\thljsStyle={atomOneDarkReasonable}\n\t\t\tcontainerStyle={styles.codeContainer}\n\t\t\ttextStyle={styles.text}\n\t\t\tlanguage=\"typescript\"\n\t\t\u003e\n\t\t\t{CODE_STR}\n\t\t\u003c/CodeHighlighter\u003e\n\t);\n}\n\nconst styles = StyleSheet.create({\n\tcodeContainer: {\n\t\tpadding: 16,\n\t\tminWidth: \"100%\",\n\t},\n\ttext: {\n\t\tfontSize: 16,\n\t},\n});\n```\n\n\u003e CodeSandbox: https://codesandbox.io/s/react-native-code-highligher-knfsyx?file=/src/App.js\n\n## Screenshots\n\n![Image](assets/example.png?raw=true \"Image\")\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\n## Built using\n\n- [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n- [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)\n- [trim-newlines](https://github.com/sindresorhus/trim-newlines)\n- [css-to-react-native](https://github.com/styled-components/css-to-react-native)\n\n\n\u003ca href=\"https://www.buymeacoffee.com/gmsgowtham\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"width: 120px !important;\" \u003e\u003c/a\u003e\n","funding_links":["https://github.com/sponsors/gmsgowtham","https://www.buymeacoffee.com/gmsgowtham"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmsgowtham%2Freact-native-code-highlighter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmsgowtham%2Freact-native-code-highlighter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmsgowtham%2Freact-native-code-highlighter/lists"}