User Tools

Site Tools


how_to:editor_configuration_syntaxhighlight

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
how_to:editor_configuration_syntaxhighlight [2012/07/16 06:32]
Connie [Edit the template.php of your theme]
how_to:editor_configuration_syntaxhighlight [2015/04/14 04:06] (current)
gsinfo [Edit the template.php of your theme]
Line 9: Line 9:
 Unpack it to a local directory and upload it as directory "//​syntaxhighlighter//"​ to  ///​admin/​template/​js///​ 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===== ===== FileUpload=====
 Unpack it to a local directory and load that directory by FTP into your editor-plugin-directory at: //​admin/​template/​js/​ckeditor/​plugins// ​ 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 ===== ===== 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:​ \\ 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:​ \\
Line 19: Line 26:
  // 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>​ </​code>​
  
 If you have defined extraPlugins already, add '//​syntaxhighlight//'​ to that comma-separated list,for example:\\ If you have defined extraPlugins already, add '//​syntaxhighlight//'​ to that comma-separated list,for example:\\
 <​code>​ <​code>​
-config.extraPlugins = '​fileicon,​video,​syntaxhighlight','templates'​,+config.extraPlugins = '​fileicon,​video,​syntaxhighlight,​templates'​;
 </​code>​ </​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]] 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  ===== ===== 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.+you will have to add some stylesheets and scripts to your template-header,​ otherwise the visual effect of the syntax-highlighter will not work.  Make sure you include a line for each kind of language you intend to display.
 <​code>​ <​code>​
 <!-- SyntaxHighlighter --> <!-- SyntaxHighlighter -->
Line 49: Line 76:
 </​code>​ </​code>​
 ===== How to use ===== ===== 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|}}\\ {{:​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|}}\\ {{:​how_to:​ckeditor_plugin_syntaxhighlight_2.jpg|}}\\
 +
 Now you can enter your code-snippet and after saving, \\ Now you can enter your code-snippet and after saving, \\
 {{:​how_to:​ckeditor_plugin_syntaxhighlight_3.jpg|}}\\ {{:​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:​\\ A screenshot:​\\
 {{:​how_to:​ckeditor_plugin_syntaxhighlight_4.jpg|}} {{:​how_to:​ckeditor_plugin_syntaxhighlight_4.jpg|}}
  
how_to/editor_configuration_syntaxhighlight.1342420368.txt.gz · Last modified: 2013/04/19 14:56 (external edit)