Site code reference

Showing Markdown

How to show a CMS Markdown field with the Markdown component, get its plain text, and restyle code blocks.

A CMS Markdown field is shown with the <Markdown> platform component:

---
import Markdown from '@starjay/design-system/components/cms/Markdown.astro'
---

<Markdown value={post.body} class="flex flex-col gap-4 text-lg text-ink-700" />

Prop	What it does
`value`	The Markdown field
`class`	Classes for the block's wrapper `<div>`

It works anywhere the field appears: at the top level, inside a list ({post.sections.map((block) => <Markdown value={block.markdown} />)}), or in a component that receives the field as a prop.

The Markdown is converted when the item is saved. HTML typed inside it shows as text, and links and images keep only safe destinations.

The component's content is edited in the CMS, not on the canvas. On the canvas, <Markdown> is locked; only its class can change.

Plain text for excerpts

For the field's words without formatting (an excerpt, a card summary) use .text:

<p class="line-clamp-3 text-ink-600">{post.body.text}</p>

Styling the content

The elements inside the block are plain HTML (h2, p, ul, blockquote and so on), so the site's element defaults style them. For styles that apply only inside Markdown, target the wrapper with a global style in plain CSS:

<style is:global>
  .post-body h2 { margin-top: 2.5rem; color: var(--color-ink-900); }
  .post-body a { text-decoration: underline; }
</style>

Code colors

Code blocks come out with their words tagged and a default color scheme that follows the site's light or dark color scheme. These are the only default colors Starjay provides, and any site rule overrides them. To restyle code, set Astro's --astro-code-* variables anywhere above the block, for example in src/styles/ or a global style:

:root {
  --astro-code-background: var(--color-ink-950);
  --astro-code-foreground: var(--color-surface-50);
  --astro-code-token-keyword: var(--color-accent-300);
  --astro-code-token-string: var(--color-accent-200);
}