|
1 | 1 | # react-native-code-highlighter |
2 | 2 |
|
3 | | -Code/Syntax highlighter for React Native |
| 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 | 4 |
|
5 | 5 | ## Installation |
6 | 6 |
|
7 | 7 | ```sh |
8 | 8 | npm install react-native-code-highlighter |
| 9 | +or |
| 10 | +yarn add react-native-code-highlighter |
9 | 11 | ``` |
10 | 12 |
|
11 | 13 | ## Usage |
12 | 14 |
|
13 | | -```js |
14 | | -import { multiply } from 'react-native-code-highlighter'; |
| 15 | +### Props |
| 16 | +| Prop | Description | Type | Optional | |
| 17 | +|------------------------------------------------------------------------------------------------------------- |---------------------------------------------------------------------------------- |------------------------------------------ |---------- | |
| 18 | +| hljsStyle | Highlight.js style imported from `react-syntax-highlighter/dist/esm/styles/hljs` | `{ [key: string]: React.CSSProperties }` | false | |
| 19 | +| containerStyle | `containerStyle` for the underlying `ScrollView` | `StyleProp<br><ViewStyle>` | true | |
| 20 | +| textStyle | Style for the text components. Note: `color` property will be overridden | `StyleProp<TextStyle> | true | |
| 21 | +| [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) Props | Props from supported by react-syntax-highlighter | | | |
15 | 22 |
|
16 | | -// ... |
17 | 23 |
|
18 | | -const result = await multiply(3, 7); |
| 24 | +### Example |
| 25 | + |
| 26 | +```tsx |
| 27 | +import React from "react"; |
| 28 | +import { StyleSheet } from "react-native"; |
| 29 | +import CodeHighlighter from "react-native-code-highlighter"; |
| 30 | +import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs"; |
| 31 | + |
| 32 | +const CODE_STR = `var hello = "world"`; |
| 33 | + |
| 34 | +export default function HighlightComponent() { |
| 35 | + return ( |
| 36 | + <CodeHighlighter |
| 37 | + hljsStyle={atomOneDarkReasonable} |
| 38 | + containerStyle={styles.codeContainer} |
| 39 | + textStyle={styles.text} |
| 40 | + language="typescript" |
| 41 | + > |
| 42 | + {CODE_STR} |
| 43 | + </CodeHighlighter> |
| 44 | + ); |
| 45 | +} |
| 46 | + |
| 47 | +const styles = StyleSheet.create({ |
| 48 | + codeContainer: { |
| 49 | + padding: 16, |
| 50 | + minWidth: "100%", |
| 51 | + }, |
| 52 | + text: { |
| 53 | + fontSize: 16, |
| 54 | + }, |
| 55 | +}); |
19 | 56 | ``` |
20 | 57 |
|
21 | 58 | ## Contributing |
|
28 | 65 |
|
29 | 66 | --- |
30 | 67 |
|
31 | | -Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) |
| 68 | +## Built using |
| 69 | +- [create-react-native-library](https://github.com/callstack/react-native-builder-bob) |
| 70 | +- [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) |
| 71 | +- [trim-newlines](https://github.com/sindresorhus/trim-newlines) |
| 72 | +- [css-to-react-native](https://github.com/styled-components/css-to-react-native) |
0 commit comments