or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

async-builds.mdindex.mdlanguage-support.mdlight-builds.mdprism-integration.mdstandard-highlighter.mdstyling-themes.md
tile.json

tessl/npm-react-syntax-highlighter

React component library for syntax highlighting with highlight.js and Prism.js support.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-syntax-highlighter@15.6.x

To install, run

npx @tessl/cli install tessl/npm-react-syntax-highlighter@15.6.0

index.mddocs/

React Syntax Highlighter

React Syntax Highlighter is a comprehensive React component library that provides syntax highlighting capabilities for displaying code in web applications. It supports multiple syntax highlighting engines including highlight.js and Prism.js through lowlight and refractor AST parsers, offering developers flexibility in choosing their preferred highlighting approach.

Package Information

  • Package Name: react-syntax-highlighter
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install react-syntax-highlighter

Core Imports

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

For Prism.js support:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

For Light builds (manual language registration):

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';

SyntaxHighlighter.registerLanguage('javascript', js);

Basic Usage

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const CodeBlock = () => {
  const codeString = `function greet(name) {
  return \`Hello, \${name}!\`;
}

console.log(greet('World'));`;

  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {codeString}
    </SyntaxHighlighter>
  );
};

Architecture

React Syntax Highlighter is built around several key components:

  • Multiple Build Variants: Full, Light, and Async builds for different bundle size requirements
  • Dual Engine Support: Both highlight.js (via lowlight) and Prism.js (via refractor) syntax engines
  • JavaScript Styling: Inline styles eliminating external CSS dependencies
  • AST-Based Rendering: Uses syntax trees to build virtual DOM instead of dangerouslySetInnerHTML
  • Dynamic Language Loading: Async variants support on-demand language loading
  • Extensible Rendering: Custom renderers and virtualization support

Capabilities

Standard Syntax Highlighter

Full-featured syntax highlighter using highlight.js with pre-bundled languages and default styling.

function SyntaxHighlighter(props: SyntaxHighlighterProps): JSX.Element;

interface SyntaxHighlighterProps {
  language?: string;
  children: string;
  style?: { [key: string]: React.CSSProperties };
  customStyle?: React.CSSProperties;
  useInlineStyles?: boolean;
  showLineNumbers?: boolean;
  showInlineLineNumbers?: boolean;
  startingLineNumber?: number;
  lineNumberContainerStyle?: React.CSSProperties;
  lineNumberStyle?: React.CSSProperties | ((lineNumber: number) => React.CSSProperties);
  wrapLines?: boolean;
  wrapLongLines?: boolean;
  lineProps?: React.HTMLProps<HTMLElement> | ((lineNumber: number) => React.HTMLProps<HTMLElement>);
  renderer?: (props: RendererProps) => React.ReactNode;
  PreTag?: React.ComponentType<any> | string;
  CodeTag?: React.ComponentType<any> | string;
  codeTagProps?: React.HTMLProps<HTMLElement>;
  [key: string]: any;
}

Standard Highlighter

Light Build Variants

Lightweight versions requiring manual language registration for optimal bundle sizes.

// Light build using highlight.js
const Light: SyntaxHighlighterComponent & {
  registerLanguage: (name: string, language: any) => void;
};

// Light build using Prism.js
const PrismLight: SyntaxHighlighterComponent & {
  registerLanguage: (name: string, language: any) => void;
};

Light Build Variants

Async Build Variants

Asynchronous versions with dynamic language loading and code splitting support.

// Async light build using highlight.js
const LightAsync: React.ComponentType<SyntaxHighlighterProps> & {
  preload: () => Promise<void>;
  loadLanguage: (language: string) => Promise<void>;
  isSupportedLanguage: (language: string) => boolean;
  isRegistered: (language: string) => boolean;
  registerLanguage: (name: string, language: any) => void;
  supportedLanguages: string[];
};

// Async variants for Prism.js
const PrismAsync: typeof LightAsync;
const PrismAsyncLight: typeof LightAsync;

Async Build Variants

Prism.js Integration

Full Prism.js support with enhanced language coverage including JSX, TSX, and modern syntax.

const Prism: SyntaxHighlighterComponent & {
  supportedLanguages: string[];
};

const PrismLight: SyntaxHighlighterComponent & {
  registerLanguage: (name: string, language: any) => void;
  alias: (name: string, aliases: string | string[]) => void;
};

Prism Integration

Styling and Themes

Extensive theme support with JavaScript-based styling and CSS class alternatives.

// Import highlight.js themes
import { 
  docco, 
  github, 
  monokai, 
  dracula,
  solarizedLight,
  solarizedDark
} from 'react-syntax-highlighter/dist/esm/styles/hljs';

// Import Prism themes
import { 
  prism, 
  dark, 
  tomorrow, 
  okaidia,
  coy
} from 'react-syntax-highlighter/dist/esm/styles/prism';

Styling and Themes

Language Support

Comprehensive language support with over 472 language definitions across both engines (193 for highlight.js, 279 for Prism.js).

// Access supported languages
const supportedLanguages: string[];

// Import individual languages for light builds
import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';

Language Support

Types

interface RendererProps {
  rows: RowData[];
  stylesheet: { [key: string]: React.CSSProperties };
  useInlineStyles: boolean;
}

interface RowData {
  type: 'element';
  tagName: string;
  properties: {
    className?: string[];
    style?: React.CSSProperties;
    key?: string;
  };
  children: Array<RowData | TextNode>;
}

interface TextNode {
  type: 'text';
  value: string;
}

type SyntaxHighlighterComponent = React.ComponentType<SyntaxHighlighterProps>;