conorhastings/react-syntax-highlighter
4,663 stars·313 forks·JavaScript·MIT·4 viewsreact-syntax-highlighter.github.io/react-syntax-highlighter/demo↗
React Syntax Highlighter
react-syntax-highlighter is a component for rendering source code with syntax highlighting in React applications. It acts as a wrapper for the PrismJS and Highlight.js engines to provide formatted code display and language-specific colors.
The project provides a customizable code block renderer that supports custom DOM injection, line numbering, and inline styling. It allows users to replace default HTML tags with custom React components to control how code is injected into the document object model.
The library covers code presentation management through visual themes and line numbering. It includes mechanisms for bundle optimization, such as asynchronously loading highlighting engines and specific language definitions to reduce initial page load times.
Features
- Syntax Highlighting - Applies visual styles to code blocks to differentiate language keywords and structures for improved readability.
- Syntax Highlighting Components - Provides a comprehensive React component for rendering color-coded source code blocks using PrismJS and Highlight.js engines.
- Runtime Footprint Reducers - Minimizes the application footprint by importing a minimal build and excluding unnecessary language components.
- React Grammar Wrappers - Provides a React wrapper for the PrismJS tokenization engine to render formatted code blocks.
- Syntax Engine Wrappers - Wraps PrismJS and Highlight.js under a unified component interface to allow interchangeable syntax processing engines.
- Code Presentation Themes - Manages visual styling for code blocks, including syntax highlighting themes, typography, and line wrapping.
- Code Snippet Styling - Applies custom visual formatting to inline and multiline code blocks to match a design system.
- Customizable Code Block Renderers - Implements a customizable renderer that allows replacing default HTML tags with user-defined React components for granular DOM control.
- Syntax-Highlighted Code Blocks - Renders source code listings with syntax highlighting provided by external engines for better readability.
- Syntax Highlighters - Provides a React component for rendering source code with color-coded syntax highlighting.
- Highlighter Engine Adapters - Wraps the Highlight.js library to provide a unified React component interface for multi-language syntax highlighting.
- Code Block Themes - Customizes the visual style and colors of code segments through JavaScript-based inline styles and themes.
- Bundle Optimizers - Reduces initial page load times through selective imports and asynchronous loading of highlighting engines.
- Language Brush Loading - Optimizes client-side performance by selectively importing only the required language syntax definition files.
- Deferred Loading - Speeds up initial page load by delaying the initialization of the highlighting engine until needed.
- Technical Documentation Styling - Provides visual formatting and syntax highlighting specifically tailored for technical guides and documentation pages.
- Language Definition Bundles - Allows manual registration or asynchronous loading of specific languages to keep initial bundle sizes small.
- Syntax Highlighting Component Mappings - Converts syntax trees from highlighting engines into React components for granular styling control.
- Token Wrapping Components - Wraps individual syntax tokens in React elements to preserve structure and enable declarative rendering.
- Custom Element Renderers - Allows developers to replace default HTML tags with custom React components to control the final DOM structure.
- Custom Component Injection - Provides mechanisms to replace default component tags with custom React components for container injection.
- Line Numbering Utilities - Adds sequential line numbering to the side of code blocks with configurable starting indices and styles.
- Inline Style Injections - Applies visual themes by injecting computed CSS properties directly into the style attributes of language tokens.
- Syntax Highlighting - Syntax highlighting using Prismjs or Highlightjs AST.
