Skip to content

Syntax Highlighter

A Vaadin Flow add-on for displaying syntax-highlighted code snippets, wrapping the React Syntax Highlighter library.

Overview

Use the Syntax Highlighter add-on to render formatted, color-highlighted source code inside a Vaadin application. It wraps the React Syntax Highlighter component and supports two highlighting engines — highlight.js and Prism — each exposed through a dedicated component with its own enums for supported languages and color styles. Content, language, style, line numbering, and long-line wrapping can all be configured programmatically.

Features

  • Displays syntax-highlighted code for many programming languages.
  • Two highlighting modes: highlight.js (SyntaxHighlighter) and Prism (SyntaxHighlighterPrism).
  • Selectable color themes/styles via enums (for example, ShStyle.A11YDARK).
  • Toggle line numbers on or off (setShowLineNumbers).
  • Toggle wrapping of long lines (setWrapLongLines).
  • Update the displayed code at runtime (setContent).
  • Implements HasSize for full width/height control.

Supported versions

Add-on version Vaadin version
1.x 24

Refer to the Vaadin Directory page for exact version compatibility.

Installation

From the Vaadin Directory

Available in the Vaadin Directory.

Maven dependency

<dependency>
    <groupId>com.flowingcode.vaadin.addons</groupId>
    <artifactId>syntax-highlighter-addon</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage

Render highlighted code with the highlight.js component:

String code = "(num) => num + 1";

SyntaxHighlighter sh = new SyntaxHighlighter(ShLanguage.JAVASCRIPT, code);
sh.setSizeFull();
sh.setShStyle(ShStyle.A11YDARK);
sh.setShowLineNumbers(true);
sh.setWrapLongLines(true);

// update the displayed code later
sh.setContent(newCodeString);

Use the Prism engine instead:

SyntaxHighlighterPrism prism =
    new SyntaxHighlighterPrism(ShLanguagePrism.JAVA, "class Hello {}");
prism.setShowLineNumbers(true);

Special configuration when using Spring

When running on Spring, allow-list the com.flowingcode package so Vaadin Flow can discover the add-on's components. See Common configuration for details.

API reference

Headline types exposed by the add-on:

  • BaseSyntaxHighlighter — the shared base; extends ReactAdapterComponent and implements HasSize. Key methods: getContent() / setContent(String), isShowLineNumbers() / setShowLineNumbers(boolean), isWrapLongLines() / setWrapLongLines(boolean), setWidth(String), setHeight(String).
  • SyntaxHighlighter — the highlight.js component; extends BaseSyntaxHighlighter. Constructors: SyntaxHighlighter(), SyntaxHighlighter(ShLanguage language, String content). Adds getShLanguage() / setShLanguage(ShLanguage) and getShStyle() / setShStyle(ShStyle).
  • SyntaxHighlighterPrism — the Prism component; extends BaseSyntaxHighlighter. Constructors: SyntaxHighlighterPrism(), SyntaxHighlighterPrism(ShLanguagePrism language, String content).
  • ShLanguage / ShLanguagePrism — enums of supported languages for each engine.
  • ShStyle / ShStylePrism — enums of supported color themes for each engine.

For the full API surface, browse the published JavaDoc.

Demo

A live demo is available at addonsv25.flowingcode.com/syntax-highlighter. To run the demo locally:

git clone https://github.com/FlowingCode/SyntaxHighlighter.git
cd SyntaxHighlighter
mvn clean install jetty:run

Then open http://localhost:8080/.

Source code

SyntaxHighlighter on GitHub — distributed under Apache License 2.0.