Flutter Markdown渲染插件markd的使用

Flutter Markdown渲染插件markd的使用

简介

这是一个用于自定义Markdown语法的dart-markdown库的分支。它提供了多种自定义功能，使得开发者可以更容易地定制Markdown解析器。

特性差异

• 带复选框的列表：

  • 在Markdown中添加data-line属性来指定复选框所在的行。

• TableSyntax：

  • 引入了escapeFoward用于跳过不应被视为列分隔符的管道字符（|）。
  • 引入了processCellContent用于预处理单元格内容。

• 链接增强：

  • 引入了LinkMapper，允许应用程序映射到特定的应用程序链接。
  • 引入了parseInlineLink用于解析内联链接中的URL。

• 易于定制：

  • 提供了Document.be, InlineParser.be, BlockParser.be, blockParserBuilder 和 inlineParserBuilder，使得应用程序可以预先准备语法解析器。
  • 引入了Document.options以提供特定应用的信息以便更精细的控制。
  • 引入了InlineSyntax.matches用于简化覆盖操作。
  • 引入了FencedCodeBlockSyntax.getLanguageClass用于生成自定义CSS类。
  • 引入了CondensedHtmlRenderer和TextRenderer用于更轻松地定制CSS。
  • DelimiterRun.tryParse依赖于SimpleParser而不是InlineParser。

资源

• API 参考
• Git 仓库

使用者

• Quire - 一个直观的、协作的多级项目管理工具。
• Keikai - 一个用于大数据的高级电子表格。

使用方法

首先，我们需要在pubspec.yaml文件中添加markd依赖：

dependencies:
  markd: ^2.0.2

然后，我们可以在Dart代码中使用markd库将Markdown文本转换为HTML。

import 'package:markd/markdown.dart';

void main() {
  print(markdownToHtml('Hello *Markdown*'));
  //=> <p>Hello <em>Markdown</em></p>
}

语法扩展

markd支持一些Markdown扩展，这些扩展超出了原始的Perl Markdown实现。默认情况下，这些扩展符合CommonMark规范。可以通过在markdownToHtml函数的blockSyntaxes或inlineSyntaxes参数中指定一个扩展语法数组来启用单个扩展。

目前支持的内联扩展语法有：

• InlineHtmlSyntax() - 大致符合CommonMark对“原始HTML”的定义。

目前支持的块扩展语法有：

• const FencedCodeBlockSyntax() - 类似Pandoc和PHP Markdown Extra用户熟悉的代码块。
• const HeaderWithIdSyntax() - ATX样式标题具有生成的ID，用于链接锚点（类似于Pandoc的auto_identifiers）。
• const SetextHeaderWithIdSyntax() - Setext样式标题具有生成的ID，用于链接锚点（类似于Pandoc的auto_identifiers）。
• const TableSyntax() - 类似GitHub、PHP Markdown Extra和Pandoc用户熟悉的表格语法。

例如：

import 'package:markd/markdown.dart';

void main() {
  print(markdownToHtml('Hello <span class="green">Markdown</span>',
      inlineSyntaxes: [InlineHtmlSyntax()]));
  //=> <p>Hello <span class="green">Markdown</span></p>
}

扩展集

为了方便扩展管理，你可以直接指定一个扩展集。markdownToHtml()和Document()都接受名为extensionSet的参数。目前有四个预定义的扩展集：

• ExtensionSet.none：不包括任何扩展。在这种情况下，Markdown文档将使用一组默认的块和内联语法解析器进行解析，这与原始Perl Markdown实现的解析方式非常接近。

• ExtensionSet.commonMark：除了默认解析器之外，还包括两个扩展，使解析输出更接近CommonMark规范：

  • 块语法解析器：const FencedCodeBlockSyntax()
  • 内联语法解析器：InlineHtmlSyntax()

• ExtensionSet.gitHubFlavored：除了默认解析器之外，还包括五个扩展，使解析输出更接近GitHub Flavored Markdown规范：

  • 块语法解析器：const FencedCodeBlockSyntax(), const TableSyntax()
  • 内联语法解析器：InlineHtmlSyntax(), StrikethroughSyntax(), AutolinkExtensionSyntax()

• ExtensionSet.gitHubWeb：包括八个扩展。在gitHubFlavored扩展集的基础上，增加了块语法解析器HeaderWithIdSyntax和SetextHeaderWithIdSyntax，它们为标题添加id属性，并且增加了一个内联语法解析器EmojiSyntax用于解析GitHub风格的表情符号：

  • 块语法解析器：const FencedCodeBlockSyntax(), const HeaderWithIdSyntax(), const SetextHeaderWithIdSyntax(), const TableSyntax()
  • 内联语法解析器：InlineHtmlSyntax(), StrikethroughSyntax(), EmojiSyntax(), AutolinkExtensionSyntax()

自定义语法扩展

你可以创建并使用自己的语法扩展。

import 'package:markd/markdown.dart';

void main() {
  var syntaxes = [TextSyntax('nyan', sub: '~=[,,_,,]:3')];
  print(markdownToHtml('nyan', inlineSyntaxes: syntaxes));
  //=> <p>~=[,,_,,]:3</p>
}