# prosemirror-codemirror-block > ProseMirror CodeMirror code block plugin Latest version **0.5.10** (published 2026-03-03) · ISC license · 0 weekly downloads ## Install ```sh npm install prosemirror-codemirror-block pnpm add prosemirror-codemirror-block yarn add prosemirror-codemirror-block bun add prosemirror-codemirror-block ``` ## Health **Score 60/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.5.10 | | Published | 2026-03-03 | | First published | 2021-11-20 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=16.0.0 | | Dependencies | 21 | | Unpacked size | 67.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Emergence Engineering | | Maintainers | tg44, viktorvacziee, matejcsok | | Keywords | ProseMirror, CodeMirror, code_block, plugin | ## Links - npm: https://www.npmjs.com/package/prosemirror-codemirror-block - Repository: https://github.com/emergence-engineering/emergence-tools - Homepage: https://github.com/emergence-engineering/emergence-tools/tree/main/packages/prosemirror-codemirror-block#readme - Issues: https://github.com/emergence-engineering/emergence-tools/issues - npm.io page: https://npm.io/package/prosemirror-codemirror-block ## Dependencies (21) - [@lezer/common](https://npm.io/package/@lezer/common.md) ^1.0.2 - [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.7.1 - [@codemirror/search](https://npm.io/package/@codemirror/search.md) ^6.5.4 - [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.2.5 - [@codemirror/lang-cpp](https://npm.io/package/@codemirror/lang-cpp.md) ^6.0.2 - [@codemirror/lang-css](https://npm.io/package/@codemirror/lang-css.md) ^6.2.1 - [@codemirror/lang-php](https://npm.io/package/@codemirror/lang-php.md) ^6.0.1 - [@codemirror/lang-sql](https://npm.io/package/@codemirror/lang-sql.md) ^6.5.4 - [@codemirror/lang-xml](https://npm.io/package/@codemirror/lang-xml.md) ^6.0.2 - [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.3.1 - [@codemirror/lang-html](https://npm.io/package/@codemirror/lang-html.md) ^6.4.6 - [@codemirror/lang-java](https://npm.io/package/@codemirror/lang-java.md) ^6.0.1 - [@codemirror/lang-json](https://npm.io/package/@codemirror/lang-json.md) ^6.0.1 - [@codemirror/lang-rust](https://npm.io/package/@codemirror/lang-rust.md) ^6.0.1 - [@codemirror/lang-wast](https://npm.io/package/@codemirror/lang-wast.md) ^6.0.1 - [@codemirror/lang-lezer](https://npm.io/package/@codemirror/lang-lezer.md) ^6.0.1 - [@codemirror/lang-python](https://npm.io/package/@codemirror/lang-python.md) ^6.1.3 - [@codemirror/autocomplete](https://npm.io/package/@codemirror/autocomplete.md) ^6.9.1 - [@codemirror/legacy-modes](https://npm.io/package/@codemirror/legacy-modes.md) ^6.3.3 - [@codemirror/lang-markdown](https://npm.io/package/@codemirror/lang-markdown.md) ^6.2.1 - [@codemirror/lang-javascript](https://npm.io/package/@codemirror/lang-javascript.md) ^6.2.1 ## Recent versions - 0.5.10 (latest) — 2026-03-03 - 0.5.9 — 2025-03-12 - 0.5.8 — 2024-12-10 - 0.5.7 — 2023-10-25 - 0.5.6 — 2023-10-17 - 0.5.5 — 2023-10-13 - 0.5.4 — 2023-10-13 - 0.5.2 — 2023-09-30 - 0.5.1 — 2023-09-22 - 0.5.0 — 2023-09-20 - 0.4.1 — 2023-04-28 - 0.4.0 — 2023-04-27 - 0.3.1 — 2023-01-02 - 0.3.0 — 2022-12-15 - 0.2.15 — 2022-02-15 - … 21 more at https://npm.io/package/prosemirror-codemirror-block/versions ## README # prosemirror-codemirror-block ![alt text](https://gitlab.com/emergence-engineering/prosemirror-codemirror-block/-/raw/main/public/editorScreenshot.png) Sponsored by [Skiff](https://www.skiff.org/) - a private, end-to-end encrypted, and decentralized workspace. By [Viktor Váczi](https://emergence-engineering.com/cv/viktor) at [Emergence Engineering](https://emergence-engineering.com/) Try it out at # Features - CodeMirror 6 `code_block` in ProseMirror - Customizable language selector - Lazy-loaded language support - Legacy ( CodeMirror 5 ) language support trough `@codemirror/legacy-modes` - Custom themes # How to use ```typescript import { schema as BasicSchema } from "prosemirror-schema-basic"; import { EditorState } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { exampleSetup } from "prosemirror-example-setup"; import { codeMirrorBlockPlugin, defaultSettings, languageLoaders, codeBlockKeymap, legacyLanguageLoaders, CodeBlockNodeName, } from "prosemirror-codemirror-block"; import { undo, redo } from "prosemirror-history"; import { Schema } from "prosemirror-model"; import { keymap } from "prosemirror-keymap"; const codeBlockSpec = BasicSchema.spec.nodes.get(CodeBlockNodeName); export const schema = new Schema({ nodes: BasicSchema.spec.nodes.update(CodeBlockNodeName, { ...(codeBlockSpec || {}), attrs: { ...codeBlockSpec?.attrs, lang: { default: null } }, }), marks: BasicSchema.spec.marks, }); const codeBlockDoc = { content: [ { content: [ { text: "prosemirror-codemirror-block", type: "text", }, ], type: "paragraph", }, { content: [ { text: "const jsFun = (arg) => {\n console.log(arg); \n}", type: "text", }, ], attrs: { lang: "javascript", }, type: CodeBlockNodeName, }, ], type: "doc", }; const state = EditorState.create({ doc: schema.nodeFromJSON(codeBlockDoc), plugins: [ ...exampleSetup({ schema, }), codeMirrorBlockPlugin({ ...defaultSettings, languageLoaders: { ...languageLoaders, ...legacyLanguageLoaders }, undo, redo, }), keymap(codeBlockKeymap), ], }); const view: EditorView = new EditorView(document.getElementById("editor"), { state, }); ``` # Configuration ### CodeBlockSettings Interface for the settings used by this plugin. | name | type | description | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | createSelect | (settings: CodeBlockSettings, dom: HTMLElement, node: ProseMirrorNode, view: EditorView, getPos: (() => number) | boolean) => ()=> void) | Callback to create lanaguge selector. Returns function that is called when the NodeView is cleaned up. Has default. | | updateSelect | (settings: CodeBlockSettings, dom: HTMLElement, node: ProseMirrorNode, view: EditorView, getPos: (() => number) | boolean, oldNode: ProseMirrorNode) => ()=> void) | Called when the codeblock node is updated. Should update the select value to reflect the `lang` property of the node. | | languageLoaders | ?LanguageLoaders | Record of functions which return a code extension for a given language. | | languageNameMap | ?Record | Can be used to give aliases to languages in the selector. | | languageWhitelist | ?string[] | List of used languages. | | undo | (state: EditorState, dispatch: (tr: Transaction) => void) => void | Undo provided by `prosemirror-history`. YJS uses a different one! | | redo | (state: EditorState, dispatch: (tr: Transaction) => void) => void | Redo provided by `prosemirror-history`. YJS uses a different one! | | theme | Extension[] | Insert codemirror theme here. Or any other extension you want! | | stopEvent | (e: Event) => boolean | Can be used to override stopEvent in NodeView. Can be used for custom drag handles for ex. | | readOnly | boolean | Read only editor mode. Defaults to false | | themes | Array<{ extension: Extension; name: string }> | Editor themes | | getCurrentTheme | () => string | Sets the current theme when creating a new code block | ### CSS & Styles The following is a good starter style for the language selector: ```css .codeblock-select { position: absolute; right: 0; z-index: 100; opacity: 0; transition: all 0.3s ease; margin: 6px 14px; } .codeblock-root { position: relative; } .codeblock-root:hover .codeblock-select { opacity: 1; } ``` ### Using and Customizing Themes - create your own themes, or use one from `npm` ```ts import { gruvboxDark } from "cm6-theme-gruvbox-dark"; import { basicLight } from "cm6-theme-basic-light"; const themes = [ { extension: gruvboxDark, name: "Dark", }, { extension: basicLight, name: "Light", }, ]; export const CodeBlockExtension = Extension.create({ name: "codeBlock", addProseMirrorPlugins: () => [ codeMirrorBlockPlugin({ ...defaultSettings, languageLoaders: { ...languageLoaders }, undo, redo, // add themes themes, // tell the nodeView which theme should be used when adding a new code block getCurrentTheme: () => { const content = document.getElementById("html-root"); return content?.classList.contains("darkMode") ? "Dark" : "Light"; }, }), keymap(codeBlockKeymap), ], }); ``` - use `updateTheme` to update the code blocks' theme ```ts import { updateTheme } from "prosemirror-codemirror-block"; // const updateTheme: (theme: string) => void; updateTheme("Dark") ``` ### About us Emergence Engineering is dev shop from the EU: We're looking for work, especially with ProseMirror ;) Feel free to contact me at viktor.vaczi@emergence-engineering.com --- _Source: https://npm.io/package/prosemirror-codemirror-block · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._