Code sample

Read-only highlighted code with a copy button.

select date_trunc('day', created_at) as day, sum(total) as revenue from shop.public.orders group by 1; marmot query run --source shop-postgres "select 1" curl -X POST …/api/v1/query

<mm-code-sample language="sql" filename="queries/revenue.sql" highlight="2-3">
  select date_trunc('day', created_at) as day,
         sum(total) as revenue
  from shop.public.orders
  group by 1;
</mm-code-sample>

<mm-code-tabs label="Ways to run this query">
  <mm-code-sample tab="CLI" language="bash">marmot query run --source shop-postgres "select 1"</mm-code-sample>
  <mm-code-sample tab="API" language="bash">curl -X POST …/api/v1/query</mm-code-sample>
</mm-code-tabs>

Guidance

Code samples show read-only code in documentation and marketing: the warm near-black code ground in both themes, Geist Mono at mono-editor, and a copy button that confirms with "Copied". There are no window dots and no language badge; an optional filename sits above the block in mm-text-2, outside the dark ground.

Highlighting is a small built-in tokenizer for SQL, shell, JSON, YAML, TypeScript and JavaScript, HCL and Go. It runs in render(), so the sample is highlighted during SSR too. Give the code in code, or as the element's text (indentation is removed). Long lines scroll, or wrap with wrap (use it for logs in narrow places such as drawers). With a filename, Copy sits beside it so the code keeps its full width; without one, Copy keeps its own column at the end of the block, so code never runs under it. Use highlight="3,5-7" to pick out lines. Code always reads left to right, even in RTL pages.

Properties

Property	Attribute	Type	Default	Description
language	language	string	'text'	sql, bash/shell, json, yaml, typescript/javascript, hcl, go or text.
code	code	string	''	The code. Defaults to the element's text, de-indented.
filename	filename	string	''	Optional filename or path, shown above the block.
label	label	string	''	Accessible name for the block. Defaults to the filename, or "SQL sample" and so on.
highlight	highlight	string	''	Lines to highlight, 1-based: 3, 2,4-6.
wrap	wrap	boolean	false	Wraps long lines instead of scrolling.
lineNumbers	line-numbers	boolean	false	Shows line numbers.
noCopy	no-copy	boolean	false	Hides the copy button, for fragments that are not meant to be pasted.
tab	tab	string	''	Tab label when the sample sits in mm-code-tabs.
accessibleName		string		The accessible name of the block.

Events

Event	Detail	Description
mm-copy	CustomEvent<{ value: string }>	The code was copied (from the inner mm-copy-button).

Slots

Slot	Description
Default	The code as plain text, used when code is not set.

CSS parts

Part	Description
filename	The filename caption.
block	The dark code ground.
pre	The scrolling pre.
copy	The copy button.

Examples

Every state of mm-code-sample in Storybook, with keyboard and screen reader tests.