Question2Answer - CKEditor and SyntaxHiglighter Integration

CMS, CODING

Here is the tutorial how to integrate SyntaxHiglighter into CKEditor and Question2Answer script.

- Advertisement -

SyntaxHiglighter plugin installation

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

- Copy the plugins/syntaxhighlight directory into your ckeditor install directory under plugins: /qa-plugin/wysiwyg-editor/plugins

- Open /qa-plugin/wysiwyg-editor/config.js and insert the following lines and save:

config.extraPlugins = 'syntaxhighlight';
config.toolbar_Full.push(['Code']);

- The content will look like:

CKEDITOR.editorConfig = function( config )
{
  // Define changes to default configuration here. For example:
  // config.language = 'fr';
  // config.uiColor = '#AADC6E';
  config.extraPlugins = 'syntaxhighlight';
  config.toolbar_Full.push(['Code']);
   
};

- Open file /qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php and in method "get_field" make changes for displaying the "code" button on the CKEditor; find line:

"['RemoveFormat', 'Maximize']"

and add 'Code':

"['RemoveFormat', 'Maximize', 'Code']"

Now you have syntax highlighter that works integrated into CKEditor.

But wait, the code is not really highlighted, it's just formated. Don't wory, all we need to do is to upload and include css and javascript files.

- Advertisement -
- Advertisement -

SyntaxHiglighter theme enabling

- Download SyntaxHighlighter from http://alexgorbatchev.com/SyntaxHighlighter/download/ in any temp folder on your file system.

- Create folders css and javascript in your theme folder

- Copy files from SyntaxHighlighter's styles folder into your css folder

- Copy files from SyntaxHighlighter's scripts folder into your javascript folder

- Go to Admin > Layout and add the following code in the field "Custom HTML in <HEAD> section of every page:" (replace %THEME% with your theme folder's name):

<link rel="stylesheet" href="/qa-theme/%THEME%/css/shCore.css" type="text/css">
<link rel="stylesheet" href="/qa-theme/%THEME%/css/shThemeDefault.css" type="text/css">
 
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shCore.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shAutoloader.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shLegacy.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAppleScript.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAS3.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushBash.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushColdFusion.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCpp.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCSharp.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCss.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDelphi.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDiff.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushErlang.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushGroovy.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJavaFX.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJava.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJScript.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPerl.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPhp.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPlain.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPowerShell.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPython.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushRuby.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSass.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushScala.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSql.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushVb.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushXml.js"></script>
 
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

Now, your code will be highlighted.

- Advertisement -