https://github.com/gmsgowtham/react-native-code-highlighter
Syntax highlighter for React Native powered by react-syntax-highlighter
https://github.com/gmsgowtham/react-native-code-highlighter
code-highlight react react-native syntax-highlighting typescript
Last synced: 23 days ago
JSON representation
Syntax highlighter for React Native powered by react-syntax-highlighter
- Host: GitHub
- URL: https://github.com/gmsgowtham/react-native-code-highlighter
- Owner: gmsgowtham
- License: mit
- Created: 2023-05-28T13:49:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T22:14:42.000Z (23 days ago)
- Last Synced: 2025-04-09T18:16:01.108Z (23 days ago)
- Topics: code-highlight, react, react-native, syntax-highlighting, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-code-highlighter
- Size: 4.11 MB
- Stars: 60
- Watchers: 3
- Forks: 5
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-code-highlighter
[](https://github.com/gmsgowtham/react-native-code-highlighter/actions/workflows/ci.yml)
[](https://coveralls.io/github/gmsgowtham/react-native-code-highlighter?branch=main)
[](https://www.npmjs.com/package/react-native-code-highlighter)
[](https://www.npmjs.com/package/react-native-code-highlighter)
Code/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)
## Installation
#### NPM
```sh
npm install react-native-code-highlighter react-syntax-highlighter
```
#### Yarn
```sh
yarn add react-native-code-highlighter react-syntax-highlighter
```
> Additional for typescript
#### NPM
```sh
npm install --save-dev @types/react-syntax-highlighter
```
#### Yarn
```sh
yarn add -D @types/react-syntax-highlighter
```
## Usage
### Props
| Prop | Description | Type | Optional |
| ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -------- |
| hljsStyle | Highlight.js style imported from `react-syntax-highlighter/dist/esm/styles/hljs` | `{ [key: string]: React.CSSProperties }` | false |
| textStyle | Style for the text text components. Note: `color` property will be overridden | `StyleProp` | true |
| scrollViewProps | Props for the underlying scroll view. `horizontal` is ignored | [ScrollViewProps](https://reactnative.dev/docs/scrollview#props) | true |
| containerStyle | Deprecated. `containerStyle` for the underlying `ScrollView`. Use `scrollViewProps.contentContainerStyle` instead | `StyleProp` | true |
| [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) Props | Props supported by react-syntax-highlighter. i.e. `language` | | |
### Example
```tsx
import React from "react";
import { StyleSheet } from "react-native";
import CodeHighlighter from "react-native-code-highlighter";
import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs";
const CODE_STR = `var hello = "world"`;
export default function HighlightComponent() {
return (
{CODE_STR}
);
}
const styles = StyleSheet.create({
codeContainer: {
padding: 16,
minWidth: "100%",
},
text: {
fontSize: 16,
},
});
```
> CodeSandbox: https://codesandbox.io/s/react-native-code-highligher-knfsyx?file=/src/App.js
## Screenshots
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
## Built using
- [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
- [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
- [trim-newlines](https://github.com/sindresorhus/trim-newlines)
- [css-to-react-native](https://github.com/styled-components/css-to-react-native)
