CodeMirror
Autor: Piotr Karpiuk o czwartek 5. Maj 2011
Przeszło rok temu pisałem na temat osadzania na stronie WWW edytora kodu źródłowego dla programistów. Przez ten czas sporo się działo. O ile tak zachwalany poprzednio Ymacs najwyraźniej się zatrzymał, to inni zawodnicy zdecydowanie nie próżnują.
CodeMirror w Skotowym środowisku IDE JavaScriptu
Następcą Mozillowego SkyWritera (Bespina) jest ACE (demo), w którym dopatrzyłem się pewnych wad – np. pod Chromem klawisz PgDn przewija ekran ale nie zmienia pozycji kursora.
Wielką pozytywną niespodzianką jest natomiast rozwijany przez Marijna Haverbeke CodeMirror, który po pierwsze działa na tyle przyzwoicie i szybko że jest już zintegrowany z przeszło tysiącem systemów w Internecie (w tym ostatnio np. z Google code’s project hosting), a ponadto pojawiła się ostatnio jego wersja 2.0 – zaprojektowana i przepisana całkowicie od nowa według koncepcji zaczerpniętej z ACE.
CodeMirror jest obecnie niezłym, darmowym (licencja MIT) edytorem pozwalającym na podświetlanie składni i formatowanie kodu w takich językach jak JavaScript, XML/HTML, Python, PHP, C/Java, czy Haskel, ale nade wszystko udostępnia funkcjonalny interfejs API, który daje dostęp do wnętrza edytora.
Dzięki niemu możemy m.in.:
- zaimplementować podświetlanie składni i formatowanie kodu dla nowego języka programowania, w tym uwzględniając mieszanie języków np. HTML i PHP/JavaScript/CSS (demo),
- zrealizować podpowiadanie i uzupełnianie (demo),
- ustawiać markery (na marginesie) dla wskazanych wierszy kodu,
- formatować wedle uznania wybrane wiersze (np. podświetlanie wiersza zawierającego kursor) lub wskazany region (np. pokazywanie błędów składniowych),
- dostać się do tokena pod kursorem myszy (np. żeby znaleźć definicję wskazanej funkcji i skoczyć do niej).
Nowy projekt wpłynął pozytywnie na wydajność – nowy edytor dużo szybciej podświetla składnię nawet w dużych plikach (ok. 1500 wierszy w 100ms, podczas gdy poprzednia wersja – 40), nie wykorzystuje już ramek tylko zwykły element div HTMLa, przez co edytor dużo łatwiej integruje się z dotychczasowym layoutem strony.
CodeMirror 2.0:
- malutki – po spakowaniu 12kb – mniej niz zajmuje obrazek jego logo,
- lekki – nie wykonuje prawie zadnej pracy w tle, mozesz miec wiele instancji na jednej stronie – po prostu wzbogacony textarea,
- mozna edytowac duze dokumenty, np. 1MB
Ale są też wady: brak zawijania wierszy wykraczających poza prawą krawędź ekranu, ciągle można tylko pomarzyć o zwijaniu bloków kodu.
Własny tryb
Miłą cechą nowej wersji edytora jest znaczne ułatwienie tworzenia trybów dla innych (własnych?) języków programowania – nie trzeba być już ekspertem od programowania funkcyjnego aby stworzyć własny skaner i parser.
Zasadniczo parser posiada swój stan, który jest modyfikowany po przeczytaniu kolejnego tokena. Tak więc definiujemy metodę startState która zwraca stan początkowy na początku dokumentu, a następnie metodę token(stream, state), która wczytuje pojedynczy token ze strumienia, modyfikuje stan i zwraca klasę CSS której należy użyć do sformatowania tokenu.
Na podobnej zasadzie możemy opcjonalnie zdefiniować formatowanie kodu źródłowego implementując metodę indent(state, textAfter), która na podstawie stanu parsera i tekstu wcinanego wiersza zwraca liczbę całkowitą – liczbę spacji do wcinania.
