React Native Code Highlighter

A lightweight and customizable code syntax highlighting library for React Native applications.

Features

• Syntax highlighting for over 20 programming languages
• Auto language detection
• Line numbering
• Line highlighting
• Multiple built-in themes (GitHub, Dracula, Monokai, Solarized)
• Copy to clipboard functionality
• Customizable styles
• Written in TypeScript

Installation

npm install react-native-code-highlighter
# or
yarn add react-native-code-highlighter

Basic Usage

import React from 'react';
import { View } from 'react-native';
import { CodeBlock, draculaTheme } from 'react-native-code-highlighter';

const MyComponent = () => {
    const code = `
        function helloWorld() {
            console.log('Hello, world!');
        }

        helloWorld();
    `;

  return (
    <View style={{ padding: 16 }}>
      <CodeBlock
        code={code}
        language="javascript"
        theme={draculaTheme}
        showLineNumbers={true}
        highlightedLines={[2]}
        title="Hello World Example"
      />
    </View>
  );
};

export default MyComponent;

Components

CodeHighlighter

Core component for syntax highlighting.

import { CodeHighlighter } from 'react-native-code-highlighter';

<CodeHighlighter
  code="const hello = 'world';"
  language="javascript"
  showLineNumbers={true}
/>

CodeBlock

Enhanced component with title bar and copy button.

import { CodeBlock } from 'react-native-code-highlighter';

<CodeBlock
  code="const hello = 'world';"
  language="javascript"
  title="Example"
  copyable={true}
/>

Props

CodeHighlighter Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | code | string | (required) | The code to highlight | | language | string | auto-detect | Programming language for syntax highlighting | | style | ViewStyle | {} | Style for the container | | textStyle | TextStyle | {} | Style for the text | | fontSize | number | 14 | Font size for code text | | fontFamily | string | 'monospace' | Font family for code text | | theme | Theme | githubTheme | Theme object for styling | | showLineNumbers | boolean | false | Whether to show line numbers | | highlightedLines | number[] | [] | Array of line numbers to highlight |

CodeBlock Props (extends CodeHighlighter Props)

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | undefined | Title to show in header | | titleStyle | TextStyle | {} | Style for the title text | | containerStyle | ViewStyle | {} | Style for the outer container | | contentContainerStyle | ViewStyle | {} | Style for the content container | | copyable | boolean | true | Whether to show copy button | | onCopy | () => void | undefined | Callback when copy is pressed |

Available Themes

• githubTheme - Light theme based on GitHub's code styling
• draculaTheme - Dark theme based on Dracula
• monokaiTheme - Dark theme based on Monokai
• solarizedLightTheme - Light theme based on Solarized
• solarizedDarkTheme - Dark theme based on Solarized

Creating Custom Themes

import { Theme } from 'react-native-code-highlighter';

const myCustomTheme: Theme = {
  backgroundColor: '#f5f5f5',
  textColor: '#333333',
  lineNumberColor: '#999999',
  highlightedLineColor: '#e8e8e8',
  tokens: {
    keyword: { color: '#ff0000', fontWeight: 'bold' },
    string: { color: '#00aa00' },
    comment: { color: '#999999', fontStyle: 'italic' },
    // Add more token styles as needed
  }
};

License

MIT