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 [2013/04/19 15:04]
127.0.0.1 external edit
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>​
  
Line 46: Line 53:
  ['​Image','​Flash','​video','​fileicon','​Table','​HorizontalRule','​SpecialChar'​],​  ['​Image','​Flash','​video','​fileicon','​Table','​HorizontalRule','​SpecialChar'​],​
         ​ '/',​         ​ '/',​
- ['​Styles','​Format','​Font','​FontSize'​],​['​ShowBlocks'​],​['​Code'​],​['​Templates'​]+ ['​Styles','​Format','​Font','​FontSize'​],​['​ShowBlocks'​],​['​syntaxhighlight'​],​['​Templates'​]
  "​);</​code>​  "​);</​code>​
  
-you see the option <​code>​['​Code'​]</​code>?​ This places the Syntax-Highlighter-Button in your toolbar.+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 69: 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.1366383880.txt.gz · Last modified: 2014/12/12 15:34 (external edit)