Package Exports

react-native-code-highlighter
react-native-code-highlighter/dist/commonjs/index.js
react-native-code-highlighter/dist/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-code-highlighter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-code-highlighter

Code/Syntax highlighter for React Native. Inspired by react-native-syntax-highlighter, using react-syntax-highlighter

GitHub npm npm

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 | | 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 | | |

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,
    },
});

Screenshots

Contributing

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

License

MIT