react-native-code-highlighter
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

react-native-code-highlighter

GitHub CI Coverage Status npm npm

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

Image

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Built using

Buy Me A Coffee

Package Sidebar

Install

npm i react-native-code-highlighter

Weekly Downloads

619

Version

1.2.3

License

MIT

Unpacked Size

35.6 kB

Total Files

24

Last publish

Collaborators

  • gmsgowtham