CKEditor5 Code Snippet Plugin

This plugin helps your create a code block or snippet in your rich text.

How to Use

1. To make use of this plugin, you will need to setup your editor using the framework. If you have not done so, below are links to the respective frontend framework specific docs for this. I will recommend you use a custom editor rather than the build. If you are going to use the build, you will need to follow instructions found here to avoid the duplicate modules error.

   • Node
   • Angular: Please note that you cannot build a custom editor for source yet for Angular. You will need to tinker with the build to use this plugin with your Angular project. See instructions here
   • React
   • Vue

2. Install this package using npm i ckeditor5-code-snippet-plugin. This package contains the plugin that will help create preformatted text as well as the command and toolbar button.

3. Import the CodeSnippet plugin into the file that contains your editor like so

import CodeSnippet from 'ckeditor5-code-snippet-plugin/dist/codesnippet';

4. In the config object, add CodeSnippet to the list of plugins.

plugins: [
  ..., CodeSnippet, ...
],

5. Add the command to the list of toolbar elements as well.

toolbar: [..., 'codeSnippet', ...],

Styling the Preformatted Text

To add custom styles to the preformatted text, you will need to add the following class to your global style; code-snippet. You may notice that the style gets overwritten when the pre element is in focus. To modify the override, add and edit the following selector as well .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus.

Contributors

Opeoluwa Iyi-Kuyoro: 👨🏿Profile - WebSite