1
1
# react-native-code-highlighter
2
2
3
3
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 )
4
-
5
4
![ GitHub] ( https://img.shields.io/github/license/gmsgowtham/react-native-code-highlighter )
6
5
[ ![ 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 )
7
6
[ ![ 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
11
10
## Installation
12
11
13
12
#### NPM
13
+
14
14
``` sh
15
15
npm install react-native-code-highlighter react-syntax-highlighter
16
16
```
17
17
18
18
#### Yarn
19
+
19
20
``` sh
20
21
yarn add react-native-code-highlighter react-syntax-highlighter
21
22
```
22
23
23
- Additional for typescript
24
+ > Additional for typescript
25
+
24
26
#### NPM
27
+
25
28
``` sh
26
29
npm install --save-dev @types/react-syntax-highlighter
27
30
```
28
31
29
32
#### Yarn
33
+
30
34
``` sh
31
35
yarn add -D @types/react-syntax-highlighter
32
36
```
33
37
34
38
## Usage
35
39
36
40
### 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 | | |
43
41
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 | | |
44
48
45
49
### Example
46
50
@@ -76,9 +80,11 @@ const styles = StyleSheet.create({
76
80
});
77
81
```
78
82
83
+ > CodeSandbox: https://codesandbox.io/s/react-native-code-highligher-knfsyx?file=/src/App.js
84
+
79
85
## Screenshots
80
86
81
- ![ Image] ( assets/example.png?raw=true ' Image ' )
87
+ ![ Image] ( assets/example.png?raw=true " Image " )
82
88
83
89
## Contributing
84
90
91
97
---
92
98
93
99
## Built using
100
+
94
101
- [ create-react-native-library] ( https://github.com/callstack/react-native-builder-bob )
95
102
- [ react-syntax-highlighter] ( https://github.com/react-syntax-highlighter/react-syntax-highlighter )
96
103
- [ trim-newlines] ( https://github.com/sindresorhus/trim-newlines )
0 commit comments