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

Informatiker Board » Themengebiete » Sonstige Fragen » Syntax Highlighting » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen Syntax Highlighting
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
eulerscheZahl eulerscheZahl ist männlich
Foren Gott


Dabei seit: 04.01.2013
Beiträge: 2.858

Syntax Highlighting Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

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

Dieser Beitrag wurde 14 mal editiert, zum letzten Mal von eulerscheZahl: 30.06.2013 22:44.

01.06.2013 09:42 eulerscheZahl ist offline Beiträge von eulerscheZahl suchen Nehmen Sie eulerscheZahl in Ihre Freundesliste auf
Karlito Karlito ist männlich
Kaiser


Dabei seit: 11.04.2011
Beiträge: 1.461

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Coole Sache...
01.06.2013 14:59 Karlito ist offline E-Mail an Karlito senden Beiträge von Karlito suchen Nehmen Sie Karlito in Ihre Freundesliste auf
Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
Informatiker Board » Themengebiete » Sonstige Fragen » Syntax Highlighting