@ckeditor/ckeditor5-code-block

What is @ckeditor/ckeditor5-code-block?

@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.

What are @ckeditor/ckeditor5-code-block's main functionalities?

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'] } ] } })

Other packages similar to @ckeditor/ckeditor5-code-block

prismjs

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

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-builds

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.

README

CKEditor 5 code block feature

This package implements the code block feature for CKEditor 5.

Installation

This plugin is part of the ckeditor5 package. Install the whole package to use it.

npm install ckeditor5

Create free account

If you want to check full CKEditor 5 capabilities, sign up for a free non-commitment 14-day trial.

Demo

Check out the demo in the code block feature guide.

Documentation

See the @ckeditor/ckeditor5-code-block package page as well as the code block feature guide in the CKEditor 5 documentation.

License

Licensed under a dual-license model, this software is available under:

• the GNU General Public License Version 2 or later,
• or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.