Directory

← Back

Code Block

Code block and highlighting using Prism.

Author

Contributors

Rating

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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2021-11-08
Maturity
STABLE
License
BSD 3-clause "New" or "Revised" License

Compatibility

Framework
Vaadin 14+
Browser
N/A

Code Block - Vaadin Add-on Directory

Code block and highlighting using Prism. Code Block - Vaadin Add-on Directory
Online