Registrierung Kalender Mitgliederliste Teammitglieder Suche Häufig gestellte Fragen Zur Startseite

Informatiker Board » Themengebiete » Sonstige Fragen » Syntax Highlighting » Antwort erstellen » Hallo Gast [Anmelden|Registrieren]

Antwort erstellen
Benutzername: (du bist nicht eingeloggt!)
Thema:
Nachricht:

HTML ist nicht erlaubt
BBCode ist erlaubt
Smilies sind erlaubt
Bilder sind erlaubt

Smilies: 21 von 33
smileWinkDaumen hoch
verwirrtAugenzwinkerngeschockt
Mit ZungeGottunglücklich
Forum Kloppebösegroßes Grinsen
TanzentraurigProst
TeufelSpamWillkommen
LehrerLOL HammerZunge raus
Hilfe 
aktuellen Tag schließen
alle Tags schließen
fettgedruckter Textkursiver Textunterstrichener Text zentrierter Text Hyperlink einfügenE-Mail-Adresse einfügenBild einfügen Zitat einfügenListe erstellen CODE einfügenPHP CODE farbig hervorheben
Spamschutz:
Text aus Bild eingeben
Spamschutz

Die letzten 2 Beiträge
Karlito

Coole Sache...
eulerscheZahl Syntax Highlighting

Meine Frage:
Ich habe mal ein kleines Script geschrieben, das bei Codefeldern das Feld vergrößert und bestimmte Worte farbig hervorhebt. Es hat noch einige Makel (z.B. werden Kommentare über mehrere Zeilen nicht erkannt, nur ein Code/Beitrag wird in der Größe verändert), aber ich denke es ist besser als vorher.

Meine Ideen:
Hier der Quellcode (kann man mit dem AddOn GreaseMonkey zum Laufen bringen)
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
// ==UserScript==
// @name        Informatikerboard
// @namespace   userscript
// @include     http://www.informatikerboard.de/board/*
// @version     1
// ==/UserScript==

//Größe der Tabelle ändern
var tabellen = document.getElementsByTagName('table')
for(var i = 0; i < tabellen.length; i++)
{
    var stelle = tabellen[i].innerHTML.indexOf('overflow: auto; height: ');
    var innerTabelle = tabellen[i].innerHTML.indexOf('<tbody>');
    if(stelle > 0 && (innerTabelle <= 0 || innerTabelle > stelle))
    {
        stelle+=24;
        var hoehe = parseInt(tabellen[i].innerHTML.substring(stelle, stelle + tabellen[i].innerHTML.substring(stelle).indexOf('px')));
        var zeilenzahl = (hoehe-50) / 14;
        hoehe = 50 + zeilenzahl*17;
        tabellen[i].innerHTML = tabellen[i].innerHTML.substring(0,stelle) + hoehe.toString() + 'px; width: 200%;' +
                                tabellen[i].innerHTML.substring(stelle + tabellen[i].innerHTML.substring(stelle).indexOf('px') + 16);
    }
}

//Textfarbe ändern
//alle Wörter in diesem Array müssen LowerCase sein, sonst werden sie nicht gefunden
var Colors = new Array(
                            new Array(/*red*/   'ff0000', 'break', 'case', 'catch', 'try', 'continue', 'default', 'do', 'else', 'for', 'foreach', 'goto', 'if', 'repeat', 'return', 'switch', 'until', 'while', 'function', 'procedure', 'begin', 'end', 'next', 'each', 'sub', 'loop'),
                            new Array(/*blue*/  '0000ff', 'true', 'false', 'typedef', 'void', 'constexpr', 'mutable', 'volatile', 'alignas', 'extern', 'register', 'out', 'thread_local', 'explicit', 'this', 'virtual', 'friend', 'private', 'protected', 'public', 'alignof', 'auto',
                                                'decltype', 'sizeof', 'typeid', 'typename', 'const_cast', 'dynamic_cast', 'reinterpret_cast', 'static_cast', 'sealed', 'delegate', 'internal','lock', 'stackalloc', 'in', 'as', 'noexcept', 'static_assert', 'throw', 'asm', 
                                                'delete', 'new', 'nullptr', 'null', 'inline', 'operator', 'template', 'export', 'with', 'dim', 'const', 'static', 'abstract', 'event', 'extern', 'finally', 'fixed', 'override', 'params', 'interface', 'checked', 'unchecked',
                                                'readonly', 'unsafe', 'ref', 'def'),
                            new Array(/*green*/ '00ff00', 'class', 'struct', 'union', 'enum', 'using', 'uses', 'import', 'namespace'),
                            new Array(/*dblue*/ '00009f', 'bool', 'boolean', 'char16_t', 'char_32', 'wchar', 'char', 'double', 'float', 'string', 'ulong', 'ushort', 'unsigned', 'signed', 'short', 'decimal', 'sbyte', 'uint', 'byte', 'long', 'var', 'int', 'object', 'exception'),
                            new Array(/*dgreen*/'009f00', '#include', '#define', '#ifndef', '#endif', '#pragma'),
                            new Array(/*purple*/'7f007f', 'main')
                      );

function systaxHighlight(text)
{
    var zeilen = text.split('\n');
    if(zeilen[0] == '<pre>1:') return text; //nur Zeilennummerierung, kein Quellcode
    var anfuehrungszeichen = 0;
    for(var z = 0; z < zeilen.length; z++)
    {
        var vorKommentar  = zeilen[z].substring(0,zeilen[z].indexOf('//'));
        if(zeilen[z].indexOf('//') < 0) vorKommentar = zeilen[z];
        var nachKommentar = zeilen[z].substring(vorKommentar.length);
        redeTeil = vorKommentar.split('"');
        for(var i = 0; i < redeTeil.length; i++)
        {
            if(++anfuehrungszeichen%2 == 1) //nicht in Anführungszeichen
            {
                //Zahlen finden
                //vorher kein Buchstabe bzw. _
                //Ziffer z:
                //z  z.  z.z  .z
                //optional   Ez   E-z   ez   e-z
                //danach kein Buchstabe
                var stelle = -1;
                redeTeil[i] += ' '; //damit auch für Zahl bis Zeilenende ausgewertet werden kann, ob danach ein Buchstabe kommt, Leerzeichen wird wieder gelöscht
                while(true)
                {
                    var stelleAlt = stelle;
                    stelle += redeTeil[i].substring(stelle+1).search(/[0-9]/) + 1;
                    if (stelle == stelleAlt) break;
                    if (stelle > 0 && redeTeil[i].substring(stelle-1, stelle).search(/[A-Za-z0-9_]/) == 0) continue; //nicht der Anfang einer Zahl
                    //ermitteln, wo die Zahl zu Ende ist:
                    var komma = 0; var exponent = 0; var laenge = 1;
                    var istZahl = true;
                    if(stelle > 0 && redeTeil[i].substring(stelle - 1, stelle) == '.') {stelle--; komma++;} //für z.B. '.3' statt '0.3'
                    while(true)
                    {
                        if (stelle + laenge >= redeTeil[i].length) break; //Ende erreicht
                        var zeichen = redeTeil[i].substring(stelle + laenge++, stelle + laenge);
                        if (zeichen == '.') { if(++komma > 1 || exponent > 0) {istZahl = false; break;} continue; }
                        if (zeichen == 'E' ||zeichen == 'e') { if(++exponent > 1) {istZahl = false; break;} continue; }
                        if (zeichen == '-')
                            if (redeTeil[i].substring(stelle + laenge - 2, stelle + laenge - 1) == 'E' || redeTeil[i].substring(stelle + laenge - 2, stelle + laenge - 1) == 'e') continue;
                            else break;
                        if (zeichen.search(/[0-9]/) == 0) continue;
                        if (zeichen.search(/[A-Za-z_]/) == 0) { istZahl = false; break; }
                        if (redeTeil[i].substring(stelle + laenge - 2, stelle + laenge - 1) == 'E' || redeTeil[i].substring(stelle + laenge - 2, stelle + laenge - 1) == 'e') istZahl = false; //e am Ende der Zahl nicht OK
                        break;
                    }
                    laenge--;
                    if (istZahl)
                    {
                        redeTeil[i] = redeTeil[i].substring(0, stelle) + //Teil vor dem Fund nicht ändern
                                      '<b><span style=\'color: #ff3fff;\'>' + //Treffer: Farbe ändern
                                      redeTeil[i].substring(stelle, stelle + laenge) + '</span></b>' + //gefundenes Wort kopieren, um Groß-/Kleinschreibung beizubehalten
                                      redeTeil[i].substring(stelle + laenge); //Teil nach dem Fund
                        stelle += 40;
                    }
                    stelle += laenge + 1;
                }
                redeTeil[i] = redeTeil[i].substring(0, redeTeil[i].length - 1);
                //Schlüsselworte finden
                for(var farbe = 0; farbe < Colors.length; farbe++)
                    for(var wort = 1; wort < Colors[farbe].length; wort++) //mit 1 anfangen, da 0 = Farbwert
                    {
                        var Fund = -1;
                        while(true) //alle Vorkommen der Zeichenfolge finden
                        {
                            var FundAlt = Fund;
                            Fund += redeTeil[i].substring(Fund+1).toLowerCase().search(Colors[farbe][wort]) + 1; //suche CaseInsensitive durch toLowerCase
                            if (Fund == FundAlt) break; //keine weiteren Treffer
                            if (Fund + Colors[farbe][wort].length < redeTeil[i].length && redeTeil[i].substring(Fund + Colors[farbe][wort].length, Fund + Colors[farbe][wort].length + 1).search(/[A-Za-z0-9_]/) == 0) continue; //Buchstabe nach dem Fund
                            if (Fund > 0 && redeTeil[i].substring(Fund-1, Fund).search(/[A-Za-z0-9_]/) == 0) continue; //Buchstabe vor dem Fund
                            redeTeil[i] = redeTeil[i].substring(0, Fund) + //Teil vor dem Fund nicht ändern
                                          '<b><span style=\'color: #' + Colors[farbe][0] + ';\'>' + //Treffer: fett schreiben und Farbe ändern
                                          redeTeil[i].substring(Fund, Fund + Colors[farbe][wort].length) + '</span></b>' + //gefundenes Wort kopieren, um Groß-/Kleinschreibung beizubehalten
                                          redeTeil[i].substring(Fund + Colors[farbe][wort].length); //Teil nach dem Fund
                            Fund += 40; //weil davor etwas angefügt wird
                        }                    
                    }
            }
            else //"wörtliche Rede in orange"
                redeTeil[i] = '<span style=\'color: #ff9f3f;\'>'+ redeTeil[i] +'</span>';
        }
        anfuehrungszeichen--;
        vorKommentar = redeTeil.join('"');
        nachKommentar = '<span style=\'color: #3f9f3f;\'>'+ nachKommentar +'</span>'; //Kommentar an Zeilenende in grün
        zeilen[z] = vorKommentar + nachKommentar;
    }
    return zeilen.join('\n');
}

var quelltext = document.getElementsByClassName('inposttable');
for(var i = 1; i < quelltext.length; i++) //0 ist entweder Zitat oder Zeilennummerierung
{   
    if(quelltext[i].innerHTML.substring(0,5) != '<pre>') continue; //Zitat, kein Quellcode
    quelltext[i].innerHTML = systaxHighlight(quelltext[i].innerHTML);
}

eulerscheZahl hat dieses Bild (verkleinerte Version) angehängt:
SyntaxHighlighting.png