component

TuxCodeBlock

Standalone Shiki-backed code block. For docs, blog posts, ADRs, anywhere a code sample lives outside the TuxExample component-demo flow. Supports any Shiki-bundled language; loads the requested grammar lazily on mount. Theme tracks page color-mode (light / dark / high-contrast).

canonical · TypeScript

With filename + line numbers

src/drift-reconciler.tsts
// Drift reconciler — closes stale local→central mismatches every hour.
import { schedule } from "./scheduler";
import { fetchCentralIndex, fetchAgentIndex } from "./indices";
import { closeDriftEntry } from "./drift";

schedule.hourly(async () => {
  const [central, agent] = await Promise.all([
    fetchCentralIndex(),
    fetchAgentIndex(),
  ]);

  for (const path of central.keys()) {
    if (!agent.has(path)) {
      await closeDriftEntry(path, "missing-on-agent");
    }
  }
});
<TuxCodeBlock
  lang="ts"
  filename="src/drift-reconciler.ts"
  :code="tsCode"
  line-numbers
/>

multi-language · python

Landscape agent CLI source

Full Shiki language support — Python, Go, Rust, Vue, Svelte, SQL, TOML, YAML, anything in the bundled set.

landscape/agent/__main__.pypython
# landscape agent watch — long-running file event shipper
import asyncio
from landscape.agent import Watcher
from landscape.transport import EventChannel

async def main(roots: list[str]) -> None:
    async with EventChannel() as channel:
        watcher = Watcher(roots=roots, channel=channel)
        await watcher.run()  # blocks until SIGTERM

if __name__ == "__main__":
    asyncio.run(main(["/research", "/scratch"]))

json · token excerpt

Configuration / data formats

design/tokens.jsonjson
{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "_meta": {
    "name": "tux",
    "version": "0.1.0"
  },
  "themes": {
    "tti": {
      "brand": {
        "primary": { "value": "#5C0025" },
        "accent":  { "value": "#DDAC37" }
      }
    }
  }
}

bash · shell session

Terminal output

For shell sessions and CLI traces. Render the prompt + command + output in the same block; Shiki's bash grammar handles it. 

# Spin up a local Landscape agent + ship events
$ landscape agent token --scope=corpus:grants-2024 --ttl=24h
> tier3_a1b2c3d4e5...

$ LANDSCAPE_TOKEN=tier3_... landscape agent watch /research/grants --root=local
[12:14:08] watcher: 4 paths registered, 12,480 inodes tracked
[12:14:09] heartbeat: ok (latency 38ms)

props

Props reference

  • code — the source as a string. Required.
  • lang — Shiki language id ("ts", "python", "vue", etc). Defaults to "text" (no highlighting).
  • filename — caption shown in the header bar (e.g. "app/components/TuxButton.vue").
  • lineNumbers — show 1-indexed gutter numbers.
  • noCopy — hide the copy button.
  • Copy button appears on hover; "Copied" feedback on click.