1. 2.333335
Syntaxhighlighter Interface
2.35 (6 votes)
43930 downloads syntaxhighlight
  • 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 = 'syntaxhighlight';
    3. Download and configure all its dependencies, too.

    Add-on Dependencies

    Note: The plugin may have additional requirements. Check the add-on page and documentation for more details.

Syntaxhighlighter Interface


A plugin originally written for CKEditor 3+ that enables code syntax highlighting. Interface for Alex Gorbatchev's syntaxhighlighter.

Updated to work with CKEditor 4+; some features added.

Supported languages: English, German and French. Feel free to contribute further translations.



First method: simply use the ckbuilder to add syntaxhighlighter to your editor

Second method: download the plugin here, add the syntaxhighlighter-folder to your ckeditor's subfolder "plugins" and add syntaxhighlighter to the extraPlugins-entry in your config.js. If the plugin doesn't appear try adding an item called 'Syntaxhighlight' to your toolbar

Caution: this plugin simply adds some special markup-tags to your input. For the highlighting-process itself you will need to run Alex Gorbatchev's library on your website too.



you can define all default values by yourself, i.e. by setting the correspondent values in your config.js

Configurable values are:

CKEDITOR.config.syntaxhighlight_hideGutter = [true|false];

CKEDITOR.config.syntaxhighlight_hideControls = [true|false];

CKEDITOR.config.syntaxhighlight_collapse = [true|false];

CKEDITOR.config.syntaxhighlight_codeTitle = any title; // default ''

CKEDITOR.config.syntaxhighlight_showColumns = [true|false];

CKEDITOR.config.syntaxhighlight_noWrap = [true|false];

CKEDITOR.config.syntaxhighlight_firstLine = any numeric value; // default 0

CKEDITOR.config.syntaxhighlight_highlight = i.e. [1,3,9]; // default null

CKEDITOR.config.syntaxhighlight_lang = 'applescript', 'actionscript3', 'as3', 'bash', 'shell', 'sh', 'coldfusion', 'cf', 'cpp', 'c', 'c#', 'c-sharp', 'csharp', 'css', 'delphi', 'pascal', 'pas', 'diff', 'patch', 'erl', 'erlang', 'groovy', 'haxe', 'hx', 'java', 'jfx', 'javafx', 'js', 'jscript', 'javascript', 'perl', 'Perl', 'pl', 'php', 'text', 'plain', 'powershell', 'ps', 'posh', 'py', 'python', 'ruby', 'rails', 'ror', 'rb', 'sass', 'scss', 'scala', 'sql', 'tap', 'Tap', 'TAP', 'ts', 'typescript', 'vb', 'vbnet', 'xml', 'xhtml', 'xslt', 'html'; // default null

CKEDITOR.config.syntaxhighlight_code = any source code; // default ''


Alex Gorbatchev's syntaxhighlighter:


Find us at github:


View our demo:



Plugin versions CKEditor versions
4.5 4.4 4.3 4.2 4.1 4.0

Version: 1.7.0 - Download

Show notes

added translation to Chinese-Simplified by @Gnodiah

unknown compatibilitycompatiblecompatiblecompatiblecompatiblecompatible

Version: 1.6.3 - Download

Show notes
Reuploaded due to error on ckeditor.com
unknown compatibilityunknown compatibilitycompatibleincompatibleincompatibleincompatible

Version: 1.5.1 - Download

Show notes

something went wrong during last merge, so we were forced to use a new verion number

unknown compatibilityunknown compatibilityunknown compatibilityunknown compatibilitycompatibleincompatible

Version: 1.0 - Download

Show notes

Initial release

unknown compatibilityunknown compatibilityunknown compatibilityunknown compatibilityunknown compatibilitycompatible
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. Please stop discussing your problems in such an inappropriate place and way. I've opened a thread in the corresponding forum to continue these conversations, which will hopefully contribute to solve your's and other's difficulties. http://ckeditor.com/forums/CKEditor/Syntaxhighlighter-plugin-troubleshooting
  2. If this does not work, you can go to https://code.google.com/p/ckeditor-syntaxhighlight/ download the source code editor which can effect but can not come out.



  3. If I paste XML-Code in the editor the highlighting works correct, but if I would try to  edit the code (page reload), the XML-Tags are invalid. Is that an Editor problem? Also, on the Demo page I can reproduce it to.

    • Hi.

      Unfortunately I'm too busy atm to work on the plugin. I've copied your request to our github-rep, maybe someone can help you there.

      • I fixed it! Solution: Html Encode :D

  4. <html>
    		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    		<script src="ckeditor/ckeditor.js"></script>
    		<script src="ckeditor/adapters/jquery.js"></script>
    		$( document ).ready( function() {
    			$( '#editor1' ).ckeditor();
    		<textarea cols="80" id="editor1" name="editor1" rows="10">


  5. The demo is broken.. fyi

    • Thank you for the hint, Removed the link until we got a new server.

  6. UsrTst's picture


    $query="REPLACE INTO trunk_balance( trunk, duration, date, depid) SELECT DISTINCT SUBSTRING( d.`dstchannel` , 5, 4 ) AS Sip, COALESCE( SUM( d.`billsec` ) , 0 ) AS duration, NOW( ) AS DATE, u.depid AS depid FROM  `cdr` AS d LEFT JOIN sipusers u ON u.name = SUBSTRING( d.`dstchannel` , 5, 4 ) WHERE ( d.`dstchannel` LIKE  '%6012%' OR d.`dstchannel` LIKE  '%6031%' OR d.`dstchannel` LIKE  '%6032%' OR d.`dstchannel` LIKE  '%6033%' OR d.`dstchannel` LIKE  '%6034%' OR d.`dstchannel` LIKE  '%6035%' OR d.`dstchannel` LIKE  '%6036%' OR d.`dstchannel` LIKE  '%6037%' OR d.`dstchannel` LIKE  '%6038%' OR d.`dstchannel` LIKE  '%6039%' OR d.`dstchannel` LIKE  '%6040%' OR d.`dstchannel` LIKE  '%6041%' OR d.`dstchannel` LIKE  '%6046%' ) AND MONTH( DATE( d.`calldate` ) ) = MONTH( DATE( NOW( ) ) ) AND YEAR( DATE(  `calldate` ) ) = YEAR( DATE( NOW( ) ) ) GROUP BY SUBSTRING( d.`dstchannel` , 5, 4 ) ORDER BY COALESCE( SUM( d.`billsec` ) , 0 ) ASC ";
    @mysql_select_db($dbname) or die(strftime('%c')." Unable to select database");
    echo strftime('%c')." ok!";


  7. 1 2 > >>