Code/Syntax highlighter for React Native. Inspired by react-native-syntax-highlighter, using react-syntax-highlighter
npm install react-native-code-highlighter react-syntax-highlighteryarn add react-native-code-highlighter react-syntax-highlighterAdditional for typescript
npm install --save-dev @types/react-syntax-highlighteryarn add -D @types/react-syntax-highlighter| Prop | Description | Type | Optional |
|---|---|---|---|
| hljsStyle | Highlight.js style imported from react-syntax-highlighter/dist/esm/styles/hljs | { [key: string]: React.CSSProperties } | false |
| containerStyle | containerStyle for the underlying ScrollView | StyleProp<br><ViewStyle> | true |
| textStyle | Style for the text components. Note: color property will be overridden | `StyleProp | true |
| react-syntax-highlighter Props | Props supported by react-syntax-highlighter |
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, }, });
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT