search

conorhastings / react-native-syntax-highlighter

a syntax highlighter for react native using https://github.com/conorhastings/react-syntax-highlighter under the hood
MIT License
167 stars 25 forks source link

readme

React Native Syntax Highlighter

Syntax highlighting component for React Native using react-syntax-highlighter

You can see a demo using snack by Expo

Alternatively you can scan this qr code in The Expo app to access on your phone:

With Highlight.js vdom

With Prism vdom

You can try it out with Expo here

Install

npm install react-native-syntax-highlighter --save

Use

props

Accepts all of the same props as react-syntax-highlighter with three additional props.

import SyntaxHighlighter from 'react-native-syntax-highlighter';
/*by default component uses hljs so access hljs styles, import from /prism for prism styles */
import { docco } from 'react-syntax-highlighter/styles/hljs';
const Component = () => {
  const codeString = '(num) => num + 1';
  return <SyntaxHighlighter 
    language='javascript' 
    style={docco}
    highlighter={"prism" || "hljs"}
  >
    {codeString}
  </SyntaxHighlighter>;  
}

Unsupported Props

Some of the react-syntax-highlighter props are not currently supported by the mobile version, you can see which listed below:

Styles Available -- hljs

Styles Available -- prism