@@ -344,13 +401,99 @@ function updateGutter() {
for (let i=1; i<=lines; i++) s += i + "\\n";
gutter.textContent = s;
}
-ta.addEventListener("input", updateGutter);
-ta.addEventListener("scroll", () => { gutter.scrollTop = ta.scrollTop; });
+ta.addEventListener("input", refresh);
+function syncScroll() {
+ gutter.scrollTop = ta.scrollTop;
+ // The overlay needs horizontal sync too: white-space:pre means long lines
+ // scroll sideways, and the gutter never does.
+ hl.scrollTop = ta.scrollTop; hl.scrollLeft = ta.scrollLeft;
+}
+ta.addEventListener("scroll", syncScroll);
// Also sync on keydown for immediate response
-ta.addEventListener("keydown", () => {
- setTimeout(() => { gutter.scrollTop = ta.scrollTop; }, 0);
+ta.addEventListener("keydown", () => { setTimeout(syncScroll, 0); });
+
+// --- Syntax highlighting ---
+// Vendored highlight.js, fetched only when a pad actually uses a language. A plain
+// pad downloads nothing. Every failure path falls back to the plain textarea.
+const LANGS = ["accesslog","apache","bash","cpp","css","diff","dockerfile","go","graphql",
+ "http","ini","java","javascript","json","markdown","nginx","php","powershell",
+ "python","rust","sql","typescript","xml","yaml"];
+const LANG_LABELS = {accesslog:"Access log", apache:"Apache", bash:"Bash", cpp:"C / C++",
+ css:"CSS", diff:"Diff", dockerfile:"Dockerfile", go:"Go", graphql:"GraphQL", http:"HTTP",
+ ini:"INI / TOML", java:"Java", javascript:"JavaScript", json:"JSON", markdown:"Markdown",
+ nginx:"nginx", php:"PHP", powershell:"PowerShell", python:"Python", rust:"Rust", sql:"SQL",
+ typescript:"TypeScript", xml:"HTML / XML", yaml:"YAML"};
+const HL_MAX = 100000; // above this, highlighting costs more than it is worth
+
+const hl = $("#hl"), hlCode = hl.firstElementChild, wrap = $("#wrap"), langSel = $("#lang");
+let curLang = null, hljs = null, hlPending = false;
+const langLoaded = new Set();
+
+langSel.append(new Option("Plain", ""));
+for (const l of [...LANGS].sort((a, b) => LANG_LABELS[a].localeCompare(LANG_LABELS[b])))
+ langSel.append(new Option(LANG_LABELS[l], l));
+
+async function ensureLang(lang) {
+ // Allowlist check before the value reaches a URL, not merely for correctness.
+ if (!LANGS.includes(lang)) return false;
+ if (!hljs) hljs = (await import("/static/hljs/core.min.js")).default;
+ if (!langLoaded.has(lang)) {
+ const m = await import(`/static/hljs/languages/${lang}.min.js`);
+ hljs.registerLanguage(lang, m.default);
+ langLoaded.add(lang);
+ }
+ return true;
+}
+
+function renderHl() {
+ if (!curLang || !hljs || ta.value.length > HL_MAX) { wrap.classList.remove("hl"); return; }
+ try {
+ // Trailing newline: a
renders one fewer line than the textarea without it.
+ hlCode.innerHTML = hljs.highlight(ta.value + "\\n", {language: curLang, ignoreIllegals: true}).value;
+ wrap.classList.add("hl");
+ syncScroll();
+ } catch (e) {
+ wrap.classList.remove("hl");
+ }
+}
+
+async function applyLang(lang) {
+ langSel.value = lang || "";
+ if (!lang || !(await ensureLang(lang).catch(() => false))) {
+ curLang = null; wrap.classList.remove("hl"); hlCode.textContent = ""; return;
+ }
+ curLang = lang;
+ renderHl();
+}
+
+langSel.addEventListener("change", () => {
+ const lang = langSel.value;
+ if (ws?.readyState === 1 && isAuthed) ws.send(JSON.stringify({type: "set_lang", lang}));
+ applyLang(lang);
});
+// Coalesce highlighting to one render per animation frame. This must NOT be debounced
+// on a timer: while .hl is on the textarea text is transparent, so any delay before the
+// overlay catches up is a delay before the typed character is visible at all.
+function scheduleHl() {
+ if (hlPending) return;
+ hlPending = true;
+ requestAnimationFrame(() => { hlPending = false; renderHl(); });
+}
+
+// Re-render gutter and highlighting together.
+function refresh() {
+ updateGutter();
+ if (ta.value.length > HL_MAX) {
+ wrap.classList.remove("hl");
+ langSel.disabled = true;
+ langSel.title = "Highlighting is off above 100 KB";
+ return;
+ }
+ if (isAuthed) { langSel.disabled = false; langSel.title = "Syntax highlighting for this pad"; }
+ scheduleHl();
+}
+
// --- Password panel ---
function togglePwPanel() {
$("#pw-panel").classList.toggle("open");
@@ -447,7 +590,8 @@ function connect(){
} else {
isAuthed = true;
hideOverlay();
- ver = msg.ver; ta.value = msg.text; updateGutter();
+ ver = msg.ver; ta.value = msg.text; refresh();
+ applyLang(msg.lang || "");
// ?pw= on an unprotected pad sets the password instead of unlocking.
// Guard on !isProtected: the server re-sends init after a successful
// auth, and that init lands here too — without the guard every unlock
@@ -470,13 +614,15 @@ function connect(){
} else if (msg.type === "update" && isAuthed && msg.ver > ver && msg.clientId !== clientId) {
const {selectionStart:s, selectionEnd:e} = ta;
const oldText = ta.value;
- ta.value = msg.text; ver = msg.ver; updateGutter();
+ ta.value = msg.text; ver = msg.ver; refresh();
ta.selectionStart = adjustCursor(oldText, msg.text, s);
ta.selectionEnd = adjustCursor(oldText, msg.text, e);
} else if (msg.type === "peers_changed") {
const el = $("#peers");
el.textContent = msg.count;
el.style.display = "inline";
+ } else if (msg.type === "lang_changed") {
+ applyLang(msg.lang || "");
} else if (msg.type === "protected_changed") {
isProtected = msg.protected;
updateLockBtn();
@@ -484,6 +630,7 @@ function connect(){
}
};
ws.onclose = () => {
+ langSel.disabled = true;
$("#status").textContent = "disconnected";
$("#status").classList.remove("connected");
$("#peers").style.display = "none";
@@ -653,6 +800,8 @@ def get_system_info():
per-pad password protection (PBKDF2-SHA256), with a built-in password generator in the UI
?pw=… on a pad URL locks it with that password if it is not protected yet,
and unlocks it if it is — so /{{pad_id}}/?pw=s3cret is a one-step create-and-lock link
+
optional syntax highlighting (24 languages) from a per-pad dropdown, shared with everyone on the pad;
+ highlight.js is vendored locally and loaded lazily, so a plain pad fetches nothing
line numbers; Tab inserts 4 spaces
dark / light mode (auto-detects system preference, manual toggle)
copy-to-clipboard and "new pad" buttons, live peer count in the header
@@ -840,7 +989,8 @@ async def create_pad_with_content(request: Request):
doc_id = random_id()
rooms[doc_id] = {"text": text_content, "ver": 1, "peers": set(), "authed_peers": set(),
- "last_access": time.time(), "pw_hash": None, "pw_salt": None, "pw_iter": None}
+ "last_access": time.time(), "pw_hash": None, "pw_salt": None, "pw_iter": None,
+ "lang": None}
# Save to cache if enabled
save_room_data_to_cache(doc_id, rooms[doc_id])
@@ -874,6 +1024,7 @@ def get_raw_pad_content(doc_id: str, request: Request, pw: str = ""):
"pw_hash": cached_data.get("pw_hash"),
"pw_salt": cached_data.get("pw_salt"),
"pw_iter": cached_data.get("pw_iter"),
+ "lang": cached_data.get("lang"),
}
if doc_id not in rooms:
@@ -945,6 +1096,7 @@ async def ws(doc_id: str, ws: WebSocket):
"pw_hash": cached_data.get("pw_hash"),
"pw_salt": cached_data.get("pw_salt"),
"pw_iter": cached_data.get("pw_iter"),
+ "lang": cached_data.get("lang"),
}
# Refuse to create new rooms when at capacity
@@ -955,7 +1107,7 @@ async def ws(doc_id: str, ws: WebSocket):
room = rooms.setdefault(doc_id, {"text": "", "ver": 0, "peers": set(), "authed_peers": set(),
"last_access": time.time(), "pw_hash": None, "pw_salt": None,
- "pw_iter": None})
+ "pw_iter": None, "lang": None})
room["peers"].add(ws)
# Update access time
@@ -976,6 +1128,9 @@ async def ws(doc_id: str, ws: WebSocket):
"ver": room["ver"],
"protected": room["pw_hash"] is not None,
"peers": len(room["peers"]),
+ # Withheld until authed: the language is content metadata and would tell
+ # someone sitting at the unlock overlay what kind of file this is.
+ "lang": room.get("lang") if authed else None,
}))
try:
while True:
@@ -989,6 +1144,7 @@ async def ws(doc_id: str, ws: WebSocket):
await ws.send_text(json.dumps({"type": "auth_ok"}))
await ws.send_text(json.dumps({
"type": "init", "text": room["text"], "ver": room["ver"], "protected": False,
+ "lang": room.get("lang"),
}))
else:
if not check_auth_rate_limit(client_ip):
@@ -1004,6 +1160,7 @@ async def ws(doc_id: str, ws: WebSocket):
await ws.send_text(json.dumps({"type": "auth_ok"}))
await ws.send_text(json.dumps({
"type": "init", "text": room["text"], "ver": room["ver"], "protected": True,
+ "lang": room.get("lang"),
}))
else:
record_auth_failure(client_ip)
@@ -1050,6 +1207,14 @@ async def ws(doc_id: str, ws: WebSocket):
save_room_data_to_cache(doc_id, room)
await _broadcast(doc_id, {"type": "protected_changed", "protected": room["pw_hash"] is not None})
+ elif data.get("type") == "set_lang":
+ lang = str(data.get("lang", ""))
+ if lang and lang not in LANGS:
+ continue # unknown language: ignore rather than echo it back
+ room["lang"] = lang or None
+ save_room_data_to_cache(doc_id, room)
+ await _broadcast(doc_id, {"type": "lang_changed", "lang": room["lang"]}, authed_only=True)
+
except WebSocketDisconnect:
pass
finally: