{"id":13568145,"url":"https://github.com/plonegovbr/volto-code-block","last_synced_at":"2026-02-27T08:43:54.460Z","repository":{"id":45665653,"uuid":"502243248","full_name":"plonegovbr/volto-code-block","owner":"plonegovbr","description":"Volto add-on providing a code block with syntax highlighting.","archived":false,"fork":false,"pushed_at":"2024-04-02T14:43:18.000Z","size":32798,"stargazers_count":2,"open_issues_count":4,"forks_count":5,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-03-08T18:48:18.860Z","etag":null,"topics":["plone","volto-addon","volto-block"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plonegovbr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-11T03:50:53.000Z","updated_at":"2023-06-28T21:14:20.000Z","dependencies_parsed_at":"2024-02-24T17:24:16.136Z","dependency_job_id":"125b6340-5637-49c8-9261-05600500b39e","html_url":"https://github.com/plonegovbr/volto-code-block","commit_stats":{"total_commits":31,"total_committers":2,"mean_commits":15.5,"dds":0.06451612903225812,"last_synced_commit":"e8605bfdc50bad66cb824d5ac6a5dd72ef2f623d"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plonegovbr%2Fvolto-code-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plonegovbr%2Fvolto-code-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plonegovbr%2Fvolto-code-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plonegovbr%2Fvolto-code-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plonegovbr","download_url":"https://codeload.github.com/plonegovbr/volto-code-block/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247123071,"owners_count":20887259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plone","volto-addon","volto-block"],"created_at":"2024-08-01T14:00:20.617Z","updated_at":"2026-02-27T08:43:54.454Z","avatar_url":"https://github.com/plonegovbr.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":[],"readme":"# Code Block for Volto (@plonegovbr/volto-code-block)\n\nAddon implementing a code block with syntax highlight for [Plone](https://plone.org) projects with [Volto](https://github.com/plone/volto).\n\n[![npm](https://img.shields.io/npm/v/@plonegovbr/volto-code-block)](https://www.npmjs.com/package/@plonegovbr/volto-code-block)\n[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook\u0026logoColor=white\u0026style=flat-square)](https://plonegovbr.github.io/volto-code-block/)\n[![Code analysis checks](https://github.com/plonegovbr/volto-code-block/actions/workflows/code.yml/badge.svg)](https://github.com/plonegovbr/volto-code-block/actions/workflows/code.yml)\n[![Unit tests](https://github.com/plonegovbr/volto-code-block/actions/workflows/unit.yml/badge.svg)](https://github.com/plonegovbr/volto-code-block/actions/workflows/unit.yml)\n\n## Screenshots\n\n### Code Block with Dark style\n\n\u003cimg alt=\"Screenshot\" src=\"https://github.com/plonegovbr/volto-code-block/raw/main/docs/block-dark.png\" width=\"500\" /\u003e\n\n### Code Block with Light style\n\n\u003cimg alt=\"Screenshot\" src=\"https://github.com/plonegovbr/volto-code-block/raw/main/docs/block-light.png\" width=\"500\" /\u003e\n\n## Examples\n\n@plonegovbr/volto-code-block can be seen in action at the following sites:\n\n- [Plone Brasil](https://plone.org.br)\n\nYou can also check its [Storybook](https://plonegovbr.github.io/volto-code-block/).\n\n### Configure language available in the block setting\n\nYou 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:\n\n* label: Friendly name for the language. i.e.: Python\n* language: Reference to `prismjs` language component.\n\n\nExample:\n\n```javascript\n\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-clike';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-docker';\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-less';\nimport 'prismjs/components/prism-markdown';\nimport 'prismjs/components/prism-markup';\nimport 'prismjs/components/prism-nginx';\nimport 'prismjs/components/prism-python';\nimport 'prismjs/components/prism-scss';\nimport 'prismjs/components/prism-yaml';\n\n\nimport { languages } from '@plonegovbr/volto-code-block';\n\nconst applyConfig = (config) =\u003e {\n    config.settings['codeBlock'] = {\n        languages: {\n        bash: { label: 'Bash', language: languages.bash },\n        css: { label: 'CSS', language: languages.css },\n        dockerfile: { label: 'Dockerfile', language: languages.dockerfile },\n        javascript: { label: 'Javascript', language: languages.js },\n        json: { label: 'JSON', language: languages.json },\n        less: { label: 'LESS', language: languages.less },\n        markdown: { label: 'Markdown', language: languages.markdown },\n        nginx: { label: 'nginx', language: languages.nginx },\n        python: { label: 'Python', language: languages.python },\n        scss: { label: 'SCSS', language: languages.scss },\n        yaml: { label: 'Yaml', language: languages.yaml },\n        xml: { label: 'XML', language: languages.xml },\n        },\n    };\n\n    return config;\n};\n\nexport default applyConfig;\n```\n\n## Installation\n\nTo install your project, you must choose the method appropriate to your version of Volto.\n\n\n### Volto 18 and later\n\nAdd `@plonegovbr/volto-code-block` to your `package.json`:\n\n```json\n\"dependencies\": {\n    \"@plonegovbr/volto-code-block\": \"*\"\n}\n```\n\nAdd `@plonegovbr/volto-code-block` to your `volto.config.js`:\n\n```javascript\nconst addons = ['@plonegovbr/volto-code-block'];\n```\n\nIf this package provides a Volto theme, and you want to activate it, then add the following to your `volto.config.js`:\n\n```javascript\nconst theme = '@plonegovbr/volto-code-block';\n```\n\n### Volto 17 and earlier\n\nCreate a new Volto project (you can skip this step if you already have one):\n\n```\nnpm install -g yo @plone/generator-volto\nyo @plone/volto my-volto-project --addon @plonegovbr/volto-code-block\ncd my-volto-project\n```\n\nAdd `@plonegovbr/volto-code-block` to your package.json:\n\n```JSON\n\"addons\": [\n    \"@plonegovbr/volto-code-block\"\n],\n\n\"dependencies\": {\n    \"@plonegovbr/volto-code-block\": \"*\"\n}\n```\n\nDownload and install the new add-on by running:\n\n```\nyarn install\n```\n\nStart volto with:\n\n```\nyarn start\n```\n\n## Test installation\n\nVisit http://localhost:3000/ in a browser, login, and check the awesome new features.\n\n\n## Development\n\nThe 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.\nFor this reason, it only works with pnpm and Volto 18 (currently in alpha).\n\n\n### Prerequisites ✅\n\n-   An [operating system](https://6.docs.plone.org/install/create-project-cookieplone.html#prerequisites-for-installation) that runs all the requirements mentioned.\n-   [nvm](https://6.docs.plone.org/install/create-project-cookieplone.html#nvm)\n-   [Node.js and pnpm](https://6.docs.plone.org/install/create-project.html#node-js) 24\n-   [Make](https://6.docs.plone.org/install/create-project-cookieplone.html#make)\n-   [Git](https://6.docs.plone.org/install/create-project-cookieplone.html#git)\n-   [Docker](https://docs.docker.com/get-started/get-docker/) (optional)\n\n### Installation 🔧\n\n1.  Clone this repository, then change your working directory.\n\n    ```shell\n    git clone git@github.com:collective/volto-code-block.git\n    cd volto-code-block\n    ```\n\n2.  Install this code base.\n\n    ```shell\n    make install\n    ```\n\n\n### Make convenience commands\n\nRun `make help` to list the available commands.\n\n```text\nhelp                             Show this help\ninstall                          Installs the add-on in a development environment\nstart                            Starts Volto, allowing reloading of the add-on during development\nbuild                            Build a production bundle for distribution of the project with the add-on\ni18n                             Sync i18n\nci-i18n                          Check if i18n is not synced\nformat                           Format codebase\nlint                             Lint, or catch and remove problems, in code base\nrelease                          Release the add-on on npmjs.org\nrelease-dry-run                  Dry-run the release of the add-on on npmjs.org\ntest                             Run unit tests\nci-test                          Run unit tests in CI\nbackend-docker-start             Starts a Docker-based backend for development\nstorybook-start                  Start Storybook server on port 6006\nstorybook-build                  Build Storybook\nacceptance-frontend-dev-start    Start acceptance frontend in development mode\nacceptance-frontend-prod-start   Start acceptance frontend in production mode\nacceptance-backend-start         Start backend acceptance server\nci-acceptance-backend-start      Start backend acceptance server in headless mode for CI\nacceptance-test                  Start Cypress in interactive mode\nci-acceptance-test               Run cypress tests in headless mode for CI\n```\n\n### Development environment set up\n\nInstall package requirements.\n\n```shell\nmake install\n```\n\n### Start developing\n\nStart the backend.\n\n```shell\nmake backend-docker-start\n```\n\nIn a separate terminal session, start the frontend.\n\n```shell\nmake start\n```\n\n### Lint code\n\nRun ESlint, Prettier, and Stylelint in analyze mode.\n\n```shell\nmake lint\n```\n\n### Format code\n\nRun ESlint, Prettier, and Stylelint in fix mode.\n\n```shell\nmake format\n```\n\n### i18n\n\nExtract the i18n messages to locales.\n\n```shell\nmake i18n\n```\n\n### Unit tests\n\nRun unit tests.\n\n```shell\nmake test\n```\n\n### Run Cypress tests\n\nRun each of these steps in separate terminal sessions.\n\nIn the first session, start the frontend in development mode.\n\n```shell\nmake acceptance-frontend-dev-start\n```\n\nIn the second session, start the backend acceptance server.\n\n```shell\nmake acceptance-backend-start\n```\n\nIn the third session, start the Cypress interactive test runner.\n\n```shell\nmake acceptance-test\n```\n\n## License\n\nThe project is licensed under the MIT license.\n\n## Credits and acknowledgements 🙏\n\nGenerated 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!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplonegovbr%2Fvolto-code-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplonegovbr%2Fvolto-code-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplonegovbr%2Fvolto-code-block/lists"}