Introduction
Code Syntactic Sugar is a React-focused syntax highlighting library that outputs React elements directly. This eliminates the need to usedangerouslySetInnerHTML, making your code safer and more maintainable.
Built as a fork of sugar-high by Jiachi Liu, it adds powerful features like line modifiers and enhanced customization options.
Key features
React-first design
Produces React elements as output, no need for
dangerouslySetInnerHTMLLine modifiers
Highlight, add, or remove specific lines of code with visual indicators
Fully customizable
Control colors and styles using CSS variables and class names
Lightweight
Fast syntax highlighting with minimal overhead
What you can build
Code Syntactic Sugar is perfect for:- Documentation sites with code examples
- Technical blogs and tutorials
- Code diff viewers
- Interactive coding platforms
- Any React application that needs syntax highlighting
Requirements
React 18 or 19 must be installed in your project for Code Syntactic Sugar to work.
Supported languages
Code Syntactic Sugar provides syntax highlighting for JavaScript, TypeScript, JSX, and TSX code.Get started
Installation
Install Code Syntactic Sugar in your React project
Quickstart
Get up and running in under 5 minutes