` on screen, as text. Everything in the document below is hostile; all of it renders as prose.
_Also shown on the page: hostile.md._
```angular-html
![]()
` through and call it a feature.
- **Indented (four-space) code blocks** — in a document that also has nested lists, indentation is structural, and the ambiguity resolves against the author almost every time: a wrapped list continuation becomes a code block. Fences are unambiguous, and fences are what generators emit.
- **Setext headings** (`===` / `---` under a line) — a line of dashes is a thematic break here, always. The dual meaning is a well-known trap and the underline form is essentially unused in generated markdown.
- **Reference links, footnotes, definition lists** — they need a second pass over a document that, mid-stream, is not all there yet.
```markdown
Four spaces is not a code block:
this is still a paragraph
A line of dashes under text is a rule, not a heading
---
A [reference link][1] needs a second pass over the whole document, so it stays text.
[1]: https://ngwr.dev
And `snake_case_name` in prose survives: snake_case_name.
```
## Streaming
`[streaming]` says the source is a PREFIX of a longer document, and that changes what an unmatched marker means. An open fence renders as code instead of waiting for its closer; a half-typed `**bold` renders bold instead of flashing asterisks that vanish one chunk later; a trailing `[label](htt` is withheld until it resolves. The host also gains `.wr-markdown--streaming`, which paints a caret after the last block — CSS, so it costs no node. The demo types the document below in uneven chunks; watch the fence, the emphasis and the caret. `prefers-reduced-motion` is honoured: with it set, the document arrives whole and the caret never appears.
_Also shown on the page: TS._
```angular-html
` with the info string reflected as `data-language`. Colour is opt-in: `provideWrMarkdownHighlighter()` takes a function returning coloured SPANS — not an HTML string — so a highlighted block inside an untrusted document is still never parsed as HTML. Every other Angular markdown renderer takes highlighted HTML and hands it to `[innerHTML]` through `bypassSecurityTrustHtml`, which puts a hole in the one component whose entire input is untrusted. The highlighter may be async and may return `null` for a language it does not know; both render the block as plain text. This site provides a shiki adapter — the blocks below are coloured by it.
_Also shown on the page: answer.md._
```angular-html
> = { ts: 'typescript', bash: 'bash', /* … */ };
const THEMES = { light: 'github-light-high-contrast', dark: 'github-dark-high-contrast' } as const;
export const shikiMarkdownHighlighter: WrMarkdownHighlighter = async (code, language) => {
const lang = language ? LANGUAGES[language.toLowerCase()] : undefined;
// Unknown grammar, or the prerender pass in Node: plain text either way.
if (!lang || typeof window === 'undefined') return null;
const highlighter = await getHighlighter();
const { tokens } = highlighter.codeToTokens(code, {
lang,
themes: THEMES,
// One colour value that resolves per theme, so a cached span stays correct
// when the theme flips — the contract has no theme dimension to re-ask on.
defaultColor: 'light-dark()',
colorsRendering: 'none',
});
return tokens.map(line => line.map((token): WrHighlightSpan => ({
text: token.content,
color: token.htmlStyle?.['color'],
})));
};
```
```typescript
import { provideWrMarkdownHighlighter } from 'ngwr/markdown';
bootstrapApplication(App, {
providers: [provideWrMarkdownHighlighter(shikiMarkdownHighlighter)],
});
```
Two notes from writing that adapter. It answers `null` when there is no `window`: the showcase prerenders every route in Node, where nothing is waiting for colour and the promise would resolve after the HTML was already written — so the static page ships plain code and gains colour on hydration. And the colour it returns is a single `light-dark(…)` value rather than a hex per theme, because the contract has no theme dimension and the library caches an answer under `(language, code)`; letting the browser resolve the pair against `color-scheme` keeps one cached span correct in both themes.
## Copy button
`copyable` puts a copy button on code blocks — and only on CLOSED ones. Mid-stream the code is not all there, and a button that copies half a snippet is worse than no button, so it appears when the closing fence does. It is revealed on hover of the block and always for keyboard focus (an opacity-gated control that never appears without a pointer is unreachable), and it is always visible where hover does not exist. The accessible name comes from `copyLabel` / `copiedLabel`, both routed through the `ngwr/i18n` `markdown.*` catalog.
```angular-html