Bloki kodu
Bloki kodu pozwalają dołączać kod źródłowy, polecenia terminala, pliki konfiguracyjne i inne treści techniczne do tutoriali. Kod wyświetlany jest w czcionce monospace z podświetlaniem składni opartym na Prism.js.
Tworzenie bloku kodu
- Dodaj nowy blok — Kliknij przycisk + i wybierz Kod.
- Wybierz język — Wybierz język programowania z rozwijanego menu na górze bloku kodu. Włącza to podświetlanie składni dla danego języka.
- Napisz lub wklej kod — Wpisz lub wklej kod w polu edytora. Kod zachowuje białe znaki, wcięcia i łamania linii dokładnie tak, jak zostały wprowadzone.
Obsługiwane języki
clarife obsługuje podświetlanie składni dla 20 języków:
| Język | Język | Język | Język |
|---|---|---|---|
| JavaScript | TypeScript | Python | HTML |
| CSS | JSON | SQL | Bash |
| Go | Rust | Java | C |
| C++ | Ruby | PHP | Swift |
| Kotlin | YAML | XML | Zwykły tekst |
ℹ️ Informacja: Wybierz Zwykły tekst (domyślny), jeśli Twojego języka nie ma na liście. Kod będzie wyświetlany w czcionce monospace bez kolorowania.
Ostrzeżenie o przepełnieniu
Jeśli treść kodu przekracza widoczny obszar bloku, na górze bloku kodu pojawia się wskaźnik ostrzeżenia. Informuje on, że część kodu jest ukryta poniżej widocznego obszaru. Długie bloki kodu przewijają się pionowo wewnątrz edytora.
💡 Wskazówka: Utrzymuj fragmenty kodu zwięźle i krótko — najlepiej poniżej 30 linii. Jeśli musisz pokazać duży plik, rozważ podzielenie go na kilka bloków kodu z objaśniającym tekstem między nimi.
Kod w eksportach
Bloki kodu są zachowywane we wszystkich formatach eksportu:
| Format | Renderowanie |
|---|---|
| Czcionka monospace, bez kolorowania składni | |
| HTML | Podświetlanie składni z Prism.js |
| Markdown | Ogrodzony blok kodu z identyfikatorem języka |
| Prezentacja | Dedykowany slajd kodu z podświetlaniem Prism.js |
| Wideo AI | AI może wygenerować wizualny slajd "code" z Twoim fragmentem |
Kod w wideo AI
Podczas generowania wideo AI z dokumentu zawierającego bloki kodu, generator scenariuszy AI może tworzyć dedykowane slajdy kodu. Te slajdy wyświetlają Twój kod z podświetlaniem składni Prism.js w fioletowym motywie wizualnym, co sprawia, że treści techniczne są atrakcyjne wizualnie w formie wideo.
Czy mogę edytować kod po dodaniu?
Tak. Kliknij gdziekolwiek w bloku kodu, aby edytować jego treść. Możesz też w każdej chwili zmienić język za pomocą rozwijanego menu.
Czy blok kodu obsługuje numery linii?
Numery linii nie są wyświetlane w edytorze, ale pojawiają się w niektórych formatach eksportu (HTML, prezentacja).
Czy mogę skopiować kod z bloku?
Tak. Zaznacz tekst kodu i użyj Cmd+C / Ctrl+C, aby skopiować go do schowka.
Co jeśli mojego języka nie ma na liście?
Użyj trybu Zwykły tekst. Kod będzie wyświetlany poprawnie w czcionce monospace — po prostu nie będzie miał kolorowego podświetlania składni.
Czy jest limit rozmiaru bloku kodu?
Nie ma twardego limitu znaków. Jednak bardzo duże bloki kodu (1000+ linii) mogą wpływać na wydajność edytora i nie są zalecane dla tutoriali.