Code
1 / 1
Edytor LaTeX pokazuje kod i złożone strony obok siebie. Wszystko, co wpiszesz, od razu pojawia się na stronach - nagłówki, listy, tabele, wzory, przypisy i odsyłacze - a kliknięcie dowolnego tekstu w podglądzie przenosi do jego miejsca w kodzie. Tekst można też edytować bezpośrednio na stronie. Dzięki temu szybko napiszesz listy, arkusze ćwiczeń, raporty i ulotki bez instalowania TeX-a.
Wszystko działa w przeglądarce. Dokumenty nie są nigdzie wysyłane, nie ma rejestracji ani reklam.
Polecenia, środowiska, wzory i komentarze we własnych kolorach, numery wierszy, automatyczne \end{…} i przejrzysta lista problemów z numerem wiersza.
A4, Letter lub własny rozmiar papieru, marginesy klas standardowych lub pakietu geometry, numery stron, przypisy na dole strony i czcionki Latin Modern znane z LaTeX-a.
Wzory w tekście i wyeksponowane, numerowane równania, align, macierze i symbole amsmath - składane przez KaTeX, bezpośrednio na stronie.
tabular i tabularx z liniami i scalonymi komórkami, rysunki z podpisami, \label i \ref, spis treści i bibliografia.
Przeciągnij obraz do edytora i użyj go przez \includegraphics. Obrazy są przechowywane razem z dokumentem w przeglądarce.
PDF przez okno drukowania, każda strona jako PNG, JPG lub WebP, jeden plik HTML, zwykły tekst albo źródło LaTeX z obrazami jako ZIP.
Każda strona https (i localhost) może osadzić edytor za pomocą <iframe> i ?embed=1 - bez rejestracji, bez klucza. Po osadzeniu edytor ukrywa ten tekst i pokazuje przycisk Zapisz. Dokument można przekazywać do edytora i z niego na dwa sposoby.
src= otwiera plik (twój serwer musi zezwalać na CORS), webhook= sprawia, że „Zapisz” (Ctrl+S) wysyła dokument pod ten adres. Dodaj &token=…, aby wysyłać nagłówek Authorization: Bearer …, i &auto, aby zapisywać po każdej zmianie.
<iframe src="https://latex.giit.ch/?embed=1&src=https://your-site.com/docs/flyer.tex&webhook=https://your-site.com/save.php"
allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>Webhook otrzymuje żądanie POST z JSON { editor, event: "save", id, name, content, assets, updated }. Mały skrypt PHP, który go zapisuje:
<?php
header('Access-Control-Allow-Origin: https://latex.giit.ch');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: POST, OPTIONS');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
if (($_SERVER['HTTP_AUTHORIZATION'] ?? '') !== 'Bearer SECRET') { http_response_code(403); exit; }
$d = json_decode(file_get_contents('php://input'), true);
$name = preg_replace('/[^\w\- ]/u', '_', $d['name']);
file_put_contents(__DIR__ . "/docs/$name.tex", $d['content']);
echo '{"ok":true}';Edytor zgłasza latexeditor:ready, twoja strona odpowiada latexeditor:load, edytor zgłasza latexeditor:loaded, latexeditor:change przy rzeczywistych zmianach i latexeditor:save, gdy użytkownik zapisuje. Twoja strona może wysłać latexeditor:get (bieżący stan) lub latexeditor:save (naciśnięcie Zapisz). Zapis odbywa się wtedy przez twoje własne logowanie i sesję.
<iframe id="ed" src="https://latex.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://latex.giit.ch';
addEventListener('message', async e => {
if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
const m = e.data;
if (m.type === 'latexeditor:ready') { // edytor jest gotowy: przekaż mu dokument
ed.contentWindow.postMessage({
type: 'latexeditor:load',
name: 'Flyer',
content: await (await fetch('/docs/flyer.tex')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // opcjonalne obrazy
}, ORIGIN);
}
if (m.type === 'latexeditor:change') document.title = '● not saved'; // rzeczywista zmiana
if (m.type === 'latexeditor:save') { // użytkownik kliknął „Zapisz”
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content, assets: m.assets }) });
document.title = 'Saved';
}
});
// Przycisk zapisu na twojej stronie: odpowiedź przychodzi jako latexeditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'latexeditor:get' }, ORIGIN); }
</script>Asystent AI na twojej stronie: działa także w ramce. Z allow="clipboard-write" w iframe „Kopiuj prompt” korzysta bezpośrednio ze schowka (w przeciwnym razie edytor używa starego polecenia kopiowania albo pokazuje prompt do ręcznego skopiowania). Link wysłany przez AI nie dotrze do edytora osadzonego w innej stronie, więc edytor prosi AI i użytkownika o wklejenie całej odpowiedzi AI do edytora - albo o otwarcie edytora we własnym oknie.
window.open("https://latex.giit.ch/?embed=window", "latexeditor-17") otwiera pełny edytor we własnym oknie, który wymienia te same wiadomości z window.opener. Linki od AI docierają do niego tam. latexeditor:load może też zawierać context: { host, title, rules } - prompt dla AI mówi wtedy, gdzie należy dokument, i stosuje twoje zasady - oraz hook: { url, token, assets: false }, webhook tylko dla tego dokumentu, który nigdy nie jest zapisywany. Zamknięcie okna z niezapisanymi zmianami wysyła latexeditor:closing.
Przekaż edytorowi własny prompt, adres w twojej witrynie i klucz dla tej sesji edytora. Okno AI pokazuje wtedy „Połączono z” twoją witryną, to, co przekazujesz AI, oraz wybór: zmienić bieżący dokument lub utworzyć nowy; Kopiuj prompt łączy to wszystko. AI wysyła swój wynik z kluczem na twój serwer, a twoja strona otwiera go w edytorze - nowy dokument otwiera się osobno i zostaje w przeglądarce użytkownika. Jeden klucz na sesję edytora: pozostaje ważny, dopóki edytor jest otwarty, a edytor prosi o niego przez latexeditor:key-request tylko wtedy, gdy go nie ma. Edytor nigdy sam nie wysyła klucza i nigdy go nie zapisuje; adres musi być adresem https na twoim własnym hoście lub jego subdomenie.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // jeden klucz na sesję edytora
const k = await key();
ed.contentWindow.postMessage({ type: 'latexeditor:load', name: 'Flyer', content, ai: {
label: 'My Site', prompt: 'Keep the [[placeholders]]. Write in German.',
endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// zapamiętaj id z latexeditor:loaded i ignoruj change/save/closing z innym id
// tylko gdy edytor nie ma klucza:
if (m.type === 'latexeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'latexeditor:ai', key: k.key }, ORIGIN); }
// dopóki edytor jest otwarty, informuj serwer co minutę; zamknięcie edytora lub strony unieważnia klucz
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// twój serwer ma wynik (polling, SSE …): target to "current" lub "new"
ed.contentWindow.postMessage({ type: 'latexeditor:load', name: 'Flyer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - klucz tej sesji edytora zalogowanego użytkownika (wywołuje go twoja strona)
session_start(); // sprawdź, czy użytkownik może edytować ten dokument
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // lub w twojej bazie danych; ?alive= ponownie ustawia seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - tu AI wysyła wynik (bez nagłówków CORS: AI wywołują go z serwera)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // twoja baza danych: nieunieważniony, widziany w ciągu ostatnich 3 minut
if (!$row) { http_response_code(401); exit('{"ok":false,"error":"key not valid"}'); }
$d = json_decode(file_get_contents('php://input', false, null, 0, 2000000), true);
save_draft($row['doc'], $d['content'], $d['target'] === 'new' ? 'new' : 'current'); // twoja strona pokazuje go przez latexeditor:load
echo '{"ok":true}';Twórz klucze z co najmniej 128 losowymi bitami, przechowuj tylko ich hash, wiąż każdy z zalogowanym użytkownikiem, dokumentem i tą sesją edytora, twórz jeden na sesję, utrzymuj go ważnym tylko wtedy, gdy twoja strona zgłasza sesję jako otwartą, i unieważniaj go, gdy edytor lub strona zostaną zamknięte.
Cały protokół jest opisany w llms.txt - przekaż go AI, a zbuduje połączenie dla twojego systemu. Edytor SVG działa tak samo z prefiksem svgeditor: - svg.giit.ch.
Nie. Edytor działa w całości w przeglądarce. Dokumenty i obrazy nigdy nie są wysyłane na serwer, chyba że sam skonfigurujesz webhook do własnego serwera.
Kliknij „Eksportuj”, wybierz PDF i kliknij „Drukuj / zapisz jako PDF”. W oknie drukowania wybierz jako drukarkę „Zapisz jako PDF”. Strony wyglądają dokładnie tak jak w podglądzie, a tekst można zaznaczać.
Nie. Edytor sam składa LaTeX w przeglądarce. Rozumie polecenia używane w większości dokumentów - rozdziały, listy, tabele, rysunki, wzory, kolory, przypisy, odsyłacze. Rysunki TikZ i czcionki fontspec nie są pokazywane; kod pozostaje poprawnym LaTeX-em, który w każdej chwili można skompilować przez pdflatex.
Przeciągnij lub wklej obraz do edytora albo dodaj go w karcie Obrazy po prawej. Jest przechowywany razem z dokumentem w przeglądarce i używany przez \includegraphics{name}.
Tylko w przeglądarce. Kliknij przycisk folderu w lewym górnym rogu (Moje dokumenty), aby je otwierać, zmieniać ich nazwy, duplikować, pobierać lub usuwać. Wyczyszczenie danych witryny w przeglądarce je usuwa, więc pobierz te, które chcesz zachować - albo pozwól edytorowi wysyłać je na własny serwer („Zapis na serwerze”).
Tak, każda AI - ChatGPT, Claude, Gemini, Copilot lub AI w twoim narzędziu programistycznym. Kliknij „Asystent AI”, potem „Kopiuj prompt”, wklej go do swojej AI i napisz, co ma napisać. AI odpowiada linkiem; kliknij go, a dokument pojawi się w edytorze. „Cofnij” cofa każdą zmianę.
Tak. Osadź go w iframe i wymieniaj dokumenty przez postMessage albo pozwól mu wysyłać każdą zapisaną wersję na twój serwer przez webhook. Przykłady znajdziesz w sekcji Edytor na własnej stronie.
Nie. Edytor jest darmowy, bez reklam i bez rejestracji.