Henryk Plötz: Syntax-Highlighting zum Klicken

Moin,

Tja, also das Syntax-Highlighting im Forum ist ziemlich schick, nur ohne ein passendes Stylesheet auch ziemlich nutzlos. Nun hat ja nicht jeder Lust so um die zwei Dutzend CSS-Regeln runterzuschreiben (also ich zumindest nicht), daher habe ich da mal was gebastelt. Als Nebeneffekt zeigt es nochmal die beeindruckende Stärke des DOM.

http://www.ploetzli.ch/forum/highlight/ zeigt mehr oder weniger (mehr weniger) sinnvolle Codebeispiele für allerlei Sprachen und ein Kontrollfeld um ein passendes Stylesheet zusammenzuklicken. Pferdefuß: Das Skript benötigt DOM Level 2 Events und DOM Level 2 Style, und soweit ich das sehe kann das nur die Gecko-Engine.

Anleitung: Mit der Maus über den Codebeispielen hovern bringt ganz oben eine Übersicht darüber welche Klassen an der Stelle verwendet wurden und wie sie verschachtelt sind. Klicken lädt die innerste Klasse zur Bearbeitung (wird in der zweiten Zeile fett dargestellt). Ab da kann man dann auch auf weiter aussen liegende Klassen in der zweiten Zeile klicken um diese zu bearbeiten.

Es gibt drei Ansichten: Bei 'Texteigenschaften' findet man die wichtigsten Eigenschaften als Textfelder, sowie mit den von der CSS-Spec vordefinierten Schlüsselworten (naja, bei den Farben nicht). Änderungen in den Textfeldern werden onchange übernommen, ggbf. also nochmal Enter drücken. Bei 'CSS-Deklarationen' findet man alle Deklarationen die für die aktuell bearbeitete Klasse angegeben wurden und kann sie bearbeiten. Änderungen werden onchange oder onkeyup übernommen, d.h. was man dort tippt ist _live_ (das ist mal richtig cool).

Diese beiden Ansichten bearbeiten nur Klassen, bzw. CSS-Selektoren der Form "code .klassenname". Es gibt noch eine dritte Ansicht 'CSS-Regeln' die dann schließlich das gesamte generierte Stylesheet enthält, ggbf. auch mit anderen Selektoren. Änderungen dort werden auch onkeyup übernommen, da ich bei meinen Tests keine deutliche Verlangsamung festgestellt hatte. (Im Nachhinein sieht man dass bei großen Stylesheets und dem großen Beispielbereich der Browser doch in's Schwitzen kommt.) Diese Ansicht kann man dann auch benutzen, wenn man das Stylesheet aus der Anwendung raus und in seinen Editor kriegen will.

Ach ja: Aller CSS-Code kommt live aus den Innereien des Browsers. Der nimmt diverse Normalisierungen vor, so dass die Eingaben nicht genau den Ausgaben entsprechen müssen. Insbesondere gehen Einrückungen etc. verloren. Schade eigentlich, aber nicht so schlimm.

Ursprünglich hatte ich noch vor, anzubieten dass man eigene Stylesheets (etwa das bisherige Benutzerstylesheet) reinladen können sollte, bin dann aber drauf gestoßen, dass das von den Cross-Site-Skripting-Sicherheitsmaßen verhindert wird. Das muss jetzt also so gehen. Ich habe daher das Standard-Forums-CSS fest als CSS eingetragen, welches von der Bearbeitung auch nicht betroffen wird. Wer trotzdem gerne sein Stylesheet reinhaben will muss sich das Skript (man braucht neben der HTML-Datei noch die highlight.js und die highlight.css) runterladen und den Code der HTML-Datei entsprechend anpassen.

--
Henryk Plötz
Grüße aus Berlin
~~~~~~~~ Un-CDs, nein danke! http://www.heise.de/ct/cd-register/ ~~~~~~~~
~~ Help Microsoft fight software piracy: Give Linux to a friend today! ~~
  1. 你好 Henryk,

    sehr cooles Tool.

    再见,
    克里斯蒂安

    --
    1 + 1 = 3 für gosse Werte von 1.
  2. Ich hab mir mal was zusammengeklickt, aber wann kommt das dann zu Anwendung?

    Struppi.

    1. 你好 Struppi,

      Ich hab mir mal was zusammengeklickt, aber wann kommt das dann zu
      Anwendung?

      Du musst die erzeugten Regeln in ein (ergaenzendes) User-Stylesheet oder
      in die Box fuer Inline-CSS packen. Dann wird der Code hier im Forum, sofern
      du Syntax-Highlighting aktiviert hast und er in einen [code]-Block gepackt
      wurde, in den entsprechenden Farben hochgelichtet.

      再见,
      克里斯蒂安

      --
      Der Verstand ist der Hausherr, der Koerper sein Gast.
      1. Hallo Christian.

        Dann wird der Code hier im Forum, sofern
        du Syntax-Highlighting aktiviert hast und er in einen [code]-Block gepackt
        wurde, in den entsprechenden Farben hochgelichtet.

        Bei der Gelegenheit könnte man doch Besucher und Mitglieder auf die [code] Syntax aufmerksam machen, oder?

        Gruß, Ashura

        --
        Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
        Try it: Become an Opera Lover in 30 days
      2. ...er in einen [code]-Block gepackt
        wurde, in den entsprechenden Farben hochgelichtet.

        Das war genau meine Frage.
        Ich les nicht alle Ankündigungen und hab nirgends einen Hinweis gefunden.

        Das Stylesheet ist bereits als Inline Code eingebunden gewesen und das Syntaxhighlighting hatte ich auch schon länger an, aber mir war nicht klar, wann es seine Wirkung entfaltet.

        Struppi.

      3. Hallo Christian,

        hochgelichtet.

        das ist doch mal'n Wort ;-)

        Gruß, Andreas

        --
        SELFFORUM - hier werden Sie geholfen,
        auch in Fragen zu richtiges Deutsch
    2. Moin,

      Ich hab mir mal was zusammengeklickt, aber wann kommt das dann zu Anwendung?

      Oh, ja, das hätte ich dazu sagen sollen: Wenn man sich ein Stylesheet gebaut hat muss man zur CSS-Regeln-Ansicht wechseln, sich dann den ganzen Inhalt des Textfeldes rauskopieren, in den Editor seiner Wahl einfügen und als Stylesheet auf einem Webspace seiner Wahl speichern. Dann in den Benutzereinstellungen des Forums das Stylesheet als Benutzerstylesheet einstellen. (Wenn man schon ein Benutzerstylesheet hat dann weiss man ja wie's geht.)

      Oh, ich sehe grade dass das Forum in den Benutzereinstellungen auch die Möglichkeit für Inline-CSS hat. Mal sehen ...

      (Jetzt muss ich erstmal weg)

      --
      Henryk Plötz
      Grüße aus Berlin
      ~~~~~~~~ Un-CDs, nein danke! http://www.heise.de/ct/cd-register/ ~~~~~~~~
      ~~ Help Microsoft fight software piracy: Give Linux to a friend today! ~~