Skip to content

Macros

md

A Markdown string, rendered at build time through your app's own markdown pipeline (the same remark/rehype plugins and highlighted fences) and inlined as a static region, for prose that lives in a component.

On this page

import.meta.og.md(text) renders a Markdown string at build time and inlines it as a static region. It runs the text through your app’s own markdown pipeline, with the same remark and rehype plugins and the same Shiki fences, so md('# Hello') in a component renders exactly like the same Markdown in a .md document.

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

  const intro = import.meta.og.md(`
    ## Getting started

    Install, then add the plugin. A fenced block highlights too:

    \`\`\`ts
    export const csr = false;
    \`\`\`
  `);
</script>

<Region of={intro} />

Because md() runs your document pipeline, it handles everything that pipeline does, including headings with generated ids, lists, emphasis, links and highlighted code fences. The result is a region, rendered with <Region of={…} />, and it ships as HTML with no client JS.

The rules

  • text is a static string or template literal. A ${…} interpolation is a build error, because it is a runtime value the build cannot resolve. Dedent is automatic, as it is in code.
  • Static prose only. md() is for prose and fenced code. If the Markdown compiles to something dynamic (an island import, a <script>, a component tag, a Svelte expression), the build fails, because a region made this way is static. For live, interactive content, use a real component, or a .svx collection, where islands are allowed.

code vs md

The two are closely related. code renders one highlighted snippet with a language and fence meta, while md renders a whole Markdown document with headings, lists, prose and fences inside it. Use code when you have exactly one block to show and md when you have a passage. Both return a region, so they render the same way.