Code Block for Volto (@plonegovbr/volto-code-block)

Addon implementing a code block with syntax highlight for Plone projects with Volto.

Screenshots

Code Block with Dark style

Code Block with Light style

Examples

@plonegovbr/volto-code-block can be seen in action at the following sites:

• Plone Brasil

You can also check its Storybook.

Install

New Volto Project

Create a Volto project

npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --addon @plonegovbr/volto-code-block
cd my-volto-project

Install new add-on and restart Volto:

yarn install
yarn start

Existing Volto Project

If you already have a Volto project, just update package.json:

"addons": [
    "@plonegovbr/volto-code-block"
],

"dependencies": {
    "@plonegovbr/volto-code-block": "*"
}

Test it

Go to http://localhost:3000/

Credits

The development of this add on was sponsored by the Brazilian Plone Community