Report an issue


class since 4.4

A Code Snippet highlighter. It can be set as a default highlighter using CKEDITOR.plugins.codesnippet.setHighlighter, for example:

// Create a new plugin which registers a custom code highlighter
// based on customEngine in order to replace the one that comes
// with the Code Snippet plugin.
CKEDITOR.plugins.add( 'myCustomHighlighter', {
    afterInit: function( editor ) {
        // Create a new instance of the highlighter.
        var myHighlighter = new CKEDITOR.plugins.codesnippet.highlighter( {
            init: function( ready ) {
                // Asynchronous code to load resources and libraries for customEngine.
                customEngine.loadResources( function() {
                    // Let the editor know that everything is ready.
                } );
            highlighter: function( code, language, callback ) {
                // Let the customEngine highlight the code.
                customEngine.highlight( code, language, function() {
                    callback( highlightedCode );
                } );
        } );

        // Check how it performs.
        myHighlighter.highlight( 'foo()', 'javascript', function( highlightedCode ) {
            console.log( highlightedCode ); // -> <span class="pretty">foo()</span>
        } );

        // From now on, myHighlighter will be used as a Code Snippet
        // highlighter, overwriting the default engine.
        editor.plugins.codesnippet.setHighlighter( myHighlighter );
} );



  • highlighter : Function

    A function which highlights given plain text code in a given language and, once done, calls the callback function with highlighted markup as an argument.

  • init : Function

    If specified, this function should asynchronously load highlighter-specific resources and execute ready when the highlighter is ready.

  • languages : Object

    Defines languages supported by the highlighter. They can be restricted with the CKEDITOR.config.codeSnippet_languages configuration option.

    Note: If CKEDITOR.config.codeSnippet_languages is set, it will overwrite the languages listed in languages.

    languages: {
        coffeescript: 'CoffeeScript',
        cpp: 'C++',
        cs: 'C#',
        css: 'CSS'

    More information on how to change the list of languages is available in the Code Snippet documentation.

  • queue : Array


    A queue of highlight jobs to be done once the highlighter is ready.

    Defaults to []

  • ready : Boolean


    A flag which indicates whether the highlighter is ready to do jobs from the queue.


  • highlight( code, lang, callback )

    Executes the highlighter. If the highlighter is not ready, it defers the job (queue) and executes it when the highlighter is ready.


    code : String

    Code to be formatted.

    lang : String

    Language to be used (CKEDITOR.config.codeSnippet_languages).

    callback : Function

    Function which accepts highlighted String as an argument.

  • setHighlighter( highlighter )

    since 4.4

    Sets the custom syntax highlighter. See CKEDITOR.plugins.codesnippet.highlighter to learn how to register a custom highlighter.


    • This method can only be called while initialising plugins (in one of the three callbacks).
    • This method is accessible through the editor.plugins.codesnippet namespace only.


    highlighter : highlighter