Programmcode in CSS

[Skapter]

Hallo liebe Community,

ich habe die Aufgabe für eine Website eine CSS-Datei zu erstellen, welche auf einzelne Signalworte der Programmiersprachen SPS im strukturierten Text und einer Robot Control Language von Bosch Rexroth farblich hervorhebt. Hat jemand eine Idee, wie dies möglichst effizient möglich ist? Die Grundidee dahinter ist, dass man ganz normal das Programm schreibt und die Signalworte wie z.B. if, then, else automatisch farblich gekennzeichnet werden. Ich habe das Wiki gründlich durchsucht und konnte keine Möglichkeit finden, für Hilfe wäre ich dankbar.

Viele Grüße

Skapter

[Felix Riesterer]

Lieber Skapter,

ich habe die Aufgabe

und welche Arbeitsanweisungen hat man Dir an die Hand gegeben, um diese Aufgabe zu lösen? Wie wäre es mit Beispielcode, den Du nun mit CSS verschönern sollst...

Liebe Grüße,

Felix Riesterer.

[Skapter]

Lieber Skapter,

ich habe die Aufgabe

und welche Arbeitsanweisungen hat man Dir an die Hand gegeben, um diese Aufgabe zu lösen? Wie wäre es mit Beispielcode, den Du nun mit CSS verschönern sollst...

Liebe Grüße,

Felix Riesterer.

Hallo Felix,

ich gebe hier mal jeweils ein Beispiel für einen SPS und einen RCL Code:

SPS:

PROGRAM PlcProg VAR

SpindelSensor1 AT %IX0.0 : BOOL;				(*Input Spindel Sensor 1 meldet HSK geloest rosa DI8 links 1.1*)
SpindelSensor2 AT %IX0.1 : BOOL;				(*Input Spindel Sensor 2 meldet HSK gespannt rot DI8 links 2.1*)
SpindelSensor3 AT %IX0.2 : BOOL;				(*Input Spindel Sensor 3 meldet gespannt ohne HSK weiss DI8 links 1.4*)	

END_VAR

RCL:

Programm TestScha

INPUT BINARY:     1=schalt0,     2=schalt1

OUTPUT BINARY:     3=led0

BEGIN     IF schalt0=1     THEN led0=1     ELSE led0=0 PROGRAM_END

Wie gesagt, Signalworte sollen farblich kenntlich gemacht werden mittels CSS. Bei der RCL sind das alle großgeschriebenen Wörter, bei der SPS großgeschriebene Wörter und Adressen. Der Sinn dahinter ist, dass ich an einem Projekt in einem Labor beteiligt bin und es später noch andere Projekte geben wird, welche die Sprachen dokumentieren müssen. Da Dokus im Labor typischerweise in HTML stattfinden meinte mein Betreuer eine selbstkonfigurierte CSS-Datei, welche die Signalwörter automatisch einfärbt wäre unglaublich nützlich und ich solle die doch mal erstellen. Mehr Anweisungen habe ich leider nicht mit auf den Weg bekommen.

Viele Grüße

Skapter

[Jörg Reinholz]

Der Sinn dahinter ist, dass ich an einem Projekt in einem Labor beteiligt bin und es später noch andere Projekte geben wird, welche die Sprachen dokumentieren müssen. Da Dokus im Labor typischerweise in HTML stattfinden meinte mein Betreuer eine selbstkonfigurierte CSS-Datei, welche die Signalwörter automatisch einfärbt wäre unglaublich nützlich und ich solle die doch mal erstellen.

Nur mit CSS geht IMHO nicht. Aber HTML ist hyper TEXT. Text kann man verarbeiten.

Mehr Anweisungen habe ich leider nicht mit auf den Weg bekommen.

Tja. Dann sollte der Hinweis der erfolgen, dass die Aufgabe zwar relativ einfach lösbar ist, aber nicht nur mit der Vorgabe "selbstkonfigurierte CSS-Datei".

br /> Jörg Reinholz

[Jörg Reinholz]

Also, so weit ich das jetzt weiß ist das Selectieren einzelner "Wörter" mit purem CSS "etwas schwierig".

Man nehme sowas:

<pre>if ( $foo == $bar ) {</pre>

Stände da jedoch:

<pre><span>if</span> <span>(</span><span>$foo</span> <span>==</span> <span>$bar</span> <span>)</span> <span>{</span>

sollte zumindest mit jquery gehen:

$(document).ready(function(){     $("span:contains(if)").addClass("program_keyword");     $("span:contains({)").addClass("program_struct");     $("span:contains(})").addClass("program_struct");     $("span:contains(==)").addClass("program_struct"); });

Die Klassen bekommen im CSS das Outfit verpasst.

Dazu folgendes:

1.) Freilich würde ich das eher serverseitig erledigen und das Ergebnis sorgfältig cachen wollen.

2.) Wenn Du was fertiges willst, dann nimm Google.

[Tabellenkalk]

Hallo,

2.) [Google-Link]

Das richtige Stichwort, bzw. Suchwort wäre "Syntax-Highlighting".

Gruß Kalk

[Gunnar Bittersmann]

@@Skapter:

ich habe die Aufgabe für eine Website eine CSS-Datei zu erstellen, welche auf einzelne Signalworte der Programmiersprachen SPS im strukturierten Text und einer Robot Control Language von Bosch Rexroth farblich hervorhebt. Hat jemand eine Idee, wie dies möglichst effizient möglich ist?

Einen Syntaxhighlighter verwenden, bspw. Prism, und (sofern das noch keiner getan hat) Regeln für die jeweilige Sprache angeben.

LLAP