====== Syntaxhervorhebung ======

Was ist **Syntax-Highlighting**, auf deutsch **Syntax-Hervorhebung**?

Die [[http://de.wikipedia.org/wiki/Syntaxhervorhebung|Wikipedia]] definiert dies so:

> Syntaxhervorhebung (engl. syntax highlighting) bezeichnet die Möglichkeit eines Computerprogrammes, bestimmte Wörter und Zeichenkombinationen in einem Text abhängig von ihrer Bedeutung in unterschiedlichen Farben, Schriftarten und -stilen darzustellen. Syntaxhervorhebung wird vor allem in Texteditoren zur Bearbeitung von ausgezeichneten Dokumenten, Programm-Quelltexten und Konfigurationsdateien eingesetzt. Hervorgehoben werden dabei Schlüsselwörter und andere Sprachelemente. 

Sie kennen diese besondere Art der Präsentation schon, denn alle Code-Beispiele auf www.get-simple.de sind derart formatiert.

**CKEditor**, der in **GetSimple** integrierte Edtior, kann mit einem Plugin auf einfache Weise um die Möglichkeit erweitert werden (naja, ganz einfach ist es nicht, aber es lässt sich recht schnell einrichten).

Sie benötigen das Original-Script plus das Plugin für den Editor. Gehen Sie so vor:

  - Laden Sie das **Syntax-Highlighter-Script** von  Axel Gorbatchevs [[http://alexgorbatchev.com/SyntaxHighlighter/|SyntaxHighLighter-Download-Page]] herunter und entpacken Sie es in ein Verzeichnis auf Ihrer lokalen Festplatte.\\ Laden Sie den Inhalt dieses neuen Verzeichnisses in den Ordner  ”syntaxhighlighter” in /admin/template/js/ auf Ihren Server hoch.
  - Laden Sie das **SyntaxHighLighter-Plugin for CKeditor** von [[http://code.google.com/p/ckeditor-syntaxhighlight/downloads/detail?name=ckeditor-syntaxhighlight-1.0.tar.bz2|http://code.google.com/p/ckeditor-syntaxhighlight/downloads/detail?name=ckeditor-syntaxhighlight-1.0.tar.bz2]] herunter, entpacken Sie es ebenfalls in einen Ordner auf Ihrer lokalen Festplatte und laden Sie diesen Ordner dann per FTP auf Ihren Server in den Ordner admin/template/js/ckeditor/plugins
  - Zur Integration in **GetSimple** benötigen Sie eine separate Konfigurationsdatei für den Editor. Falls Sie noch keine eingerichtet haben, erstellen Sie eine und binden Sie so ein, [[http://192.168.1.22/getsimple.de/editor-erweitern/separate-konfigurationsdatei/|wie hier bereits beschrieben.]]\\ \\ Fügen Sie in diese Datei nachstehende Zeilen ein:\\ \\ <code>
CKEDITOR.editorConfig = function( config ){
// Define changes to default configuration here. For example:
// config.removePlugins = 'elementspath,resize' ; // hide element path and resizer
config.extraPlugins = 'syntaxhighlight',
config.syntaxhighlightLangDefault = 'php'
};
</code>Anschließend initalisieren Sie das Editor-Plugin in dieser Datei, ein Beispiel:\\ <code>
config.extraPlugins = 'fileicon,video,syntaxhighlight','templates',
</code>Haben Sie bereits zusätzliche Editor-Plugins eingerichtet, fügen Sie das Syntax-Highlight-Plugin in diese Zeile ein, die einzelnen Plugins voneinander getrennt mit Kommata\\ \\ Falls Sie die separate Konfigurationsdatei neu angelegt haben, müssen Sie diese auch noch in der **GetSimple-Konfigurationsdatei** einbinden, [[separate-konfigurationsdatei/|wie hier beschrieben.]]
  - Vereinbaren Sie in der **GetSimple**-Konfigurationsdatei gsconfig.php die Anzeige des Code-Buttons, z.B. so in der letzten Zeile mit der Option code:\\ <code>
# WYSIWYG toolbars (advanced, basic or [custom config])
define('GSEDITORTOOL',"
['Cut','Copy','Paste','PasteFromWord','-','Undo','Redo','Find','Replace','-','SelectAll'],
['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList',  'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', 'Table', 'TextColor', 'BGColor', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
'/',
['Styles','Format','Font','FontSize','code']
");
</code>
  - Wenn der Editor neu geladen ist, sehen Sie nun ein neues Icon in der Editor-Toolbar.\\ {{ckeditor_plugin_syntaxhighlight.jpg|Neues Icon in der Symbolleiste}}\\ Klicken Sie auf dieses Icon, öffnet sich ein Dialogfenster, in dem Sie den Code eingeben können und die dazugehörende Programmiersprache festlegen können. PHP ist vordefiniert.\\ {{ckeditor_plugin_syntaxhighlight_2.jpg|Syntax-Highlighter}}
  - Jetzt können Sie die Codebeispiele einfügen und den Seiteninhalt speichern.\\ Er wird anschließend nützlich formatiert auf der Seite eingebunden sein.\\ \\ Ein Screenshot:{{ckeditor_plugin_syntaxhighlight_3.jpg|Screenshot}}
  - Das Plugin ist, wie üblich, in englischer Sprache abgefaßt. Damit es mit einer deutschen Sprachdatei arbeitet, sind folgende Schritte notwendig:
    - Öffnen Sie die Datei ''admin\template\js\ckeditor\plugins\syntaxhighlight\plugin.js'' im Editor.\\ Suchen Sie den Eintrag ''lang:["en"]'' in der ersten Zeile und ergänzen Sie diesen um das Kürzel für die deutsche Sprache: ''lang:%%['%%en','de']''\\ <code>
CKEDITOR.plugins.add("syntaxhighlight",{requires:["dialog"],lang:['en','de']
</code>
    - Laden Sie die Datei dann wieder auf Ihren Server hoch.
    - Laden Sie sich das ZIP mit der Sprachdatei herunter.\\ Entpacken Sie das ZIP, Sie erhalten eine Datei ''de.js''\\ Laden Sie diese Datei de.js in das Verzeichnis ''/admin/template/js/ckeditor/plugins/syntaxhighlight/lang/code>'' hoch.\\ Sie werden sehen, daß beim nächsten Start der Plugin-Dialog in deutscher Sprache ausgegeben wird.