synthetic

CodeBlock

A code sample with a copy button, or rendered Markdown.

Reconnect handlerLanguage label, code and copy

tsx

import { syncTasks } from "./sync";

export async function onReconnect(crewId: string) {
  const pending = await syncTasks(crewId);
  return pending.length;
}

Markdown

Release notes

Offline sync for Tideline mobile is in review.

What changed

Tasks keep working with no signal
The inbox sends one digest a day

Ship it on 7 Nov.

No copy button

bash

tideline export --week 19-oct

Long line

bash

tideline export --project harbour --from 3-aug --to 19-oct --format csv --out ./exports/harbour-rebrand-weekly.csv

In context

Docs cardAn install step in a help card

Install the crew CLI

Leo Santos uses it to export the rota to payroll.

bash

npm install -g @tideline/cli
tideline login

Props

Prop	Type	Required	Default
`code`	`string`	Yes	—
`language`	`string \| undefined`	No	—
`hideCopyButton`	`boolean \| undefined`	No	false
`onCopyResult`	`((ok: boolean) => void) \| undefined`	No	—
`markdown`	`boolean \| undefined`	No	false

Plain and markdown modes

Plain mode is preformatted text with a one-click copy button and visible confirmation; there is no syntax highlighting. markdown renders headings, lists, blockquotes, fenced code and inline bold, italic, code and links with a small built-in parser (no tables, nested lists or raw HTML). The copy button always copies the original source. language is ignored when markdown is set.

data-rebar-* attributes

data-rebar-component="code-block" on the root; data-rebar-part is "header", "language", "copy-button", "pre" (plain mode), "markdown" (markdown mode).

Migrating to Ant Design

Not codemod-covered. AntD ships no code-block component; a copyable sample typically migrates to a small wrapper around Typography.Text code plus a clipboard button, or a syntax-highlighting library.