https://github.com/plonegovbr/volto-code-block
Volto add-on providing a code block with syntax highlighting.
https://github.com/plonegovbr/volto-code-block
plone volto-addon volto-block
Last synced: 4 days ago
JSON representation
Volto add-on providing a code block with syntax highlighting.
- Host: GitHub
- URL: https://github.com/plonegovbr/volto-code-block
- Owner: plonegovbr
- Created: 2022-06-11T03:50:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-02T14:43:18.000Z (almost 2 years ago)
- Last Synced: 2025-03-08T18:48:18.860Z (12 months ago)
- Topics: plone, volto-addon, volto-block
- Language: JavaScript
- Homepage:
- Size: 31.3 MB
- Stars: 2
- Watchers: 14
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-volto - volto-code-block - Insert code blocks, with syntax highlight, into Volto. (Add-ons)
README
# Code Block for Volto (@plonegovbr/volto-code-block)
Addon implementing a code block with syntax highlight for [Plone](https://plone.org) projects with [Volto](https://github.com/plone/volto).
[](https://www.npmjs.com/package/@plonegovbr/volto-code-block)
[](https://plonegovbr.github.io/volto-code-block/)
[](https://github.com/plonegovbr/volto-code-block/actions/workflows/code.yml)
[](https://github.com/plonegovbr/volto-code-block/actions/workflows/unit.yml)
## 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](https://plone.org.br)
You can also check its [Storybook](https://plonegovbr.github.io/volto-code-block/).
### Configure language available in the block setting
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.
### Volto 18 and later
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';
```
### Volto 17 and earlier
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).
### Prerequisites ✅
- An [operating system](https://6.docs.plone.org/install/create-project-cookieplone.html#prerequisites-for-installation) that runs all the requirements mentioned.
- [nvm](https://6.docs.plone.org/install/create-project-cookieplone.html#nvm)
- [Node.js and pnpm](https://6.docs.plone.org/install/create-project.html#node-js) 24
- [Make](https://6.docs.plone.org/install/create-project-cookieplone.html#make)
- [Git](https://6.docs.plone.org/install/create-project-cookieplone.html#git)
- [Docker](https://docs.docker.com/get-started/get-docker/) (optional)
### Installation 🔧
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
```
### Make convenience commands
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
```
### Development environment set up
Install package requirements.
```shell
make install
```
### Start developing
Start the backend.
```shell
make backend-docker-start
```
In a separate terminal session, start the frontend.
```shell
make start
```
### Lint code
Run ESlint, Prettier, and Stylelint in analyze mode.
```shell
make lint
```
### Format code
Run ESlint, Prettier, and Stylelint in fix mode.
```shell
make format
```
### i18n
Extract the i18n messages to locales.
```shell
make i18n
```
### Unit tests
Run unit tests.
```shell
make test
```
### Run Cypress tests
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)](https://github.com/plone/cookieplone) and [cookieplone-templates (c0b5a93)](https://github.com/plone/cookieplone-templates/commit/c0b5a93e16bc7da0fb36f37242a5dcf7f792323f) on 2025-11-13 18:28:49.205057. A special thanks to all contributors and supporters!