SPATIUM Mobile	주소복사

Android (3)

Linux (1)

MacOS (1)

OS (1)

Solaris10 (15)

Windows (1)

Windows Server (2)

Windows XP (3)

	Location	United States
	IP Address	18.216.38.42

2025. 06

Category	Languages, JavaScript
Writer	김태우	Date	2013-03-04 16:58:08	Visit	3926
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,

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

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

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