SPATIUM Desktop
주소복사
About Operating System Languages Tools Favorites Notice Visit TEST  
     ADK (3)
     android (3)
     ASP (5)
     ASP.Net (1)
     C# (5)
     HTML (9)
     JAVA (7)
     JavaScript (9)
     jQuery (5)
     Mobile Web (2)
     node.js (1)
     Oracle (8)
     PHP (7)
     Spring Framework (4)
     SQL (17)
     WPF (5)
   ID  
   Password  
  |  
  Location United States
  IP Address 18.97.9.172
2024. 12
1234567
891011
12
1314
15161718192021
22232425262728
293031
Category  Languages, JavaScript
Writer 김태우 Date 2013-03-04 16:58:08 Visit 3827
Add SyntaxHighLighter on CKEditor

 

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 */
}

 

 

Tags  SyntaxHighLighter, CKEditor, 코드 에디터
  Relation Articles
[Languages-JavaScript] Add SyntaxHighLighter on CKEditor (2013-03-04 16:58:08)
  Your Opinion
Member ID
150 letters
Copyright (C) SPATIUM. All rights reserved.
[SPATIUM]WebMaster Mail