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: .

Wklej kod źródłowy. Kolorowanie w podglądzie odświeża się przy każdej zmianie.

Twój tekst zostaje w przeglądarce – nie jest wysyłany, zapisywany ani dodawany do paska adresu.

Podgląd

// Wyświetl powitanie
function greet(name) {
  const text = "Witaj, " + name + "!";
  console.log(text);
  return text.length;
}

greet("świecie");
Moje narzędzia

Wynik

Pokolorowany HTML
<pre style="background:#ffffff;color:#1f2328;padding:12px 14px;border-radius:6px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;tab-size:4;margin:0"><code style="font:inherit"><span style="color:#57606a;font-style:italic">// Wyświetl powitanie</span> <span style="color:#cf222e">function</span> <span style="color:#8250df">greet</span>(name) { <span style="color:#cf222e">const</span> text = <span style="color:#0a3069">"Witaj, "</span> + name + <span style="color:#0a3069">"!"</span>; console.<span style="color:#8250df">log</span>(text); <span style="color:#cf222e">return</span> text.length; } <span style="color:#8250df">greet</span>(<span style="color:#0a3069">"świecie"</span>);</code></pre>
Wykryto
JavaScript / TypeScript, wierszy: 8, znaków: 147
Kod HTML zawiera kolory jako atrybuty style i można go wkleić wszędzie tam, gdzie HTML jest dozwolony. Rozpoznawanie jest przybliżeniem opartym na wzorcach, a nie pełnym parserem; przy nietypowym zapisie fragment może pozostać bez koloru. Kod jest przetwarzany tylko w Twojej przeglądarce, nie jest zapisywany ani wysyłany.

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

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

Stan na: · Zasady redakcyjne

Podobne narzędzia