The warning text is visible, but its ::: markers arrive as ordinary characters. Configure the container rule that matches the authored syntax before adding warning styles. CSS cannot turn an unparsed source marker into the intended document structure.
This recipe uses markdown-it-container and a container named warning. It does not assume that every Markdown platform uses the same admonition notation.
Open the complete example · Download the full HTML source
::: warning
Fictional exercise: confirm the tray count before printing labels.
:::
The useful result is a visible warning paragraph in a container, with the word Warning available to read. The color of the border should not carry the whole meaning.
Register the named container
The markdown-it-container README documents the container name, optional validation and rendering functions, and default output. After loading the browser distributions:
const parser = window.markdownit({html: false})
.use(window.markdownitContainer, 'warning');
const readingHtml = parser.render(source);
For the documented default renderer, the named container becomes a div with a warning class. Its contents are parsed as Markdown. Add a reader stylesheet for that class and retain it in the delivered file.
Place an explicit Warning heading or label in your authored content or renderer. If the source contains only a sentence, a class name by itself does not explain the significance to the reader.
Keep other syntaxes distinct
An extension configured for ::: warning should not be described as support for every site's callout format. If your source uses a different notation, either select its corresponding renderer or deliberately convert the source notation.
Keep an unknown container name visible during review. A literal marker is useful evidence that the configured rule did not match. Do not silently strip it and produce a paragraph that looks successfully processed.
The example can compare the configured warning with an unregistered caution container. The first should receive the warning structure; the second should remain ordinary source text unless you explicitly add that rule.
Escape any authored renderer labels
The plugin README demonstrates a custom renderer that escapes a supplied summary with md.utils.escapeHtml. Follow that boundary if your renderer puts source text inside HTML. Disabling raw HTML in the parser is not permission to concatenate arbitrary text into a custom HTML template.
Use a fixed class for a fixed container type. Do not turn a pasted title into an unrestricted attribute or tag name.
The existing markdown-it reading-copy guide deliberately keeps plugins out of its basic conversion. This task adds one specific container rule and checks its unmatched syntax. The general conversion guide covers the surrounding document wrapper.
Keep the original Markdown and converted warning together when discussing the instruction in NOS. Ask whether the tray-count warning belongs beside the printing step. The warning's location and wording matter more than adding another decorative severity color.