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
.
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.
Install
Framework Support
Vaadin platform 14+
Install with
Release notes - Version 1.0.4