This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
how_to:editor_configuration_syntaxhighlight [2011/11/29 10:41] Connie [Integration in GetSimple] |
how_to:editor_configuration_syntaxhighlight [2015/04/14 04:06] 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: \\ | ||
<code> | <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> | </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 ===== | ||
+ | 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> | ||
+ | <!-- 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 ===== | ===== 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|}} | ||