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

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


Screenshots

$3

$3

Examples

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

- Plone Brasil

You can also check its Storybook.

$3

You can specify the language available in the setting by changing in config.js (or index.js) by modifying the object in config.settings.codeBlock.languages. Each item is composed of an object containing:

* label: Friendly name for the language. i.e.: Python
* language: Reference to prismjs language component.

Example:

``javascript

import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-docker';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-less';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-nginx';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-yaml';


import { languages } from '@plonegovbr/volto-code-block';

const applyConfig = (config) => {
config.settings['codeBlock'] = {
languages: {
bash: { label: 'Bash', language: languages.bash },
css: { label: 'CSS', language: languages.css },
dockerfile: { label: 'Dockerfile', language: languages.dockerfile },
javascript: { label: 'Javascript', language: languages.js },
json: { label: 'JSON', language: languages.json },
less: { label: 'LESS', language: languages.less },
markdown: { label: 'Markdown', language: languages.markdown },
nginx: { label: 'nginx', language: languages.nginx },
python: { label: 'Python', language: languages.python },
scss: { label: 'SCSS', language: languages.scss },
yaml: { label: 'Yaml', language: languages.yaml },
xml: { label: 'XML', language: languages.xml },
},
};

return config;
};

export default applyConfig;
`

Installation

To install your project, you must choose the method appropriate to your version of Volto.

$3

Add @plonegovbr/volto-code-block to your package.json:

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

Add @plonegovbr/volto-code-block to your volto.config.js:

`javascript
const addons = ['@plonegovbr/volto-code-block'];
`

If this package provides a Volto theme, and you want to activate it, then add the following to your volto.config.js:

`javascript
const theme = '@plonegovbr/volto-code-block';
`

$3

Create a new Volto project (you can skip this step if you already have one):

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

Add @plonegovbr/volto-code-block to your package.json:

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

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

Download and install the new add-on by running:

`
yarn install
`

Start volto with:

`
yarn start
`

Test installation

Visit http://localhost:3000/ in a browser, login, and check the awesome new features.

Development

The development of this add-on is done in isolation using a new approach using pnpm workspaces and latest mrs-developer and other Volto core improvements.
For this reason, it only works with pnpm and Volto 18 (currently in alpha).

$3

- An operating system that runs all the requirements mentioned.
- nvm
- Node.js and pnpm 24
- Make
- Git
- Docker (optional)

$3

1. Clone this repository, then change your working directory.

`shell
git clone git@github.com:collective/volto-code-block.git
cd volto-code-block
`

2. Install this code base.

`shell
make install
`

$3

Run make help to list the available commands.

`text
help Show this help
install Installs the add-on in a development environment
start Starts Volto, allowing reloading of the add-on during development
build Build a production bundle for distribution of the project with the add-on
i18n Sync i18n
ci-i18n Check if i18n is not synced
format Format codebase
lint Lint, or catch and remove problems, in code base
release Release the add-on on npmjs.org
release-dry-run Dry-run the release of the add-on on npmjs.org
test Run unit tests
ci-test Run unit tests in CI
backend-docker-start Starts a Docker-based backend for development
storybook-start Start Storybook server on port 6006
storybook-build Build Storybook
acceptance-frontend-dev-start Start acceptance frontend in development mode
acceptance-frontend-prod-start Start acceptance frontend in production mode
acceptance-backend-start Start backend acceptance server
ci-acceptance-backend-start Start backend acceptance server in headless mode for CI
acceptance-test Start Cypress in interactive mode
ci-acceptance-test Run cypress tests in headless mode for CI
`

$3

Install package requirements.

`shell
make install
`

$3

Start the backend.

`shell
make backend-docker-start
`

In a separate terminal session, start the frontend.

`shell
make start
`

$3

Run ESlint, Prettier, and Stylelint in analyze mode.

`shell
make lint
`

$3

Run ESlint, Prettier, and Stylelint in fix mode.

`shell
make format
`

$3

Extract the i18n messages to locales.

`shell
make i18n
`

$3

Run unit tests.

`shell
make test
`

$3

Run each of these steps in separate terminal sessions.

In the first session, start the frontend in development mode.

`shell
make acceptance-frontend-dev-start
`

In the second session, start the backend acceptance server.

`shell
make acceptance-backend-start
`

In the third session, start the Cypress interactive test runner.

`shell
make acceptance-test
``

License

The project is licensed under the MIT license.

Credits and acknowledgements 🙏

Generated using Cookieplone (0.9.10) and cookieplone-templates (c0b5a93) on 2025-11-13 18:28:49.205057. A special thanks to all contributors and supporters!