Skip to content
Blasdoc

Built-in components

Callout, code group and code preview, and how to replace them.

provideBlasdocTheme() registers the components content can use. They are optional, and each can be replaced without touching the runtime.

<blasdoc-callout>

md 
<blasdoc-callout type="warning" title="Keep the closing bracket on the last line">
  Markdown consumes a "greater than" that starts a line.
</blasdoc-callout>
InputValuesDefault
typenote, warning, danger, successnote
titleany textnone

<blasdoc-badge>

A small label, inline in a sentence, a heading or a table cell.

md 
Available since <blasdoc-badge tone="accent">v0.8</blasdoc-badge>, and
<blasdoc-badge tone="warning">experimental</blasdoc-badge>.

Available since v0.8, and experimental.

neutral accent success warning danger
InputValuesDefault
toneneutral, accent, success, warning, dangerneutral

<blasdoc-steps> and <blasdoc-step>

A numbered sequence, for instructions that have an order.

md 
<blasdoc-steps>
 
<blasdoc-step title="Add `button.page.ts`">
 
Create the following file in your project.
 
```angular-ts title="button.page.ts" collapse=5
…
```
 
</blasdoc-step>
 
<blasdoc-step title="Route it">
 
Point a route at the page.
 
</blasdoc-step>
 
</blasdoc-steps>

Add button.page.ts

Create the following file in your project.

button.page.ts 
import { Component } from '@angular/core';
import templateMD from './button.page.md';
 
@Component({ selector: 'app-button-page', templateMD })
export class ButtonPage {}

Route it

Point a route at the page, the way you would at any component.

{ path: 'button', loadComponent: () => import('./button.page').then((m) => m.ButtonPage) }

Write the Markdown

The class is the binding context, so the content reads its members directly.

InputMeaning
titlethe step's heading; a span between backticks renders as code

<blasdoc-code-group>

Several fences as tabs. See Code groups.

<blasdoc-code-preview>

A live component beside its source. See Live previews.

Replacing one

Every fenced block renders through a component you can swap:

ts 
import { BLASDOC_CODE_BLOCK_COMPONENT } from '@blasdoc/angular';
 
providers: [
  provideBlasdocTheme(),
  { provide: BLASDOC_CODE_BLOCK_COMPONENT, useValue: MyCodeBlock },
];

The named components are ordinary registrations, so overriding one is a later provideBlasdoc call with the same name — later registrations win.

ts 
provideBlasdoc({ components: { 'blasdoc-callout': MyCallout } });

What a replacement receives

A component Blasdoc creates can read the IR node it was made from, and the document's context, out of its own element injector:

ts 
import { BLASDOC_DOCUMENT_CONTEXT, BLASDOC_NODE } from '@blasdoc/angular';
 
export class MyCallout {
  private readonly node = inject(BLASDOC_NODE);
  private readonly context = inject(BLASDOC_DOCUMENT_CONTEXT);
}

That is how <blasdoc-code-group> finds its fences: from structure, never from the DOM it was handed.