Skip to content
Blasdoc

Installation

Packages, providers and the build integration, step by step.

Blasdoc is a small set of packages. Install the two you always need, and add the rest when you want what they do.

Packages

npm install @blasdoc/core @blasdoc/angular
PackageResponsibilityOptional
@blasdoc/coreParsing, the IR, the source model, diagnostics. No Angular.no
@blasdoc/angularRegistry, providers, the runtime renderer.no
@blasdoc/highlightShiki highlighting, converted to IR nodes.yes
@blasdoc/componentsHeadless primitives — state and behaviour, never a theme.yes
@blasdoc/theme-defaultThe optional default UI, driven by CSS custom properties.yes

Add highlighting and the theme when you want code blocks that look like the ones on this site:

bash 
npm install @blasdoc/highlight @blasdoc/components @blasdoc/theme-default

Providers

ts 
import { provideBlasdoc } from '@blasdoc/angular';
import { provideBlasdocHighlight } from '@blasdoc/highlight';
import { provideBlasdocTheme } from '@blasdoc/theme-default';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideBlasdoc(),
    provideBlasdocHighlight({
      themes: { github: { light: 'github-light', dark: 'github-dark' } },
      defaultTheme: 'github',
    }),
    provideBlasdocTheme(),
  ],
};

Importing .md files

A page's template is a Markdown file imported as a string. Tell the build how to load it.

Angular's own builder has a loader option:

json 
{
  "targets": {
    "build": {
      "options": {
        "loader": { ".md": "text" }
      }
    }
  }
}

On a Vite-based build — Vitest, Analog — use the plugin:

ts 
import { blasdoc } from '@blasdoc/core/build';
 
export default defineConfig({ plugins: [blasdoc(), angular()] });

And let TypeScript know what the import resolves to:

ts 
/// <reference types="@blasdoc/core/md" />

templateMD in @Component

Declaring a page's Markdown inside @Component needs Blasdoc's build transform, because Angular's compiler drops metadata it does not know. Swap one word in angular.json:

json 
{
  "build": { "builder": "@blasdoc/build:application" },
  "serve": { "builder": "@blasdoc/build:dev-server" }
}

The options are Angular's own and pass through untouched. See Build integration for what it does and what it costs, and Pages for the form that needs no build step at all.

Next

Quick start puts all of it together in three files.