Code Syntax Highlighting

Code Syntax Highlighting

@apollohg/react-native-rich-text-editor-code-highlighting adds native syntax highlighting to code blocks in RichTextEditor and RichTextViewer. It is optional: the base editor renders code blocks without installing a highlighting engine. This page covers the 2.x API; the addon requires a matching editor version and Expo >=52.

Install and rebuild

When using matching 2.x packages:

npm install @apollohg/react-native-rich-text-editor-code-highlighting

Rebuild the native application after installation. In an Expo project with generated native projects, run your normal prebuild/native build workflow, for example npx expo run:ios or npx expo run:android; regenerate native projects as needed when adding the module. A JavaScript reload or an existing Expo Go binary cannot add this native provider. See Installation.

The package uses Expo native-module autolinking and includes prebuilt iOS device/simulator libraries and Android arm64-v8a, armeabi-v7a, x86, and x86_64 libraries. Consumer installation does not invoke Cargo.

Enable it on a view

import { EditorStyleSheet, RichTextEditor, RichTextViewer } from '@apollohg/react-native-rich-text-editor';
import { createCodeHighlightingAddon } from '@apollohg/react-native-rich-text-editor-code-highlighting';

const highlighting = createCodeHighlightingAddon({ theme: 'base16-ocean.dark' });
const theme = EditorStyleSheet.create({
    codeBlock: {
        color: '#c0c5ce',
        backgroundColor: '#2b303b',
        padding: 12,
        marginVertical: 12,
        borderRadius: 8,
    },
});

<RichTextEditor documentHandle={documentHandle} theme={theme} addons={[highlighting]} />;
<RichTextViewer contentJSON={savedDocument} theme={theme} addons={[highlighting]} />;

Importing the package synchronously registers its native provider. The factory creates an immutable descriptor; it does not install or register native code. A missing native module, incompatible provider interface, or unavailable provider is an installation/configuration error: install/import the package and rebuild the app. It is separate from the ordinary-code fallbacks below.

Combine highlighting with a mentions descriptor in the same flat array. Only one highlighting capability is allowed per view. See Addons.

Choose a language

Set the code block's language attribute. For the built-in schemas (which use codeBlock for this node), a document can contain:

import type { DocumentJSON } from '@apollohg/react-native-rich-text-editor';

const savedDocument: DocumentJSON = {
    type: 'doc',
    content: [
        {
            type: 'codeBlock',
            attrs: { language: 'typescript' },
            content: [{ type: 'text', text: 'const greeting: string = "Hello";' }],
        },
    ],
};

The default schema declares codeBlock.attrs.language; preserve that attribute if you customize the schema. The addon does not add code blocks or change schema definitions. Syntax colors and parser state are presentation data and are never written into the document or collaboration updates.

Language	Accepted values
JavaScript	javascript, js
TypeScript	typescript, ts
TypeScript React	tsx
JSX	jsx (uses the TypeScript React grammar)
Swift	swift
Kotlin	kotlin, kt
Rust	rust, rs
Python	python, py
JSON	json
HTML	html
CSS	css
Shell	bash, shell, sh

Missing, plain-text, or unsupported language values use ordinary code styling. The engine does not guess a language from the content. Inline code marks are styled with theme.inlineCode; this addon highlights code blocks.

Choose a color theme

createCodeHighlightingAddon({ theme }) requires one of the exported codeHighlightingThemes names:

• base16-ocean.dark
• base16-eighties.dark
• base16-mocha.dark
• base16-ocean.light
• InspiredGitHub
• Solarized (dark)
• Solarized (light)

The exported CodeHighlightingTheme type is the union of these names. Invalid names throw from the factory. A theme supplies token foreground colors and bold/italic/underline traits. It does not set the code panel background, padding, margins, borders, or font size: choose those with the editor's codeBlock style. Create a new descriptor when switching between light and dark themes.

Work limits and disabling

Highlighting runs on native background workers and discards stale results. Code remains readable with its ordinary styles while highlighting is pending. The bundled engine uses syntect 5.3.0 and the compatible two-face 0.5.1 grammar pack.

Blocks over 64 KiB, lines over 4 KiB, or blocks over 1,000 lines fall back to ordinary code styling. The engine's worker-local cache retains at most 64 blocks and 1 MiB of accounted source/range data. Regex backtracking has an upstream finite step limit, not a wall-clock timeout. These are syntax-highlighting limits, separate from the editor's document and viewer resource limits.

Remove the descriptor from a view's addons array to disable highlighting there. To remove the engine and grammar assets from the app binary, uninstall the scoped package and rebuild the native application.

Licenses and attribution

Syntect is MIT-licensed. The addon also bundles third-party grammar/theme assets and dependencies with their own licenses. Its THIRD_PARTY_NOTICES.md preserves their license texts, copyright notices, and corresponding-source links; RUST-STANDARD-LIBRARY-NOTICES.html covers the Rust runtime. Include both with your app's open-source notices alongside the core editor's notices. See Installation.

Release versions

The core and extensions release together with matching version numbers. Extensions remain separate optional packages: installing the core alone does not include the highlighting engine, native libraries, or grammar assets.