Directive

Code

Inline code rendering — either the code variant for code-tagged spans, or the [mono] modifier to force monospace on any other variant.

Inline code

Wrap inline tokens in <code wrTypography variant="code">.

<p wrTypography>
  Inject the theme service with <code wrTypography variant="code">inject(WrTheme)</code>.
</p>

Inject the theme service with inject(WrTheme).

Force monospace

[mono] flips any variant to the monospace stack — useful when the surrounding element is a <p> or a <span> rather than a <code>.

<p wrTypography [mono]="true">
  Forces monospace on any variant — useful for ids, paths, version tags.
</p>

Forces monospace on any variant — useful for ids, paths, version tags.

Tones in code

Combine variant="code" with any tone for status callouts.

<code wrTypography variant="code" tone="primary">routes.start.installation</code>
<code wrTypography variant="code" tone="success">200 OK</code>
<code wrTypography variant="code" tone="danger">500 Server Error</code>
routes.start.installation200 OK500 Server Error

See also