platform/packages/markdown/README.md

107 lines
3 KiB
Markdown
Raw Normal View History

2021-06-21 06:33:18 +00:00
# Angel3 Markdown
2017-08-13 04:24:38 +00:00
2021-06-21 06:33:18 +00:00
[![version](https://img.shields.io/badge/pub-v3.0.0-brightgreen)](https://pub.dartlang.org/packages/angel3_markdown)
[![Null Safety](https://img.shields.io/badge/null-safety-brightgreen)](https://dart.dev/null-safety)
[![Gitter](https://img.shields.io/gitter/room/angel_dart/discussion)](https://gitter.im/angel_dart/discussion)
2017-08-13 04:24:38 +00:00
2021-06-21 06:33:18 +00:00
[![License](https://img.shields.io/github/license/dukefirehawk/angel)](https://github.com/dukefirehawk/angel/tree/angel3/packages/markdown/LICENSE)
Markdown view generator for Angel3.
With this plug-in, you can easily serve static sites without doing more than writing simple Markdown. Thus, it is a friendly choice for writing API documentation or other tedious HTML-writing tasks.
## Installation
2017-08-13 04:24:38 +00:00
In your `pubspec.yaml`:
```yaml
dependencies:
2021-06-21 06:33:18 +00:00
angel3_framework: ^4.0.0
angel3_markdown: ^3.0.0
2017-08-13 04:24:38 +00:00
```
2021-06-21 06:33:18 +00:00
## Usage
It's very straightforward to configure an Angel server to use Markdown. Keep in mind to use `package:file` instead of `dart:io`:
2017-08-13 04:24:38 +00:00
```dart
configureServer(Angel app) async {
2019-04-11 16:19:12 +00:00
var fs = LocalFileSystem();
2017-08-13 04:24:38 +00:00
await app.configure(markdown(
// The directory where your views are located.
2019-04-11 16:19:12 +00:00
fs.directory('views'),
2017-08-13 04:24:38 +00:00
));
}
```
You can then generate HTML on-the-fly in a request handler.
Assuming your view directory contained a file named `hello.md`, the
following would render it as an HTML response:
```dart
configureServer(Angel app) async {
app.get('/hello', (res) => res.render('hello'));
}
```
2021-06-21 06:33:18 +00:00
`package:angel3_markdown` by default searches for files with a `.md` extension; however,
2017-08-13 04:24:38 +00:00
you can easily override this.
## Interpolation
2021-06-21 06:33:18 +00:00
`angel3_markdown` can interpolate the values of data from `locals` before building the Markdown.
2017-08-13 04:24:38 +00:00
For example, with the following template `species.md`:
```markdown
# Species: {{species.name}}
The species *{{species.genus.name}} {{species.name}}* is fascinating...
```
You can render as follows:
```dart
requestHandler(ResponseContext res) {
return res.render('species', {
'species': new Species('sapiens', genius: 'homo')
});
}
```
To disable interpolation for a single bracket, prefix it with an `@`, ex: `@{{raw | not_interpolated | angular}}`.
## Templates
2021-06-21 06:33:18 +00:00
2017-08-13 04:24:38 +00:00
Markdown is frequently used to build the *content* of sites, but not the templates.
You might want to wrap the content of pages in a custom template to apply pretty
CSS and JS, etc:
```dart
configureServer(Angel app) async {
await app.configure(
markdown(
// The directory where your views are located.
2019-04-11 16:19:12 +00:00
fs.directory('views'), template: (content, Map locals) {
2017-08-13 04:24:38 +00:00
return '''<!DOCTYPE html>
<html>
<head>
<title>${locals['title']} - My Site</title>
</head>
<body>
$content
</body>
</html>
''';
}),
);
}
```
The `template` function will have access to whatever values were passed to the renderer,
or an empty `Map`.
## Enhancing Markdown
2021-06-21 06:33:18 +00:00
2017-08-13 04:24:38 +00:00
You can pass an `extensionSet` to add additional features to the Markdown renderer.
2021-06-21 06:33:18 +00:00
By default, this plug-in configures it to enable Github-flavored Markdown.