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, install the 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": "*"
}

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:

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;

Test it

Go to http://localhost:3000/

Credits

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