A Markdown renderer for Jaspr. It lets you use Jaspr components in Markdown. You can import components like MDX.

Usage

You can add Jaspr components to Markdown by just writing HTML tags with the constructor name as the tag name and the constructor arguments as the attributes. Named constructors are indicated using - instead of .. The types of components to be used in Markdown must be included in the importComponents list of ComponentBlockSyntax. jaspr_markdown is built on top of markdown package, so you can use syntaxes provided by it too.

import 'package:jaspr/jaspr.dart';
import 'package:jaspr_markdown/jaspr_markdown.dart';

class CustomCard extends StatelessComponent {
  const CustomCard({
    required this.foo,
    required this.bar,
    required this.baz,
    this.children,
  }) : _dotted = false;

  const CustomCard.dotted({
    required this.foo,
    required this.bar,
    required this.baz,
    this.children,
  }) : _dotted = true;

  (...)
}

class App extends StatelessComponent {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield Markdown(
      markdown: markdown,
      blockSyntaxes: [
        ComponentBlockSyntax(importComponents: const [CustomCard])
      ],
    );
  }
}

const markdown = '''
# Markdown

## First

<CustomCard foo="foo" bar="1" baz="bool">
  <span>baz</span>
</CustomCard>

## Second

<CustomCard foo="bar" bar="100" baz/>

## Third

<CustomCard-dotted foo="baz" bar="2">
  <p>qux<span>quux</span></p><small>200</small>
</CustomCard-dotted>
''';

See all examples code here.

Notice

jaspr_markdown uses dart:mirrors, so AOT compilation is not supported. Therefore, you need to use JIT compilation when building Jaspr as server mode:

jaspr build -t jit-snapshot