Flutter HTML转Markdown插件html2md的使用

html2md简介

html2md 是一个用于将HTML转换为Markdown的Dart库。它支持CommonMark、简单的表格和自定义转换规则。

• Pub
• Build status

使用方法

简单示例

import 'package:html2md/html2md.dart' as html2md;

void main() {
  var html = '<h1>HTML2MD Demo</h1>';
  print(html2md.convert(html));
}

在Flutter中使用

在Flutter中，你可以结合flutter_markdown包来渲染Markdown内容：

import 'package:html2md/html2md.dart' as html2md;
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter/material.dart';

class HtmlToMarkdownDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 注意！这并不是最佳实践，你不应该在build方法中调用convert，
    // 转换后的Markdown应存储在状态中。
    var html = '<h1>HTML2MD Demo</h1>';
    var markdown = html2md.convert(html);
    return Scaffold(
      appBar: AppBar(title: Text('HTML to Markdown Demo')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Markdown(data: markdown),
      ),
    );
  }
}

配置选项

你可以通过传递styleOptions、ignore和rules来自定义转换风格：

html2md.convert(html,
    styleOptions: {'headingStyle': 'atx'},
    ignore: ['script'],
    rules: [Rule('custom')]);

默认和可用的样式选项如下：

表格支持

html2md 支持基本的表格转换。例如：

HTML表格源代码：

<table>
    <tr>
        <th>First Header</th>
        <th>Second Header</th> 
    </tr>
    <tr>
        <td>Content Cell</td>
        <td>Content Cell</td>
    </tr>
    <tr>
        <td>Content Cell</td>
        <td>Content Cell</td>
    </tr>
</table>

转换后的Markdown表格：

## 自定义规则

如果你想自定义元素转换，可以编写自己的规则。以下是将Discourse帖子的一键链接部分转换为链接的示例：

HTML代码：
```html
<aside class="onebox">
  <header class="source">
      <img src="https://discoursesite/uploads/default/original/1X/test.png" class="site-icon" width="32" height="32">
      <a href="https://events.google.com/io/program/content?4=topic_flutter&lng=zh-CN" target="_blank" rel="noopener">Google I/O 2021</a>
  </header>
</aside>

Dart代码：

Rule(
  'discourse-onebox',
  filterFn: (node) {
    if (node.nodeName == 'aside' && node.className.contains('onebox')) {
      return true;
    }
    return false;
  },
  replacement: (content, node) {
    var header = node.firstChild;
    var link = header!
        .childNodes()
        .firstWhere((element) => element.nodeName == 'a');
    var href = link.getAttribute('href');
    if (href != null && href.isNotEmpty) {
      return '[$href]($href)'; // 构建链接
    }
    return '';
  },
)

测试

要运行测试，请执行以下命令：

dart run test

特性和Bug

请在issue tracker中提交特性请求和Bug报告。

示例代码

以下是一个完整的示例代码，展示了如何使用html2md：

import 'package:html2md/html2md.dart' as html2md;

void main() {
  var html = '''
    <h1>HTML2MD Demo</h1>

    <p>This demonstrates <a href="https://github.com/jarontai/html2md">html2md</a> – an HTML to Markdown converter in Dart.</p>

    <h2>Usage</h2>

    <pre><code class="language-dart">import 'package:html2md/html2md.dart' as html2md;
    void main() {
      print(html2md.convert('&lt;h1&gt;Hello world&lt;/h1&gt;'));
    }</code></pre>

    <hr />

    <p>It aims to be <a href="http://commonmark.org/">CommonMark</a> compliant, and includes options to style the output. These options include:</p>

    <ul>
      <li>headingStyle (setext or atx)</li>
      <li>horizontalRule (*, -, or _)</li>
      <li>bullet (*, -, or +)</li>
      <li>codeBlockStyle (indented or fenced)</li>
      <li>fence (` or ~)</li>
      <li>emDelimiter (_ or *)</li>
      <li>strongDelimiter (** or __)</li>
      <li>linkStyle (inlined or referenced)</li>
      <li>linkReferenceStyle (full, collapsed, or shortcut)</li>
    </ul>
  ''';
  print(html2md.convert(html));
}

这个示例展示了如何将一段复杂的HTML代码转换为Markdown，并打印出结果。希望这些信息能帮助你在Flutter项目中成功使用html2md插件。