Kolorowanie składni
To kolorowanie składni koloruje kod źródłowy bez instalowania czegokolwiek: wklej kod, wybierz język i jasny lub ciemny schemat kolorów, a potem skopiuj gotowy kod HTML. Kolory są zapisane w samym kodzie, więc wygląda on poprawnie na blogach, w mailach i dokumentach bez dodatkowego arkusza stylów.
Źródło: WCAG 2.2 – Success Criterion 1.4.3 Contrast (Minimum): 4,5:1 dla tekstu (sprawdzono kolory obu motywów). Stan na: .
Jak to obliczamy
Kolorowanie składni wyróżnia kolorem elementy kodu źródłowego: słowa kluczowe, ciągi znaków, liczby, komentarze i nazwy funkcji dostają po jednym kolorze. Dzięki temu kod łatwiej się czyta, zwłaszcza w tekstach, dokumentacji i mailach, gdzie nie ma edytora ze schematem kolorów.
Co potrafi narzędzie
- Siedem języków: JavaScript i TypeScript, JSON, HTML (z osadzonym skryptem i stylem), CSS, SQL, Python i Bash. Przy opcji „Wykryj automatycznie” narzędzie dobiera język na podstawie tekstu.
- Dwa schematy kolorów: jasny na białym i ciemny na ciemnym tle. Wszystkie kolory tekstu osiągają współczynnik kontrastu 4,5 do 1 z wytycznych dostępności.
- Dwie formy wyniku: z kolorami w samym kodzie wynik działa wszędzie; z klasami CSS jest krótszy i można go przekolorować własnym arkuszem stylów.
- Numery wierszy: na życzenie każdy wiersz poprzedza jego numer, którego nie da się zaznaczyć razem z kodem.
Bezpiecznie i bez strat
Kod źródłowy nie jest zmieniany, tylko dzielony na fragmenty i otaczany informacją o kolorze. Znaki takie jak < i & są zabezpieczane, aby kod z fragmentami HTML nie wpływał na resztę strony. Żeby wcześniej uporządkować kod, użyj formatera JSON, formatera SQL lub formatera HTML.
Najczęściej zadawane pytania
Jak pokolorować kod do wpisu na blogu?
Wklej kod, wybierz język i schemat kolorów, a następnie skopiuj HTML z pola wyniku. Wstaw go w edytorze bloga jako blok HTML. Kolory są w kodzie, więc dodatkowy arkusz stylów nie jest potrzebny.
Czy pokolorowany kod wkleję do Worda lub maila?
Tak, zwykle z podglądu: zaznacz, skopiuj i wklej, a kolory zostaną zachowane. W programach, które nie przyjmują HTML, pomoże zrzut ekranu podglądu.
Jakie języki są obsługiwane?
JavaScript i TypeScript, JSON, HTML z osadzonym skryptem i stylem, CSS, SQL, Python i Bash. Dla każdego innego języka wybierz „Zwykły tekst”; zostanie wtedy tylko formatowanie bloku.
Czy mój kod jest zapisywany lub wysyłany?
Nie. Przetwarzanie odbywa się w Twojej przeglądarce. Kod nie trafia do paska adresu i nie jest zapisywany.
Dlaczego niektóre fragmenty nie są pokolorowane?
Narzędzie rozpoznaje wzorce, takie jak słowa kluczowe, ciągi znaków i komentarze, ale nie jest pełnym parserem. Nietypowy zapis lub odmiana języka zostaje więc czasem czarna.
Źródła i podstawa prawna
- WCAG 2.2 – Success Criterion 1.4.3 Contrast (Minimum): 4,5:1 dla tekstu (sprawdzono kolory obu motywów)
- WHATWG HTML – Syntax: odwołania do znaków i kodowanie znaków &, < i > w tekście
- ECMAScript Language Specification – słowa zastrzeżone i gramatyka leksykalna (podstawa podświetlania składni JavaScript)
Stan na: · Zasady redakcyjne
Podobne narzędzia
- JSON formatter, walidator i minifikatorSprawdź JSON według RFC 8259: dokładna linia, kolumna i zrozumiały opis błędu. Formatowanie JSON, minifikacja, sortowanie kluczy – lokalnie w przeglądarce.
- Formatowanie SQL (formater SQL online)Formatowanie SQL dla czytelności: słowa kluczowe wielkimi literami, wcięcia, kolumny i warunki w osobnych wierszach. Także kompresja. Działa w przeglądarce.
- Formatowanie HTMLFormatowanie HTML: dodaj wcięcia, by kod był czytelny, albo zminimalizuj go do jednej linii – z ostrzeżeniem o niezamkniętych tagach. Działa w przeglądarce.
- Regex testerRegex tester: sprawdzaj wyrażenia regularne JavaScript na żywo – podświetlone dopasowania, grupy w tabeli i objaśnienie wzorca. Za darmo, bez wysyłania danych.
- Moje IP – jaki mam adres IP?Moje IP od razu: pokazuje Twój publiczny adres IP, rozpoznaje IPv4 lub IPv6 i wyjaśnia różnicę. Za darmo, bez rejestracji – adres IP nie jest zapisywany.
- Pary czcionek: jakie czcionki do siebie pasująPary czcionek do nagłówków i tekstu z podglądem na żywo, gotowym CSS i dostępnością w Windows, macOS, iOS i Androidzie – tylko czcionki systemowe.
- IEEE 754 kalkulatorIEEE 754 kalkulator dla half, single i double: przelicz liczbę dziesiętną, hex lub bity i zobacz znak, wykładnik, mantysę oraz dokładną zapisaną wartość.
- Generator gradientu CSSGenerator gradientu CSS: liniowy, radialny lub stożkowy, dowolna liczba punktów koloru, kąt i kolor zapasowy – podgląd na żywo i gotowy kod CSS do skopiowania.
- Walidator adresu e-mail: sprawdzanie poprawnościSprawdź poprawność adresów e-mail wg RFC 5321/5322: długość, etykiety domeny, domeny z polskimi znakami (Punycode). Także listy. Lokalnie, bez wysyłania.