react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  •        124

Check out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.


babel-runtime : ^6.18.0
highlight.js : ~9.12.0
lowlight : ~1.9.1
prismjs : ^1.8.4
refractor : ^2.4.1



Related Projects

react-highlight - React component for syntax highlighting

  •    Javascript

The styles will most likely be in node_modules/highlight.js/styles folder. Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.

vim-jsx - React JSX syntax highlighting and indenting for vim.

  •    Vim

Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React. Notably, the system vim JavaScript syntax is not supported, due to its over-simplicity. However, the system XML syntax package is an implicit dependency.

Highlight.js - Javascript Syntax Highlighter

  •    Javascript

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection. It supports 176 languages and 79 styles, automatic language detection, multi-language code highlighting and lot more.

Pygments - Syntax Highlighter in Python

  •    Python

Pygments is a generic syntax highlighter for general use in all kinds of software such as forum systems, wikis or other applications that need to prettify source code. It supports all common programming languages. It will take source code (or other markup) in a supported language and output a processed version (in different formats) containing syntax highlighting markup. It suports a number of output formats like HTML, RTF, LaTeX and ANSI sequences (console output).

Highlightr - iOS & OSX Syntax Highlighter.

  •    Swift

Highlightr is an iOS & macOS syntax highlighter built with Swift. It uses highlight.js as it core, supports 176 languages and comes with 79 styles. Takes your lame string with code and returns a NSAttributtedString with proper syntax highlighting.

language-babel - ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM

  •    CoffeeScript

Language grammar for all versions of JavaScript including ES2016 and ESNext, JSX syntax as used by Facebook React, Atom's etch and others, as well as optional typed JavaScript using Facebook flow. This package also supports highlighting of GraphQL language constructs when inside certain JavaScript template strings. For .graphql and .gql file support please see language-graphql . The colour of syntax is determined by the theme in use. By default the language-babel package will detect file types .js,.babel,.jsx, .es, .es6, .mjs and .flow. Use the standard ATOM interface to enable it for other file types. This provides a grammar that scopes the file in order to colour the text in a meaningful way. If other JavaScript grammars are enabled these may take precedence over language-babel. Look at the bottom right status bar indicator to determine the language grammar of a file being edited. language-babel will be shown as either Babel or Babel ES6 JavaScript. Clicking the name will allow the grammar for a file to be changed.

Prism - Lightweight, robust, elegant syntax highlighting

  •    Javascript

Prism is a lightweight, robust, elegant syntax highlighting library. It's a spin-off project from Dabblet. The core is 2KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB. Define new languages or extend existing ones. Add new features thanks to Prism’s plugin architecture. It supports parallelism with Web Workers, if available. All styling is done through CSS, with sensible class names like .comment, .string, .property etc

SyntaxHighlighter - Fully functional self-contained code syntax highlighter developed in JavaScript

  •    Javascript

SyntaxHighlighter is THE client side highlighter for the web and web-apps! It's been around since 2004 and it's used virtually everywhere to seamlessly highlight code for presentation purposes. SyntaxHighlighter is currently used and has been used in the past by Microsoft, Apache, Mozilla, Yahoo, Wordpress, Bug Labs, Freshbooks and many other companies and blogs.

Splash - A fast, lightweight and flexible Swift syntax highlighter for blogs, tools and fun!

  •    Swift

Welcome to Splash - a fast, lightweight and flexible Swift syntax highlighter. It can be used to generate code sample HTML for a blog post, to turn a string of Swift code into a fully syntax highlighted image, or to build custom developer tools. Splash can be used either as a library in your own Swift Package Manager-powered tool or script, or by using one of the three built-in command line tools that act as frontends for the Splash library.

highlight - Rich featured syntax highlighter for Keynote slides.

  •    Swift

Highlight is a rich-featured syntax highlighter for Keynote slides that allows you to get syntax-highlighted code in RTF with one click. Its main feature is based on highlight.js, which means 176 langauges and 79 styles are available. Check out the demo to see what you get with the application. Do you like to customize the results? Just open the Preferences dialog. You will see how.

react-remarkable - A React component for rendering Markdown with remarkable

  •    Javascript

A React component for rendering Markdown with remarkable. Shortly you'll see that markdown syntax highlighting is enabled.

chroma - A general purpose syntax highlighter in pure Go

  •    Go

NOTE: As Chroma has just been released, its API is still in flux. That said, the high-level interface should not change significantly.Chroma takes source code and other structured text and converts it into syntax highlighted HTML, ANSI-coloured text, etc.

shellharden - The corrective bash syntax highlighter

  •    Rust

Shellharden is a syntax highlighter and a tool to semi-automate the rewriting of scripts to ShellCheck conformance, mainly focused on quoting. Above: Selected portions of xdg-desktop-menu as highlighted by Shellharden. The foreground colors are syntax highlighting, whereas the background colors (green and red) show characters that Shellharden would have added or removed if let loose with the --transform option. Below: An artificial example that shows more tricky cases and special features.

JUSH - JavaScript Syntax Highlighter

  •    Javascript

JUSH is a syntax highlighting component written in JavaScript. It highlights HTML, CSS, JS, PHP and SQL code embedded into each other. Beside syntax highlighting, it provides links to the documentation for all supported languages.

react-hyperscript - Hyperscript syntax for React.js markup

  •    Javascript

Hyperscript syntax for React.js markup. If you're using React 0.11, use react-hyperscript 1.x.x. For later versions, use react-hyperscript 2.x.x.

MagicPython - Cutting edge Python syntax highlighter for Sublime Text, Atom and Visual Studio Code

  •    Javascript

This is a package with preferences and syntax highlighter for cutting edge Python 3, although Python 2 is well supported, too. The syntax is compatible with Sublime Text, Atom and Visual Studio Code. It is meant to be a drop-in replacement for the default Python package. We are proud to say that MagicPython is used by GitHub to highlight Python.


  •    PHP

Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, local file or post text.