Skip to main content

Foundations

CodeSnippet

Render inline or block code examples with beautiful syntax highlighting. Perfect for showing off your elegant, bug-free (hopefully) code.

Curated demo

Highlighted TypeScript example
const publishTag = "next";

console.log(`Publishing Snurble with the ${publishTag} dist-tag`);

Reference

Render inline or block code examples with beautiful syntax highlighting. Perfect for showing off your elegant, bug-free (hopefully) code.

  • Use block mode for commands and copyable examples. Because let's face it, we all just copy-paste from documentation anyway.
  • Keep snippets focused on the main happy path. Don't include 50 lines of boilerplate if you don't have to.
  • Make sure the language prop matches the code, or the syntax highlighting will look like a modern art masterpiece (and not in a good way).

Example snippet

<CodeSnippet variant="block" language="ts" code={snippet} />