11# react-native-code-highlighter
22
33Code/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 )
4-
54![ GitHub] ( https://img.shields.io/github/license/gmsgowtham/react-native-code-highlighter )
65[ ![ 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 )
76[ ![ 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 )
@@ -11,36 +10,41 @@ Code/Syntax highlighter for React Native. Inspired by [react-native-syntax-highl
1110## Installation
1211
1312#### NPM
13+
1414``` sh
1515npm install react-native-code-highlighter react-syntax-highlighter
1616```
1717
1818#### Yarn
19+
1920``` sh
2021yarn add react-native-code-highlighter react-syntax-highlighter
2122```
2223
23- Additional for typescript
24+ > Additional for typescript
25+
2426#### NPM
27+
2528``` sh
2629npm install --save-dev @types/react-syntax-highlighter
2730```
2831
2932#### Yarn
33+
3034``` sh
3135yarn add -D @types/react-syntax-highlighter
3236```
3337
3438## Usage
3539
3640### Props
37- | Prop | Description | Type | Optional |
38- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------ | ---------- |
39- | hljsStyle | Highlight.js style imported from ` react-syntax-highlighter/dist/esm/styles/hljs ` | ` { [key: string]: React.CSSProperties } ` | false |
40- | containerStyle | ` containerStyle ` for the underlying ` ScrollView ` | ` StyleProp<br><ViewStyle> ` | true |
41- | textStyle | Style for the text components. Note: ` color ` property will be overridden | `StyleProp<TextStyle > | true |
42- | [ react-syntax-highlighter] ( https://github.com/react-syntax-highlighter/react-syntax-highlighter ) Props | Props supported by react-syntax-highlighter | | |
4341
42+ | Prop | Description | Type | Optional |
43+ | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | ---------------------------------------- | -------- |
44+ | hljsStyle | Highlight.js style imported from ` react-syntax-highlighter/dist/esm/styles/hljs ` | ` { [key: string]: React.CSSProperties } ` | false |
45+ | containerStyle | ` containerStyle ` for the underlying ` ScrollView ` | ` StyleProp<br><ViewStyle> ` | true |
46+ | textStyle | Style for the text components. Note: ` color ` property will be overridden | `StyleProp<TextStyle > | true |
47+ | [ react-syntax-highlighter] ( https://github.com/react-syntax-highlighter/react-syntax-highlighter ) Props | Props supported by react-syntax-highlighter | | |
4448
4549### Example
4650
@@ -76,9 +80,11 @@ const styles = StyleSheet.create({
7680});
7781```
7882
83+ > CodeSandbox: https://codesandbox.io/s/react-native-code-highligher-knfsyx?file=/src/App.js
84+
7985## Screenshots
8086
81- ![ Image] ( assets/example.png?raw=true ' Image ' )
87+ ![ Image] ( assets/example.png?raw=true " Image " )
8288
8389## Contributing
8490
9197---
9298
9399## Built using
100+
94101- [ create-react-native-library] ( https://github.com/callstack/react-native-builder-bob )
95102- [ react-syntax-highlighter] ( https://github.com/react-syntax-highlighter/react-syntax-highlighter )
96103- [ trim-newlines] ( https://github.com/sindresorhus/trim-newlines )
0 commit comments