Code Block

Code block and highlighting using Prism.

View larger

Close

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.

codeBlock.setPlain(true);

License

This code is under the BSD 3-Clause.

Sponsoring

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!

Note

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.

Links

• Author Homepage
• Source Code
• Discussion Forum
• Issue tracker
• Web Component

Compatibility