Code viewer · syntax highlighting
A dependency-free highlighter for JavaScript, TypeScript, JSX, Vue, HTML, CSS and shell — with titles, line numbers, highlighted lines and one-click copy.
Languages
import { signal, computed, html } from "@barisakin/zap"; // a counter: the text node reads the signal, nothing re-rendersexport function Counter({ start = 0 }) { const count = signal(start); const double = computed(() => count() * 2); return html`<button class="zap-btn" onclick=${() => count.update((c) => c + 1)}> Clicked ${count} times (×2 = ${double}) </button>`;}interface User { id: number; name: string; roles?: string[] } export async function loadUsers(query = ""): Promise<User[]> { const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); if (!res.ok) throw new Error(`HTTP ${res.status}`); const users = (await res.json()) as User[]; return users.filter((u) => /^[a-z]/i.test(u.name)); // 0x1f, 1e3, true}<!doctype html><html lang="en"> <head> <link rel="stylesheet" href="https://zapjs.baltavista.com/theme.css" /> </head> <body class="zap"> <div id="app"></div> <!-- one module, no build step --> <script type="module"> import { signal, html, mount } from "https://zapjs.baltavista.com/zap.min.js"; const name = signal("world"); mount(() => html`<h1>Hello ${name}!</h1>`, document.getElementById("app")); </script> </body></html>/* a token swap re-skins every component */.zap[data-theme="dark"] { --zap-primary: #3b82f6; --zap-radius-sm: 9px;}.zap-btn:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--btn-c) 30%, transparent); transform: translateY(-1px) !important;}@media (max-width: 900px) { .mkt__main { grid-template-columns: 1fr; } }# install, build and shipnpm i @barisakin/zapnpx esbuild app.js --bundle --minify --outdir=distNODE_ENV=production node prerender.mjs && echo "built $(ls dist | wc -l) files"Live — type, the highlight follows
const greet = (name) => `Hello, ${name}!`;console.log(greet("zap")); // try another language →Without a header · wrapped
// the copy button shows on hover; long lines wrap instead of scrollingconst message = 'A long line of code that would otherwise scroll sideways goes on to the next line instead, because wrap is on for this block.';Usage
import { signal } from "./index.js";import { CodeViewer, highlight } from "./components/code.js"; // js · jsx · ts · vue · html · css · sh · json — guessed when lang is left out.// html`…` templates are highlighted as HTML, their ${holes} as JavaScript.CodeViewer({ code: source, // a string, or a signal / getter — re-highlights on change lang: "js", title: "counter.js", // shown beside the language in the header lineNumbers: true, highlightLines: "4-5", // or [4, 5]; startLine: 10 numbers from 10 maxHeight: 320, // scrolls past this}) CodeViewer({ code, header: false, wrap: true }) // copy button on hover, soft wraphighlight(code, "css") // → an HTML string of .tk-* spans