Add SyntaxHighLighter on CKEditor

CKEditor Plugin URL : http://code.google.com/p/ckeditor-syntaxhighlight/

SyntaxHighLighter URL : http://alexgorbatchev.com/SyntaxHighlighter/

* Install

  1. Download "CKEditor Plugin" Code, copy the folder "syntaxhighlight" in /ckeditor/plugins/

  2. Edit "/ckeditor/plugins/syntaxhighlight/dialogs/syntaxhighlight.js" file

      - Choose apply file type

                                      //['Bash (Shell)', 'bash'],
                                      ['C#', 'csharp'],
                                      ['C++', 'cpp'],
                                      ['CSS', 'css'],
                                      //['Delphi', 'delphi'],
                                      //['Diff', 'diff'],
                                      //['Groovy', 'groovy'],
                                      ['Javascript', 'jscript'],
                                      ['Java', 'java'],
                                      //['Java FX', 'javafx'],
                                      ['Perl', 'perl'],
                                      ['PHP', 'php'],
                                      //['Plain (Text)', 'plain'],
                                      ['Python', 'python'],
                                      ['Ruby', 'ruby'],
                                      //['Scala', 'scala'],
                                      ['SQL', 'sql'],
                                      //['VB', 'vb'],
                                      ['XML/XHTML', 'xml']

  3. Edit "/ckeditor/config.js" file

    CKEDITOR.editorConfig = function(config) {
        config.extraPlugins = 'syntaxhighlight';
        config.toolbar_Full.push(['Code']); 

  4. Download "SyntaxHighLighter" code, copy file to your site.

      styles : shCore.css, shThemeDefault.css

      scripts : shCore.js, shBrushPhp.js, shBrushJava.js ( You need JS file - choose apply file type [2.] )

  5. Include HTML file, css and js, and use the CKEditor

  6. Call the SyntaxHighlighter,

  * Change odd number line color, edit "shThemeDefault.css" file

.syntaxhighlighter .line.alt2 {
    background-color: #DFE7FF !important;	/* white */
}