Code Block
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.
Links
Compatibility
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