code

import.meta.og.code(source, lang, meta?) highlights a code snippet at build time and inlines it as a static region. It runs the snippet through your app’s own Shiki configuration, with the same themes, transformers and meta parsers a markdown fence uses, so a snippet in a component renders exactly like the same snippet in a .svx document.

<script>
  import { Region } from 'ogygia';

  const example = import.meta.og.code(`
    const cart = new Cart();
    cart.add(item);
  `, 'ts', '{2}');
</script>

<Region of={example} />

The result is a region, which you render with <Region of={…} />. It ships as HTML and carries no client JS of its own.

The three arguments

• source is the code, as a static string or template literal. A template literal is usually the convenient choice, because code is full of quotes and <, none of which need escaping inside one. A ${…} interpolation is a build error, since it is a runtime value.
• lang is the language, written exactly as the first word of a fence infostring: 'ts', 'svelte', 'bash', or anything else your Shiki langs include.
• meta is optional and holds the raw fence infostring, so 'twoslash {2-4} file=app.ts' behaves exactly as it would after the language in a markdown fence. Line highlighting, filename bars, twoslash and diff markers all work, because code() runs your fence pipeline.

Dedent is automatic

Code embedded in a call is indented to match where the call sits, and that indentation comes from the surrounding code rather than the snippet. code() therefore strips the common leading whitespace and trims blank lines around the snippet, so the rendered <pre> shows the snippet’s own indentation, flush left. You can write the snippet nested naturally in your code.

Cached, once per build

Rendering goes through the same content-addressed fence cache that markdown fences use, so an identical snippet (same source, lang, meta and config) renders only once per build, and a warm cache skips the work entirely.

Where it fits

code() is for a snippet that lives in a component, such as a feature on a landing page, a UI that shows an example, or a documentation kit. For code inside prose, write a fenced block in your markdown, and for a whole Markdown string, use md. All three produce a region, so they all render through <Region>.