Directory

← Back

Code Block

Code block and highlighting using Prism.

Author

Rating

Popularity

200+

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
# Code Block. Vaadin mapping for my [<code-block>](https://github.com/oliveryasuna/code-block) element. ## Getting Started Creating a new `` element is easy. ```java new CodeBlock(Language.JAVASCRIPT, "" + "function print(msg) {\n" + " console.log(msg);\n" + "}\n" + "\n" + "print('Hello, World!');"); ``` You can specify the theme. ```java 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`. ```java codeBlock.setPlain(true); ``` ## License This code is under the [BSD 3-Clause](LICENSE.txt). ## Sponsoring If you like my work and want to support it, please consider [sponsoring](https://github.com/sponsors/oliveryasuna) me. It's how I make the time to code great things! ## Note If you're already using [prism-element](https://vaadin.com/directory/component/prism-element) by Johannes Goebel, there's probably no reason to switch. The main difference is that I implemented a custom [web component](https://www.npmjs.com/package/@oliveryasuna/code-block) with Lit that uses Prism directly while Johannes used Polymer's [prism-element](https://www.npmjs.com/package/@polymer/prism-element). Also, I handle language and theme importing differently.
Online