Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
Ask a Question

how to add syntaxhighlighter to ckeditor

+2 votes
4.0k views
in Plugins by
hi...

i try this link but dont work

http://www.inforbiro.com/blog-eng/question2answer-ckeditor-and-syntaxhiglighter-integration/

how i do integrate syntax highlighter to CKEDITOR

please help me (i dont know english as well)

4 Answers

+3 votes
by
selected by
 
Best answer

Try these steps (I've slightly modified the original procedure ) :

1) install sama55's CKEditor4

2) enable it :

Admin ---> Posting --->

Default Editor for Questions = CKEditor4

Default Editor for Answers = CKEditor4

---> Save options

3 ) Download ckeditor-syntaxhighlight from :

https://code.google.com/p/ckeditor-syntaxhighlight/downloads/list

https://github.com/dbrain/ckeditor-syntaxhighlight/tree/ckeditor-4

4) Copy the plugins/syntaxhighlight directory in the ckeditor4 install directory under plugins:

/qa-plugin/ckeditor4/plugins

5) Admin--->Plugins--->CKEditor4 --->Other configuration:

modify 

from :

entities:false

to

entities:false,
extraPlugins:'syntaxhighlight'
 
(do not put any extra spaces or CR)
 
---> Save changes
 

6) Admin--->Plugins--->CKEditor4 --->Toolbar buttons

modify 

from

['RemoveFormat', 'Maximize']

to

['RemoveFormat', 'Maximize', 'Syntaxhighlight']

(do not put any extra spaces or CR)
 
---> Save changes
 
7) Download SyntaxHighlighter from http://alexgorbatchev.com/SyntaxHighlighter/download/
 
8) Create folders css and javascript in <your-q2a-site>/qa-content/
 
9) Copy files from SyntaxHighlighter's styles folder into your css folder
 
10) Copy files from SyntaxHighlighter's scripts folder into your javascript folder
 
11) Go to Admin > Layout and add the following code in the field "Custom HTML in <HEAD> section of every page:
<link rel="stylesheet" href="/qa-content/css/shCore.css" type="text/css">
<link rel="stylesheet" href="/qa-content/css/shThemeDefault.css" type="text/css">
 
<script type="text/javascript" src="/qa-content/javascript/shCore.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shAutoloader.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shLegacy.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushAppleScript.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushAS3.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushBash.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushColdFusion.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushCpp.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushCSharp.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushCss.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushDelphi.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushDiff.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushErlang.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushGroovy.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushJavaFX.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushJava.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushJScript.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushPerl.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushPhp.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushPlain.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushPowerShell.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushPython.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushRuby.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushSass.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushScala.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushSql.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushVb.js"></script>
<script type="text/javascript" src="/qa-content/javascript/shBrushXml.js"></script>
 
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>
---> Save options
 
Use the above code if your q2a website is on a domain (or subdomain) without folders (for instance : www.yourq2awebsite.com).
If your q2a website url is using a "folder" (for instance :  www.yourq2awebsite.com/q2a-folder/  )
you should substitute the above "/qa-content" with "/q2a-folder/qa-content" (that is inside the href and src attributes).
 
 
Now the plugin should work.
 
+1 vote
by
You can use my Express Editor (a version of CKEditor Bundled with ACE Code Editor which gives smooth Code Editing Experience )

Link - http://www.question2answer.org/qa/37420/

For Syntax highlighting you might use one Syntax highlighter plugin -

Link - http://www.question2answer.org/qa/37512/

 

Hope This Helps

Amiya
0 votes
by
tanx for your answer...tank you so much...

but i Like "CKEDITOR"... because with it user can draw table, color text and ...

please help me to integrate syntaxhightlighter to it..

tanx
by
Express Editor is also a version ok CK Editor only . You can do all these things there such as colored text and tables
by
Sir i install you plugin, when i try add code with special bg and theme they not show, i see only regular txt without any theme ?
by
You need syntax highlighters for highlighting the code . Here is one for you - http://www.question2answer.org/qa/37512/
by
yes now work this plugin is amazin, thanks :)
by
Thats cool . Enjoy :)
0 votes
by

tank you so much for your answer...

but button dont appear

 

 

by
Did you enable ckeditor4 (see step 2) or are you still using the default wysiwyg editor ?
Can you try also to enable the moono skin and post an image ?
by
I see now that probably the procedure must be updated because I could have to modify one step. But now I'm by train :-) , I'll update it later
by
yes sir...
i enabled cheditor as default editor...
and checked any skin... but the code button dont apear
by
Ok, I must update the procedure, I've missed a step
by
I think that a cause is simple things (operation mistake, etc).
1st) Try to clear cache of your browser.
2nd) It seems that your theme is RTL. Does the same problem happen even if you change theme to Classic in "admin" > "General"?
3rd) I think this is not related, but I am interested a little ...
http://www.question2answer.org/qa/28860 ?
http://www.w3schools.com/cssref/pr_text_unicode-bidi.asp
by
It's my mistake in reporting the step.
I've used this plugin at step 3 :
https://github.com/dbrain/ckeditor-syntaxhighlight/tree/ckeditor-4

(and not this one : https://code.google.com/p/ckeditor-syntaxhighlight/downloads/list , as in the original article)
I've updated the procedure.

Please :
a) remove the previous  syntaxhighlight directory inside the /qa-plugin/ckeditor4/plugins
b) copy the new plugin inside the /qa-plugin/ckeditor4/plugins
c) clear *completely* your browser cache

It should be ok now
by
very very very excellent...
tankkkk youuuuuuuuuuu   so muuuuuuuuch...
tanx a lot
Snow Theme by Q2A Market
Powered by Question2Answer
...