JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2167
  • Score
    100M100P100Q115865F
  • License MIT

test

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

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