jaspr_markdown 0.1.2 jaspr_markdown: ^0.1.2 copied to clipboard
A Markdown renderer for Jaspr. It lets you use Jaspr components in Markdown. You can import components like MDX.
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