Code Block | Vaadin

Code block and highlighting using Prism.

Code Block.

Vaadin mapping for my <code-block> element.

Getting Started

Creating a new <code-block> element is easy.

new CodeBlock(Language.JAVASCRIPT, "" +
    "function print(msg) {\n" +
    "  console.log(msg);\n" +
    "}\n" +
    "\n" +
    "print('Hello, World!');");

You can specify the theme.

new CodeBlock(Language.JAVASCRIPT, Theme.PRISM_TOMORROW, "" +
    "function print(msg) {\n" +
    "  console.log(msg);\n" +
    "}\n" +
    "\n" +
    "print('Hello, World!');");

If you want to remove the theme's background graphics, use setPlain.



This code is under the BSD 3-Clause.


If you like my work and want to support it, please consider sponsoring me. It's how I make the time to code great things!


If you're already using prism-element by Johannes Goebel, there's probably no reason to switch. The main difference is that I implemented a custom web component with Lit that uses Prism directly while Johannes used Polymer's prism-element. Also, I handle language and theme importing differently.


Link to this version
StableReleased 08 November 2021BSD 3-clause "New" or "Revised" License
Framework Support
Vaadin platform 14+
Install with
Release notes - Version 1.0.4