Kiedyś myślałem o podobnych rzeczach. Ale jaki jest twój usecase? Moim było, żeby móc zaznaczyć pewne rzeczy w kodzie źródłowym, żeby były bardziej widoczne, albo np. żeby dodać strzałki dla celów edukacyjnych (np. https://hex13.github.io/tutorials/es6/file.html
Chociaż właśnie o ile elementy graficzne łatwo było zrobić, to właśnie sposób reprezentacji tego / format danych zapisu jest dla mnie nie rozwiązaną zagadką (powyżej to demko, więc mogłem to na pałę zapisać). Jeśli chodzi o kod źródłowy to najprościej byłoby to zrobić w komentarzach np.:
let foo = /*@color red*/thisVariableisRed/*@endcolor*/;
^ kiedyś zrobiłem PoC wtyczki do edytora, która pozwala na definiowanie takich sekcji.
Tyle, że to śmieci kod. Z drugiej strony dawanie tego po prostu w JSON i wpisywanie tam na sztywno numerów linii sprawiałoby, że po każdej zmianie pliku trzeba by było to aktualizować od nowa (chyba, żeby zrobić na zasadzie regexpów - tak pliki ctags działają z tego co pamiętam. Też kiedyś zrobiłem sobie na szybko toola, który pozwalał na wklejanie kodu i definiowanie regexpów, które mają być podświetlane - używałem tego do tego, żeby przeglądać pliki w obcym dla mnie projekcie i szybko wyszukiwać informacje przeglądając pliki).
Natomiast pytanie o twój usecase. Bo może się okazać, że najprostsze, co możesz zrobić, to pisać kod w HTML albo w innym formacie, który pozwala na definiowanie kolorów, coś w stylu:
let foo = <span class="highlight-red">thisVariableIsRed</span>;
ale dopisać sobie prosty skrypt budujący, który będzie przelatywał przez pliki i likwidował z niego HTML (albo jakiś inny system znaczników), i tym samym będziesz miał na wyjściu kod, który będzie mógł zostać uruchomiony, a jednocześnie po otwarciu w przeglądarce, będzie wyglądał ładnie i kolorowo (chociaż kwestia jeszcze normalnego kolorowania składni, które się utraci w ten sposób).
Jeszcze miałem jeden pomysł, żeby zrobić wtyczkę do edytora, która automatycznie będzie dodawać komentarze do pliku:
let foo = /*@color red*/thisVariableisRed/*@endcolor*/;
ale która nie będzie pokazywać tego użytkownikowi, tylko po otwarciu pliku w edytorze wtyczka pokaże po prostu czerwony kolor, a /*@color red*/
nie byłoby widoczne. To myślę, że mogłoby być najwygodniejsze. Tylko pytanie jak to zaimplementować? Może taka wtyczka musiałaby wychwycić otwarcie pliku i sparsować te komentarze i podmienić tekst (żeby komentarze nie byłyby widoczne), za to dodać swoje formatowanie? Potem umożliwić edycję tych sekcji w jakiś bardziej przyjemny sposób (np. wizualny wybór koloru). O ile API danego edytora na to by pozwalało.