Step 4 of 6
Use Writing Components
Add code, notes, warnings, checklists, and numbered procedures using the reviewed components available to Guide authors.
Use reviewed components only when they make an instruction easier to understand or verify. The examples below show the source first and the rendered result second.
Code and inline code
Always identify the language after the opening fence. Add title="..." when a filename or terminal context helps, and add lineNumbers only when the prose refers to specific lines. Use inline code for filenames, commands, properties, and short identifiers such as guideStepId.
```ts title="guide.ts" lineNumbers
const guide = {
status: 'draft',
section: 'build',
};
```const guide = {
status: 'draft',
section: 'build',
};Informational callout
Use a note for context that matters but does not signal risk.
<Callout title="Preview behavior" type="note">
Draft Guides appear in pull-request previews but not in production.
</Callout>Warning callout
Use warnings sparingly for actions that may break a setup, expose data, weaken security, or produce a misleading result.
<Callout title="Do not publish unverified commands" type="warning">
Run every command against the versions named in the Guide before publication.
</Callout>Checklist
Use a checklist for acceptance criteria or a set of checks, not for chronological instructions.
<Checklist
items={[
'Every command was tested',
'The expected output is described',
'Links point to primary sources',
]}
/>- Every command was tested
- The expected output is described
- Links point to primary sources
Numbered procedure
Use Steps for a short procedure inside one Guide step. The Guide sidebar remains the navigation for the larger sequence.
<Steps
items={[
{ title: 'Run the check', description: 'Execute the documented command.' },
{
title: 'Inspect the result',
description: 'Compare the output with the stated checkpoint.',
},
]}
/>- Run the checkExecute the documented command.
- Inspect the resultCompare the output with the stated checkpoint.
Step 4
Ready to continue?
Mark this step complete when you have finished the checks above.
Checking saved progress…