Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

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.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>