Differences

This shows you the differences between two versions of the page.

--- how_to:editor_configuration_syntaxhighlight [2011/11/14 17:27]
Connie [How to use]
+++ how_to:editor_configuration_syntaxhighlight [2015/04/14 04:05]
gsinfo [Integration in GetSimple]
@@ Line 9: / Line 9: @@
 Unpack it to a local directory and upload it as directory "//syntaxhighlighter//" to  ///admin/template/js///
-Download the **SyntaxHighLighter-Plugin for CKeditor-Plugin** from [[http://code.google.com/p/ckeditor-syntaxhighlight/downloads/detail?name=ckeditor-syntaxhighlight-1.0.tar.bz2]]
+Download the **SyntaxHighLighter-Plugin for CKeditor-Plugin** from [[http://s1.ckeditor.com/sites/default/files/uploads/syntaxhighlightv1.3-ckeditor-plugin.zip]]
 ===== FileUpload=====
 Unpack it to a local directory and load that directory by FTP into your editor-plugin-directory at: //admin/template/js/ckeditor/plugins//
+Make sure you rename the folder so that it looks like this
+//admin/template/js/ckeditor/plugins/syntaxhighlight//
+This folder should contain the files plugin.js and the subdirectories dialogs, images, and lang
 ===== Integration in GetSimple =====
 You will need a separate [[how_to:editor_configuration_custom_files|CKEditor-configuration file]] if you don't have one already. Add the following 2 lines to the custom config-file: \\
 <code>
-CKEDITOR.editorConfig = function( config ){\\
+CKEDITOR.editorConfig = function( config ){
-	// Define changes to default configuration here. For example:\\
+	// Define changes to default configuration here. For example:
-	// config.removePlugins = 'elementspath,resize' ; // hide element path and resizer\\
+	// config.removePlugins = 'elementspath,resize' ; // hide element path and resizer
-	config.extraPlugins = 'syntaxhighlight',\\
+	config.extraPlugins = 'syntaxhighlight';
-	config.syntaxhighlightLangDefault = 'php'\\
+	config.syntaxhighlightLangDefault = 'php'
-	};
+};
 </code>
 If you have defined extraPlugins already, add '//syntaxhighlight//' to that comma-separated list,for example:\\
 <code>
-config.extraPlugins = 'fileicon,video,syntaxhighlight','templates',
+config.extraPlugins = 'fileicon,video,syntaxhighlight,templates';
 </code>
 If you haven't done already, define the custom-config-file in the [[how_to:editor_configuration_custom_files|GetSimple-Configuration file gsconfig.php]]
+To show the button for the Syntax-Highlighter, you have to define that in the section "Editortoolbar" in gsconfig.php:
+an example: instead the standard-entry
+<code># WYSIWYG toolbars (advanced, basic or [custom config])
+define('GSEDITORTOOL', 'advanced');</code>
+define the buttons:
+<code>
+define('GSEDITORTOOL',"['Source','Cut','Copy','Paste','PasteText','PasteFromWord','Undo','Redo','Find','Replace','SelectAll','RemoveFormat'],
+	'/',
+	['Bold','Italic','Underline','Strike','Subscript','Superscript','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
+	['TextColor','BGColor','Rule','PageBreak'],['NumberedList','BulletedList','Outdent','Indent'],
+	'/',
+	['Blockquote','Smiley'],['Link','Unlink','Anchor'],
+	['Image','Flash','video','fileicon','Table','HorizontalRule','SpecialChar'],
+	       	'/',
+	['Styles','Format','Font','FontSize'],['ShowBlocks'],['syntaxhighlight'],['Templates']
+	");</code>
+you see the option <code>['syntaxhighlight']</code>? This places the Syntax-Highlighter-Button in your toolbar.
+===== Edit the template.php of your theme  =====
+you will have to add some stylesheets and scripts to your template-header, otherwise the visual effect of the syntax-highlighter will not work.
+<code>
+<!-- SyntaxHighlighter -->
+<link type="text/css" rel="stylesheet" href="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/styles/shCore.css"/>
+<link type="text/css" rel="stylesheet" href="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/styles/shThemeDefault.css"/>
+<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shCore.js"></script>
+<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushCss.js"></script>
+<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
+<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
+<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushPlain.js"></script>
+</code>
+In case that the syntaxhighlighting still does not work at your site, you might add one more script-tag to your template.php:
+<code>
+<script type="text/javascript">SyntaxHighlighter.all()</script>
+</code>
 ===== How to use =====
-After all, you will see a new icon in your toolbar:
+After all, you will see a new icon in your toolbar:\\
 {{:how_to:ckeditor_plugin_syntaxhighlight.jpg|}}\\
-Click on that icon, you will see that PHP is the predefined language:
+Click on that icon, you will see that PHP is the predefined language:\\
 {{:how_to:ckeditor_plugin_syntaxhighlight_2.jpg|}}\\
 Now you can enter your code-snippet and after saving, \\
 {{:how_to:ckeditor_plugin_syntaxhighlight_3.jpg|}}\\
-it will be integrated nicely formatted into your page.
+it will be integrated nicely formatted into your page.\\
 A screenshot:\\
 {{:how_to:ckeditor_plugin_syntaxhighlight_4.jpg|}}

GetSimple CMS Wiki

User Tools

Site Tools

Differences

Page Tools