# @remirror/extension-code-block > Unleash the inner coder with code blocks for your remirror editor. Latest version **3.0.2** (published 2025-08-02) · MIT license · 0 weekly downloads ## Install ```sh npm install @remirror/extension-code-block pnpm add @remirror/extension-code-block yarn add @remirror/extension-code-block bun add @remirror/extension-code-block ``` ## Health **Score 45/100 (D)** — status: stable. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 3.0.2 | | Published | 2025-08-02 | | First published | 2019-06-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 213.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3036 | | Maintainers | ifiokjr, ocavue | | Keywords | remirror, remirror-extension, code, code block, refractor, prism, editor | ## Links - npm: https://www.npmjs.com/package/@remirror/extension-code-block - Repository: https://github.com/remirror/remirror - Homepage: https://github.com/remirror/remirror/tree/HEAD/packages/remirror__extension-code-block - Issues: https://github.com/remirror/remirror/issues - npm.io page: https://npm.io/package/@remirror/extension-code-block ## Dependencies (7) - [refractor](https://npm.io/package/refractor.md) ^3.6.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.27.0 - [@remirror/core](https://npm.io/package/@remirror/core.md) 3.0.2 - [@remirror/theme](https://npm.io/package/@remirror/theme.md) 3.0.0 - [@types/refractor](https://npm.io/package/@types/refractor.md) ^3.0.2 - [@remirror/messages](https://npm.io/package/@remirror/messages.md) 3.0.0 - [@remirror/extension-positioner](https://npm.io/package/@remirror/extension-positioner.md) 3.0.2 ## Alternatives - [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads - [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads - [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads - [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads - [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads ## Recent versions - 3.0.2 (latest) — 2025-08-02 - 3.0.0-rc.9 (beta) — 2024-07-25 - 0.0.0-pr2271.2 (pr2271) — 2024-07-18 - 0.0.0-pr2222.1 (pr2222) — 2023-12-12 - 0.0.0-pr2223.1 (pr2223) — 2023-12-12 - 0.0.0-pr2169.2 (pr2169) — 2023-11-06 - 0.0.0-pr2166.4 (pr2166) — 2023-10-06 - 0.0.0-pr2128.4 (pr2128) — 2023-07-26 - 0.0.0-pr2118.1 (pr2118) — 2023-07-13 - 0.0.0-pr2100.1 (pr2100) — 2023-06-28 - 0.0.0-pr1966.1 (pr1966) — 2022-12-26 - 0.0.0-pr1948.1 (pr1948) — 2022-11-25 - 0.0.0-pr1942.1 (pr1942) — 2022-11-21 - 0.0.0-pr1938.1 (pr1938) — 2022-11-15 - 0.0.0-pr1922.2 (pr1922) — 2022-10-26 - … 322 more at https://npm.io/package/@remirror/extension-code-block/versions ## README # @remirror/extension-code-block > Unleash the inner coder with code blocks for your remirror editor. [![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#) [version]: https://flat.badgen.net/npm/v/@remirror/extension-code-block [npm]: https://npmjs.com/package/@remirror/extension-code-block [license]: https://flat.badgen.net/badge/license/MIT/purple [size]: https://bundlephobia.com/result?p=@remirror/extension-code-block [size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-code-block [typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label [downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-code-block/red?icon=npm ## Installation ```bash yarn add refractor @remirror/extension-code-block # yarn pnpm add refractor @remirror/extension-code-block # pnpm npm install refractor @remirror/extension-code-block # npm ``` This is included by default when you install the recommended `remirror` package. All exports are also available via the entry-point, `remirror/extensions`. Refractor is a peer dependency and must be installed to consume the package properly. ## Usage The following code sample will create a limited editor and run the available commands from this extension. ```ts import jsx from 'refractor/lang/jsx'; import typescript from 'refractor/lang/typescript'; import { ExtensionPriority, RemirrorManager } from 'remirror'; import { CodeBlockExtension, CorePreset } from 'remirror/extensions'; // Create the codeBlock extension const codeBlockExtension = new CodeBlockExtension({ supportedLanguages: [typescript, jsx] }); const corePreset = new CorePreset(); // Create the Editor Manager with the codeBlock extension passed through. const manager = RemirrorManager.create([codeBlockExtension, corePreset]); // Pass the dom element to the editor. If you are using `@remirror/react` or // other framework wrappers then this is handled for you. const element = document.createElement('div'); document.body.append(element); // Add the view to the editor manager. manager.addView(element); // Access the code block commands manager.store.commands.createCodeBlock({ language: 'markdown' }); // Also supports chaining manager.store.chain.updateCodeBlock({ language: 'js' }).formatCodeBlock().run(); ``` ### Formatter If you would like to format code, you can import from the `@remirror/extension-code-block/formatter` endpoint. The formatter requires `prettier@3.2` to be installed as a peer dependency. --- _Source: https://npm.io/package/@remirror/extension-code-block · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._