Dart本体には付属していませんが、Dart公式のパッケージとして、その名もずばりなmarkdownとういパッケージが提供されています。

このパッケージを利用することで非常にお手軽にMarkdownをHTMLにパースすることが出来るようになります。

導入方法

どうやらOSでそのままmarkdownというコマンドで利用することも出来るようですが、今回は普通にDartコードから利用できるようにします。 Dartのパッケージマネージャであるpubを利用しますが、Dartでのプロジェクトの雛形を作るのにはstagehandを利用します。

[koji:dart]$ mkdir mymarkdown
[koji:dart]$ cd mymarkdown 
[koji:mymarkdown]$ stagehand console-full
Creating console-full application `mymarkdown`:
  /home/koji/code/dart/mymarkdown/.gitignore
  /home/koji/code/dart/mymarkdown/CHANGELOG.md
  /home/koji/code/dart/mymarkdown/README.md
  /home/koji/code/dart/mymarkdown/analysis_options.yaml
  /home/koji/code/dart/mymarkdown/bin/main.dart
  /home/koji/code/dart/mymarkdown/lib/mymarkdown.dart
  /home/koji/code/dart/mymarkdown/pubspec.yaml
  /home/koji/code/dart/mymarkdown/test/mymarkdown_test.dart
8 files written.

--> to provision required packages, run 'pub get'
--> run your app using `dart bin/main.dart`.
[koji:mymarkdown]$ 

コレで雛形が出来ました。 次に、pubspec.yamlに以下を追加します。

dependencies:
  markdown: ^2.0.2

追加したらpub getをプロジェクトトップディレクトリで実行すれば準備完了です。

使い方

特に難しいことはありません。 今回はmain.dart内に実際にMarkdownを記述してHTMLに変換してみました。

import 'package:mymarkdown/mymarkdown.dart' as mymarkdown;
import 'package:markdown/markdown.dart';

main(List<String> arguments) {
  // print('Hello world: ${mymarkdown.calculate()}!');
  String markdown = '''
# Hello world
## headline 1
## headline 2
### headline3
# テストだよ
**太字**で*italic*
`print('Hello World');`

\```
void main () {
    print('Hello World');
}
\```
普通のMarkdownなので、  
改行するにはスペース2つ入れだけだよー  
[リンク](https://doitu.info/)  
![画像だよ](https://doitu.info/images/logo.png)

''';

  print(markdownToHtml(markdown));
}

実行すると、ちゃんと以下のようにHTMLに変換されて出力されることが分かります。

<h1>Hello world</h1>
<h2>headline 1</h2>
<h2>headline 2</h2>
<h3>headline3</h3>
<h1>テストだよ</h1>
<p><strong>太字</strong>で<em>italic</em>
<code>print('Hello World');</code></p>
<pre><code>void main () {
    print('Hello World');
}
</code></pre>
<p>普通のMarkdownなので、<br />
改行するにはスペース2つ入れだけだよー<br />
<a href="https://doitu.info/">リンク</a><br />
<img alt="画像だよ" src="https://doitu.info/images/logo.png" /></p>

Dart自体がMarkdownパーサを用意してくれているので、AngularDartなどではこのパッケージを利用してクライアントにMarkdownを入力してもらってそれをHTMLに変換して表示する、ということが簡単にできそうです。

おまけ

単純にHTMLは文字列なので、以下のようにすればヘッダーだけ取得したり出来ます。

  final _headerPattern = RegExp(r'^<h[1-6]>.*</h[1-6]>$');
  String html = markdownToHtml(markdown);
  html.split('\n').where((String line) => _headerPattern.hasMatch(line)).forEach((String line) {
      print(line);
      print("---");
  });