Online code highlighter
Ik probeer een code highlighter te maken in javascript. Net zoals Notepad++
Het is de bedoeling dat de gebruiker de code typt en dat ondertussen bijvoorbeeld alles tussen aanhalingstekens een bepaalde kleur krijgt, dat de woorden public, private en protected een aparte kleur krijgen. Etc.
Als de code moet worden opgeslagen, moet het gewone raw text zijn. (Dus niet meer met HTML opmaak erin die de tekst kleurde)
Mijn idee hoe ik dit ga maken is een soort container div, met daarin 2 lagen die over elkaar liggen.
De onderste laag is gewoon een div, de bovenste laag is een textarea.
Als je dus in de editor klikt om erin te typen, heb je dus eigenlijk de cursor in de textarea.
Als je dan in de textarea typt, moet het javascript deze tekst bij elk nieuw teken overnemen en in de onderliggende div zetten. In deze onderste laag (div) kan dan alles met de code worden gedaan (zoals html erin zetten om de code te highlighten), terwijl in de textarea gewoon de rauwe tekst staat, waar niks mee gebeurt.
Natuurlijk zie je dan dus 2 teksten over elkaar staan, om dit op te lossen krijgt de textarea een transparante tekstkleur, dus de textarea is doorzichtig.
En de lettergrootte van de textarea en de onderliggende div moeten even groot zijn, zodat de cursor op de goede plek staat.
Maar het lukt me niet echt goed. Heeft iemand een andere manier om dit te doen?
Hier is een voorbeeld van hoe het moet worden: http://codemirror.net/mode/php/index.html
Die doen dat ook allemaal. Maar is wel heel veel Javascript.
Voor PHP-kleurtjes kan je de php-lighting-functie zelf gebruiken. Of opslaan als .phps
En hoe die je bijvoorbeeld weer een HTML tag eruit halen? Moet dat dan ook met een regexp? En hoe maak ik onderscheid tussen de HTML tags die voor de kleurtjes zorgen, en de HTML tags die een gebruiker typt, als hij bijvoorbeeld voor de lol een HTML tag zou typen.
Geen wonder dat die online-editors met kleurtjes zo zwaar zijn (= traag).
Als ik de tekst overneem uit de textarea, in een variabele zet en deze doe replacen op alle operators, keywords enz. Dan zet ik er dus html tags in die de kleurtjes eraan geven (niet in de textarea. maar in de "resultaat div") Als er dan een html tag in staat die erbijvoorbeeld zo uitziet:
<span class="operator"> + </span>
en vervolgens wordt er gereplaced op het keyword class, dan wordt ook de class in de html tag eruit geraplaced. Daardoor krijg je iets als dit:
<span <span class="keywords">class</span>="operator"> + </span>
Het loopt dus door elkaar, de ene replace opdracht doet de andere replace opnieuw replacen...
Toevoeging
Ik zie dat de highlighter van codeMirror helemaal niet merkbaar trager wordt. Ook niet na 3000 regels code. (getest)
Volgens mij doen ze het in stukkken hakken. Als je op regel 1500 typt, wordt er volgens mij niks gedaan met de andere regels.
Gewijzigd op 17/03/2013 14:03:23 door Mark Hogeveen