1. 5
Code Snippet
55 (3 votes)
86213 downloads codesnippet
  • Add to my editor
  • Download


    The recommended way to install all CKEditor add-ons is to create a custom build by using CKBuilder. To do that, click the Add to my editor button on the plugin page. When you are done, click the Build my editor button on the right side of the page to go to CKBuilder.

    Add-on Installation Instructions

    If you want to add the plugin manually, you will need to:

    1. Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
    2. Enable the plugin by using the extraPlugins configuration setting. Example:
      config.extraPlugins = 'codesnippet';
    3. Download and configure all its dependencies, too.

    Add-on Dependencies

Code Snippet

This plugin lets you insert rich code snippets with syntax highlighting into the editor.

The default implementation uses the integrated highlight.js library, but the plugin can be easily customized to use a different syntax highlighter, including a server-side one. An example of such implementation is the Code Snippet GeSHi plugin that is an extension of this plugin.

Additionally, the you can also use the following configuration options:

See the Code Snippet plugin documentation for more information.


Plugin versions CKEditor versions
4.5 4.4 4.3 4.2 4.1 4.0

Version: 4.5.11 - Download

Show notes

Another bug fixing release for the 4.5 series.

compatibleunknown compatibilityunknown compatibilityunknown compatibilityunknown compatibilityunknown compatibility

Version: 4.4.8 - Download

Show notes

Another bug-fixing release for the 4.4 series.

unknown compatibilitycompatibleunknown compatibilityunknown compatibilityunknown compatibilityunknown compatibility


  • carousel
  • carousel
  • carousel
  • carousel
  • carousel
Log in to rate this plugin


Post a comment
  1. The content of this field is kept private and will not be shown publicly.
  2. *  Required fields
  1. Hi, I'm the developper of pbckcode. It could be a great thing if we can merge these two plugins. It would add a code editor, and a preview into the ckeditor instance.

    Moreover, it would add support for several syntax highlighters.

    you can contact me : prbaron22[at]gmail[dot]com.

    Best regards

    • Thanks for the message. I contacted you on email. If anyone else is interested, a quote from my message:

      We wanted to add code editor to the code snippet dialog but we lacked time in the 4.4.0 milestone. So this is somewhere in our heads now, but we haven't started anything yet.

      Therefore, a contribution from the community would be greatly welcomed :). However, there are few requirements it has to meet.

      1. The code editor should not be a part of the codesnippet dialog. It will be better if it's an extension for it, just like the codesnippet GeSHi (http://ckeditor.com/addon/codesnippetgeshi). The idea is that it's better to build features based on composition rather than create one monolithic plugin with dozens of options. For example - there are many code editors and some developers may want something else than we will choose (e.g. a lighter one). Some developers will not need any editor too.
      2. The URL to code editor files should be configurable (it can default to CDN).
      3. It would be nice if tab vs spaces and the size of indentation were configurable (through the config object). The inputs in the dialog are not necessary, but make sense.

      We are willing to add such plugin to the official ones and then maintain it.

      • Thank you for your email.

        I will see how to integrate pbckcode functionalities into code snippets following your requirement.

  2. Awesome plugin,it's amazing function,but i have trouble making it enable in source mode, i wanna make a customized drop-down to select the codesytle(css/javascript/sql/...) in the source mode, just like Code Snippet's option, now i added a customized drop-down list in the toolbar,but i have no idea howto modify the code to implement this function. Any help would be greately appreciated!

  3. Thanks for the plugin, but how I can put inline code block via it, without line break? Something like

    <?php echo "xxx"; ?>

    in single line with outer text?

  4. Hi, 

    great plugin!

    Could you add Visual Basic syntax highlighting ?

    VBScript is not good for VB. (' - to comment  text for current one line only, not for all text in others lines after: ' )

    Public Sub Button47_Click()
      If Adver_type[4] = "f_serials" Then
        SerialName = Adver_g_name[4] ' comment text

    End like "Public

    Public Sub Button47_Click()
      If Adver_type[4] = "f_serials" Then
        SerialName = Adver_g_name[4]


  5. hao zhang's picture

    hao zhang


    When I put the ckeditor in the bootstrap's modal component , at the same time , I use this plugin then I can not type into the code content area.

  6. 1 2 3 4 > >>