Frontend Filter Anpassung für FCKeditor SyntaxHighlighter Plugin

[Stefek]

Hallo.

Eigentlich dürfte es eine "Spezialität" für Thomas aka Thorn sein.

In der Vergangenheit wurde von ihm ein Frontend Filter dieser Art gemacht; nachzulesen hier:
https://forum.WebsiteBaker.org/index.php/topic,12243.msg74274.html#msg74274

User Luishahne hat auf seiner "Spielwiese" ein FCK Plugin vorgestellt, das eigentlich mit dem selben Skript zusammenarbeitet, aber die Parameter anders eingestellt sind.

http://www.wdsnet.de/wb/pages/downloads.php  /  Plugin FCKeditor SyntaxHighlighter

Wenn man das Plugin einbindet und alles schön "verdrahtet" (die Scripte einbindet), funktioniert das ganze.

Es wäre aber mit einem Filter natürlich nicht nur "bequemer" zu installieren, sondern auch effizienter.

Daher meine Frage:
Wäre es möglich, Thomas, dass Du es Dir anschaust und den Filter an das Plugin anpasst?

Mit dem Plugin kann man zusätzliche Parameter einstellen, z.B. ob die Zeilen Nummern mit ausgegeben werden sollen oder nicht, oder von welcher Zeile der Code anfängt usw.
Also sehr benutzerfreundlich.

Ich würde verstehen, wenn Du im Moment keine Lust dazu hast - zumal weil im Moment viel Diskussion gibt, wie die jQ Sachen zukünftig eingebunden werden...

Und ich glaube auch nicht, dass ein so angepasster Filter momentan sehr gefragt ist.

Trotzdem wollte ich mal gefragt haben.

Viele Grüße,
Stefek

[thorn]

Hallo,

Das Plugin erzeugt einen <pre>-Abschnitt, mit den richtigen title und class Tags.
Damit das bunt wird, muss man dann von Hand den Syntaxhighlighter-Code einbinden (z.B. ins Template).

Der Frontendfilter dagegen, fügt automatisch den Syntaxhighlighter-Code ein, wenn die notwendigen title und class Tags vorhanden sind. Diese muss man dann von Hand im Editor einfügen.

Das heißt der Frontendfilter kann (und will auch nicht) dieses Plugin ersetzten.
Er kann ihn aber auf einfache weise ergänzen: Mit Hilfe des Plugins hat man eine einfache Möglichkeit Quelltext einzugeben, und der Frontendfilter lädt immer genau den gerade benötigten Syntaxhighlighter-Code ("Brushes"), ohne das man am Template herumfummeln muß.

Zumindest in der Theorie.  
In der Praxis zeigt sich, das das Plugin ein anderes (neueres?) System zur Einbindung benutzt (title statt name, class="brush: php;" statt class="php").
Deshalb funktioniert das im Moment nicht. Da müßte erst der Filter aktualisiert werden.


thorn.

PS: ist class="brush: php;" wirklich konform?  
EDIT: Einfacher wäre das Plugin anzupassen. Und dann auch gleich richtige class-Tags zu benutzen, die man auch mit CSS ansprechen kann.
Edit2: Mist, geht auch nicht. Die Optionen werden auch in class übertragen:
class="brush: php;gutter: false; toolbar: false; collapse: true; first-line: 22; ruler: true;"

[Stefek]

EDIT: Einfacher wäre das Plugin anzupassen. Und dann auch gleich richtige class-Tags zu benutzen, die man auch mit CSS ansprechen kann.
Edit2: Mist, geht auch nicht. Die Optionen werden auch in class übertragen:
class="brush: php;gutter: false; toolbar: false; collapse: true; first-line: 22; ruler: true;"

Ich glaube, das dies nicht so relevant ist, weil "er" (das Script) die Class anschließend überschreibt/konvertiert...

irgendwie so:
class="syntaxhighlighter"

Oder habe ich falsch hingeschaut?

Je nach Brush wird er die Codeschnipsel eben etwas anders formatieren.

Gruß,
Stefek

[thorn]

Ist doch Mist! Bei deaktiviertem Javascript könnte man den <pre>-Abschnitt wenigsten noch mit ein bisschen CSS formatieren. Aber so? ...

Und das Problem mit dem Frontendfilter in dem Zusammenhang ist, das er diese "kaputten" class-Tags nicht auswerten kann. EDIT: Sieh an, geht doch 

Workaround: einfache alle (12 Stück) Brushes laden, egal welcher gebraucht wird. Naja ... würde aber erstmal laufen.
Werd ich mich gleich mal dransetzen.

thorn.

[Stefek]

Hallo Thomas.

So wichtig ist das ganze wirklich nicht.
Wenn es nicht auf Anhieb funktioniert, spar Dir die Zeit.

Gruß,
Stefek

[Stefek]

Es handelt sich BTW um dieses Script hier:
http://alexgorbatchev.com/wiki/SyntaxHighlighter

Gruß,
Stefek

[thorn]

Hallo,

mit dem angehängten Filter Version 1.0.1 sollte es nun funktionieren.
Bitte mal testen.

Alte Version des Filters ("PrettyPrint: SyntaxHighlighter") muß vorher deinstalliert werden! Ich hab mir das upgrade-script hier mal gespart.

Beachten: Diese Version ist nicht kompatible mit der Version 1.0.0.
<pre>-Abschnitte, die nach dem alten Format erzeugt wurden (name="syntaxHighlighter" class="php"), werden nun nicht mehr bunt. Bitte umstellen (title="code" class="brush: php;")

Man kann die <pre>-Abschnitte sowohl von Hand erstellen,
als auch mit dem vorgenannten Plugin -- das wirklich toll ist!    (nur TAB geht leider in dem Fenster nicht)

Und es werden immer nur die Brushes geladen, die wirklich gebraucht werden.

thorn.

[gelöscht durch Administrator]

[Stefek]

Hallo Thomas!!

Vielen Dank.
Läuft wie geschmiert.

Man kann die <pre>-Abschnitte sowohl von Hand erstellen,
als auch mit dem vorgenannten Plugin -- das wirklich toll ist!   

Ja. Das Plug-In ist wirklich toll.
Zwar ist es schade, dass man den Tabulator nicht verwenden kann, während man den Code in das Eingabefenster eingibt, aber meistens kopiert man es eh aus einem anderen Editor heraus - also ein verträgliches Übel.

Was wirklich gut ist: Wenn man auf das Icon mit der Lupe klickt (neben dem Icon zur Codeeingabe), sieht man im Editor die Abschnitte mit davorgestelltem Elementabschnitt (also: pre, p, div, blockquote etc.). Das macht es sehr einfach, mit dem FCK Editor zu arbeiten.
Ein weiterer Vorteil:
Nach der Eingabe des Codes kann man die Ausgabeeinstellunge n nochmal korrigieren, indem man mit dem Cursor darein geht und anschließend erneut das "Code Einfügen" Symbol einfügt.

Starkes Teil.

WER ein paar Screenshots sehen möchte, sage bescheid. Ich kann auch eine kleine Installationsanleit ung schreiben, wenn gewünscht.

Gruß,
Christian (Stefek)

[Stefek]

Hallo.

Ich konnte die Finger nicht von lassen und habe mir nochmal ein Upgrade von dem FCK Editor Plugin gezogen:
http://www.psykoptic.com/blog/post/2008/12/01/Code-Syntax-Highlight-Plugin-for-FCKeditor.aspx

Das ist eine etwas andere Version, als die Luishahne (siehe Eingangspost) auf seiner Seite bereitgestellt hat.
Unterschied: Man kann bestimmte Zeilen im Code hervorheben. (Siehe Screenshots.)

Dietmar: Vielleicht magst Du Dein Plugin dahingehend updaten?
Das mit der Hervorhebungausgewä hlter Lines kann bei Tutorials sehr nützlich sein.


Viel Spaß damit.
Wenn jemand hierzu fragen hat, keine Zurückhaltung.

Stefek

[gelöscht durch Administrator]

[doc]

Hi,

der Grossteil der Leute dürfte "Quellcode" in einer Seite/Abschnitt es Typs Code bearbeiten. In WB 2.8 hat das Codemodul die Syntaxhervorhebung von EditArea (gleiche wie im Addon File Editor) geerbt.

Sollte ich mal einen Codefetzen im WYSIWYG Editor haben (z.B. zur Erklärung wie auf den Hilfeseiten), verwende ich einfach einen Block (code, pre etc.) und lasse das ganze dann bequem über z.B. Google Syntaxhighlighter hervorheben.

Gruss Christian

[Stefek]

Das freut mich, dass Du es Dir einfach machst - ist oft ja auch vorteilhaft.
Manchmal möchte man aber zweckbedingt die Sache etwas differenzierter angehen.

Für diese Fälle ist es gedacht.

Gruß,
Stefek

[Luisehahne]

Hallo Stefek,

Danke für deine Info der neueren Version, Bei mir fehlt noch der Eintrag welche Zeilen hervorgehoben werden sollen.

Gruss
Dietmar

[mr-fan]

kurze frage,

kann auf http://www.wdsnet.de/wb/pages/downloads.php

die passenden teile für das highlight plugin nicht finden....würde das sehr gerne mit dem Filter von thorn verwenden!

Frage an Thomas: wenn ich die corefiles wie in 2.7 anpasse kann ich deinen frontendfilter dann auch verwenden - schon probiert? ich hatte jetz noch keine zeit dazu!

ich brauch halt ein gutes Frontend Highlight?ing... für Anleitungen und Dokuseiten da sind die optionen die Stefek erwähnte schon sehr cool (das mit der Zeilenhervorhebung usw.)

mfg martin

[Luisehahne]

hier der Link für die Googlesuche, damit du auch die neueste Version hast

http://www.google.com/search?q=dp.SyntaxHighlighter&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:de:official&client=firefox-a

Ich bin jetzt dabei meine neue Seite zu füllen. Dann gibt es auch eine Erklärung, wie man den einbundet. Schau dir auch mal den Source auf der wdsnet.de an, zwecks Einbindung.

Dietmar

[Stefek]

Hallo Martin,
auf einer von mir aufgesetzten Seiten funktioniert das ganze ganz gut.
Inkl. FCK Editor, und wird mit dem Frontendfilter betrieben (eigentlich schaut der nur, ob er die Scripte nachladen soll).

Ich kann mir vorstellen, dass in dem Falle, dass Du eh jQ auf der Seite hast, man "den Rest" auch einfach so ins Template festschreiben kann (also Links zu den restlichen JS-Files, die von dem Modul fürs Frontend benötigt werden).

Genaueres müßte schon Thomas sagen, was der Filter tut.

Ich bin jedenfalls zufrieden.

Es gibt aber noch viele andere gute Highliter auf jQ Basis, allesamt für verschiedene Zwecke geeignet.

In den meisten Fällen reicht aber, wie Doc oben schon erwähnt hat, auch einfach der prettyprinter. Da fehlen jedoch hervorhebungen etc. falls man sie mit verwenden möchte.

Gruß,
Stefek

[mr-fan]

Ich bin jetzt dabei meine neue Seite zu füllen. Dann gibt es auch eine Erklärung, wie man den einbundet

seite "neu ordnen" wär auch cool... ...wie gesagt die ERKLÄRUNG hab ich gefunden nur das PLUGIN nicht das ist nicht in downloads und ich hab sonst noch überall auf der seite geschaut...auf AMASP ist ja auch nichts dazu...

egal ich glaub da eh schon JQ auf meinen seiten laufen wird glaub ich der vorschlag von christian am besten ich such mir mal einen Jquery highlighter...

http://startbigthinksmall.wordpress.com/2009/05/28/beautyofcode-jquery-plugin-for-syntax-highlighter-2-0-by-alex-gorbatchev/
GEFUNDEN.... benutzt den syntaxhighlighter 2.0 ebenfalls nur einfach .js laden und die richtige

Code: [Select]

pre class angeben fertig - produziert im gegensatz zum original sogar validen code da die classen nicht so verkorkst anzugeben sind sondern das ganze im Jquery script gesteuert wird welchen brush verwenden usw....

werd mich mal damit beschäftigen - glaub das sieht gut aus!

mfg martin

[mr-fan]

eine kurze frage hätt ich noch an dietmar:

was ist mit "scriptbereich" gemeint - das wäre hilfreich....

http://www.wdsnet.de/wb/pages/hilfehelp/einleitung/code-highlighting.php

hab jetz das neuste FCK plugin gezogen und eingerichtet jetz fehlt mir noch die einbindung....im template schon klar aber scriptbereich == head und dann noch <script> </script> drum rum oder vor <7body> oder wie oder was...bin verwirrt

 

wenn ich alles beisammen hab poste ich die lösung hier mal - soweit sieht alles ganz gut aus...

mfg martin

[Luisehahne]

ich werde auf der neuen subdomain, alles nochmal genau erklären. Bracuhe da aber selbstverständliche rweise noch ein bischen

Dietmar

[mr-fan]

dietmar .......das ist keine hilfe ....ich muss nur wissen WO ich den code hinpacke

das kann man doch hier kurz schreiben - oder nicht?

auf deiner hilfe steht in den script teil.....

1. template oder fck-irgendwas

2. was muss drumherum - da fehlt doch noch was???

Code: [Select]

   <script type="text/javascript">
    /*-- Only for coder --*/
      if($("[class^=brush]").length) {
          $.insert("<?php echo WB_URL ?>/syntax/styles/shCore.css");
          $.insert("<?php echo WB_URL ?>/syntax/styles/shThemeDefault.css");
          $.insert("<?php echo WB_URL ?>/syntax/scripts/shCore.all.js");
              $(function(){
                SyntaxHighlighter.config.stripBrs = false;
                SyntaxHighlighter.config.bloggerMode = true;
                SyntaxHighlighter.config.clipboardSwf = "<?php echo WB_URL ?>/syntax/scripts/clipboard.swf";
                SyntaxHighlighter.defaults['gutter'] = true;
                SyntaxHighlighter.defaults['smart-tabs'] = true;
                SyntaxHighlighter.defaults['wrap-lines'] = true;
                SyntaxHighlighter.defaults['html-script'] = true;
                SyntaxHighlighter.all();
             });
           };
    /*-- Only for coder --*/
    </script>
das war jetz mal mein versuch im header!!!

einfach nur kurz wohin damit - dann funktioniert es eh schon!!!

mfg martin

[Luisehahne]

Ich setze javascript im Footer, hast du dir mal den Source auf wdsnet angeschaut. Da isses ja noch mit 2.7 er umgesetzt, jquery und insert muss auf jedenfall davor, da dass Highlightning erst aufgerufen wird, wenn es auch gebraucht wird.

Deswegen will ich auf der WebsiteBaker.wdsnet .de alles neu aufbauen, und hoffe, dass es mit gelingt eine vernünftige Hilfe zu bieten.

Dietmar

[mr-fan]

ok das bringt mich schon weiter - die blanke demoseite auf der sourcewebsite ist auch nicht schlecht!

also ein frage hab ich jetz noch.... ich weis ich nerve....sry

Code: [Select]

shCore.all.js
ist das die komprimierte datei mit allen brushes??? die ist im aktuellen 2.0 nicht mit dabei sondern nur

Code: [Select]

shCore.js und dann halt die brushes....?

hast du die komprimiert in ein .js oder hats das im damaligen 1.5er higlighter gegeben?

wenn du das zusammengestaucht hast - wie macht mann das am besten...?

danke für deine hilfe - ich brauch nur ein paar "hinweise" dann find ich schon nen schritt weiter...

mfg martin

[Luisehahne]

Wieso blanke Demoseite? Ic hmeinte z.B. hier

http://www.wdsnet.de/wb/pages/hilfehelp/einleitung/allgemein.php

da wirds ganz intensiv genutzt.

du brauchst das paket dp.SyntaxHighlighte r, da ist alles drin

Dietmar

[mr-fan]

Wieso blanke Demoseite? Ic hmeinte z.B. hier

http://www.wdsnet.de/wb/pages/hilfehelp/einleitung/allgemein.php

da wirds ganz intensiv genutzt.

dort ist soviel drin was ich gar nicht brauch - und was man nicht braucht macht die seite lahm/er...

aber jetz weis ich wenigstens das ich mit dem script richtig dran war - das funktioniert nur nicht mit der neuen version 2.0...

du brauchst das paket dp.SyntaxHighlighte r, da ist alles drin

eben nicht - dort gibt es keine

Code: [Select]

shCore.all.js!

wie ich schon geschrieben hab....manchmal glaub ich du liest nur die hälfte....

EGAL - du hast genug zu tun mit deinem relaunch...
und ich hab mir selber geholfen mit dem "standart-einbau" so wie er vorgesehen ist hier die zusammenfassung für andere die daran interessiert sind:

1. Schritt herunterladen von Syntaxhighlighter 2 hier: http://alexgorbatchev.com/wiki/SyntaxHighlighter

2. Herunterladen des FCK Plugins für den Syntaxhighlighter 2 hier: http://www.psykoptic.com/blog/post/2008/12/01/Code-Syntax-Highlight-Plugin-for-FCKeditor.aspx

3. installieren des Plugins wie beschrieben nur das

Code: [Select]

FCKConfig.Plugins.Add( 'syntaxhighlight2', 'en') ;und

Code: [Select]

FCKConfig.SyntaxHighlight2LangDefault = 'csharp' ;
wie auf der seite von LuiseHahne beschrieben in die wb_fck_config.js kommen
http://www.wdsnet.de/wb/pages/hilfehelp/einleitung/code-highlighting.php

4. die Unterordner vom Syntaxhighlighter 2 in ein Verzeichnis deiner Wahl kopieren in meinem Beispiel /syntax/

5. einbinden der scripts wahlweise im head oder vor </body>

Einfaches Beispiel der Einbindung:

Code: [Select]

   
<!--Syntaxhighlighter-->
    <link rel="stylesheet" type="text/css" href="<?php echo WB_URL ?>/syntax/styles/shCore.css");/>
    <link rel="stylesheet" type="text/css" href="<?php echo WB_URL ?>/syntax/styles/shThemeDefault.css");/>
        <script src="<?php echo WB_URL ?>/syntax/scripts/shCore.js" type="text/javascript"></script>
        <script src="<?php echo WB_URL ?>/syntax/scripts/shBrushCss.js" type="text/javascript"></script>
        <script src="<?php echo WB_URL ?>/syntax/scripts/shBrushJScript.js" type="text/javascript"></script>
        <script src="<?php echo WB_URL ?>/syntax/scripts/shBrushPhp.js" type="text/javascript"></script>
        <script src="<?php echo WB_URL ?>/syntax/scripts/shBrushPlain.js" type="text/javascript"></script>
        <script typ="text/javascript">
                SyntaxHighlighter.config.clipboardSwf = "<?php echo WB_URL ?>/syntax/scripts/clipboard.swf";
                SyntaxHighlighter.all();
</script>

weiter parameter auf der seite des entwicklers (settings, themes, usw.)
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration

per Fckplugin werden automatisch die richtigen <pre> classen gesetz die dann hervorgehoben werden

runde sache das teill und funzt einwandfrei mit 2.8 RC2 trunk 1102

mfg martin (so schnelle geht das...)

das Jquery Teil ist auch nicht ohne - nur die Einbindung per FCK Plugin ist wesentlich komfortabler...

[Luisehahne]

Dann war ja die Hilfestellung auf meiner wdsnet verständlich. Gut zu wissen, ich tue mich da manchmal sehr schwer im erklären. Ich programmiere dir alles, aber der Rest da haperts.

Dietmar