@ckeditor/ckeditor5-code-block
Advanced tools
@ckeditor/ckeditor5-code-block is a plugin for CKEditor 5 that allows users to insert and manage code blocks within the editor. It provides syntax highlighting and formatting for various programming languages, making it easier to include and display code snippets in content.
Inserting Code Blocks
This feature allows users to insert code blocks into the editor. The code sample demonstrates how to configure CKEditor 5 to include the CodeBlock plugin and add a button to the toolbar for inserting code blocks.
ClassicEditor.create(document.querySelector('#editor'), { plugins: [CodeBlock], toolbar: ['codeBlock'] })Syntax Highlighting
This feature provides syntax highlighting for different programming languages. The code sample shows how to configure the CodeBlock plugin to support JavaScript and Python syntax highlighting.
ClassicEditor.create(document.querySelector('#editor'), { plugins: [CodeBlock], codeBlock: { languages: [ { language: 'javascript', label: 'JavaScript' }, { language: 'python', label: 'Python' } ] } })Customizing Code Block Styles
This feature allows users to customize the styles of code blocks. The code sample demonstrates how to configure the CodeBlock plugin to apply custom CSS classes to code blocks.
ClassicEditor.create(document.querySelector('#editor'), { plugins: [CodeBlock], codeBlock: { styles: [ { element: 'pre', classes: ['custom-code-block'] } ] } })Prism is a lightweight, extensible syntax highlighter. It is a standalone library that can be integrated into various editors and applications. Unlike @ckeditor/ckeditor5-code-block, which is specifically designed for CKEditor 5, Prism can be used with any text editor or web application.
Highlight.js is a popular syntax highlighter that works in the browser as well as on the server. It automatically detects the language of the code block and applies appropriate syntax highlighting. While @ckeditor/ckeditor5-code-block is tailored for CKEditor 5, Highlight.js can be used independently or integrated into different editors.
Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, code folding, and other features for editing code. Unlike @ckeditor/ckeditor5-code-block, which is a plugin for CKEditor 5, Ace is a full-fledged code editor that can be embedded in web applications.
This package implements the code block feature for CKEditor 5.
This plugin is part of the ckeditor5 package. Install the whole package to use it.
npm install ckeditor5
If you want to check full CKEditor 5 capabilities, sign up for a free non-commitment 14-day trial.
Check out the demo in the code block feature guide.
See the @ckeditor/ckeditor5-code-block package page as well as the code block feature guide in the CKEditor 5 documentation.
Licensed under a dual-license model, this software is available under:
For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.
46.0.0 (July 9, 2025)
We are happy to announce the release of CKEditor 5 v46.0.0.
[!IMPORTANT]
This is a major release with significant amount of changes that may affect your CKEditor 5 integration. We strongly encourage you to read the entire update guide to understand all the changes. Pay special attention to:
- Unified exports and renames in the editor API: Many import/export names have changed
- Introduction of the default content styles: New default styling that may affect your content appearance These changes are designed to improve the long-term stability and maintainability of CKEditor 5, but they require careful attention during the upgrade process.
The new Line Height feature allows you to adjust the vertical spacing between lines of text, improving readability and visual harmony in your documents. This premium feature lets you set consistent line spacing across paragraphs and text blocks to enhance document accessibility and maintain visual hierarchy in your content.
Unneeded styles on block elements, such as tables and images, and General HTML Support nodes and attributes are finally eliminated when you hit the remove format button. The feature now cleans what it should, leaving the document structure untouched.
Working with styled lists becomes more intuitive as list markers (bullets and numbers) now automatically inherit text styling properties such as font size adjustments, text color changes, and font weight modifications (bold, italic).
This improvement makes it easier to create visually consistent and professional-looking lists without additional configuration. This improvement also supports Multi-level lists.
Important! This behavior is enabled by default, which means you may experience content change when you load the content to the editor 's new version (for the better in our opinion). But if this is not something you expect, you can opt out.
The Markdown feature dependencies have been modernized with a switch to the unified ecosystem, replacing the previous marked / turndown implementation. This change brings more consistent and symmetrical HTML ↔ Markdown conversion. By adopting remark and rehype from the same family of tools, we have created a more reliable and maintainable implementation that will better serve your document processing needs.
We have added the config.cloudServices.autoRefresh configuration property to disable the automatic token refresh mechanism. When it 's set to false, the token must be refreshed manually. This property opens up the ability to implement custom token handling if a certain use case requires this.
We have also introduced improvements to the addCommandThread command, which now supports creating comment threads on specified ranges. Additionally, it allows for creating a comment thread with an initial comment with the provided comment content.
Minor breaking change
The AddCommandThreadCommand#isEnabled property is no longer false when the current document selection is empty, as the command now allows for creating comment threads on custom ranges. If you previously used this property (for example, to provide a custom UI element), you should now use the observable AddCommentThreadCommand#hasContent property instead.
We have introduced dedicated methods for an easier way to get specific annotations related to a comment or a suggestion and vice versa.
After the big New Installation Method release (v42.0.0+), some developers upgrading from v41-x to v42-x were greeted by the does not provide an export named ... error. We addressed issues immediately as they were reported, but we knew it required a deeper are more comprehensive approach long-term.
With this release, we introduced a new, clear set of rules about internal imports, and also added re-exports if they were missing, changed the names of items to be more descriptive and avoid collisions, took care of internal methods that were already exported but not tagged, and cleaned up @deprecated code that was stale for some time.
If your build throws errors after the update, search and replace the old names with the new ones from the update guide. We have not changed the behavior of these APIs, just the names.
Last but not least, this release put us on the clean and straight path towards the deprecation of old installation methods. Please let us know if you have any questions on GitHub or support channels.
To improve the out-of-the-box experience and accessibility, we are introducing opinionated defaults for content styling. From this version, we ship a small defaults layer applied to .ck-content. These content styles are easily replaceable via CSS variable override. You may have already styled those things with more specific selectors.
While working on this initiative, we decided to standardize the CSS naming, too. All older variables that applied to the content styles now share the consistent --ck-content-* prefix. Read about the details in the update guide.
FAQs
Code block feature for CKEditor 5.
The npm package @ckeditor/ckeditor5-code-block receives a total of 538,410 weekly downloads. As such, @ckeditor/ckeditor5-code-block popularity was classified as popular.
We found that @ckeditor/ckeditor5-code-block demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.