1.2.2 • Published 6 months ago
react-native-code-highlighter v1.2.2
react-native-code-highlighter
Code/Syntax highlighter for React Native. Inspired by react-native-syntax-highlighter, using react-syntax-highlighter
Installation
NPM
npm install react-native-code-highlighter react-syntax-highlighter
Yarn
yarn add react-native-code-highlighter react-syntax-highlighter
Additional for typescript
NPM
npm install --save-dev @types/react-syntax-highlighter
Yarn
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<TextStyle> | true |
scrollViewProps | Props for the underlying scroll view. horizontal is ignored | ScrollViewProps | true |
containerStyle | Deprecated. containerStyle for the underlying ScrollView . Use scrollViewProps.contentContainerStyle instead | StyleProp<ViewStyle> | true |
react-syntax-highlighter Props | Props supported by react-syntax-highlighter. i.e. language |
Example
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 (
<CodeHighlighter
hljsStyle={atomOneDarkReasonable}
containerStyle={styles.codeContainer}
textStyle={styles.text}
language="typescript"
>
{CODE_STR}
</CodeHighlighter>
);
}
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 to learn how to contribute to the repository and the development workflow.
License
MIT
Built using
1.2.2
6 months ago
1.2.1
8 months ago
1.2.0
8 months ago
1.1.0
9 months ago
1.0.1
11 months ago
1.0.0
11 months ago
1.0.0-rc.1
11 months ago
1.0.0-rc.0
11 months ago