Deprecated

This package is now deprecated and no longer maintained.

Jaspr now has an official package for handling content, including Markdown, called jaspr_content. It is recommended to migrate to jaspr_content for future projects.

For migration examples, you can refer to the following links:

• https://github.com/siesdart/jaspr-portfolio/blob/main/apps/portfolio/lib/components/markdown_article.dart
• https://github.com/siesdart/jaspr-portfolio/blob/main/apps/portfolio/lib/components/sections/skill.dart

---

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
  Component build(BuildContext context) {
    return 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