markdown转html_用Flutter做个简易的Markdown解析器吧~

最新推荐文章于 2024-05-13 09:30:13 发布
最新推荐文章于 2024-05-13 09:30:13 发布
阅读量554 收藏
点赞数
文章标签： markdown转html

31c616cc4337815fabf01c9baad642be.png

写在开头

  1. 以下内容所用术语并不一定是标准的, 流程也不一定是专业的, 我仅仅是尽量表述明白, 请轻喷, 谢谢各位大哥大姐头了, 多原谅一下这个彩笔.
  2. 这是个很基础的小工程, 没什么技术含量, 看完以后你可能会觉得: 就这? 对...就这...
  3. 这个文章可能会稍微有点长, 其中的一些设计部分都是我自己瞎搞的, 也许并不是精通编译原理或者是其他领域的大哥大姐头们能够接受的, 但是也是自己尝试了很久, 使用了很多办法最后找到的一条比较适合的. 总之也请原谅我, 感激不尽.

嘛我实现的最终效果长这样, 如果您看着动心, 不妨耐着性子看下去吧...

29050a248447a6b8fe882ca1971ea4be.png

e17693d6ef3be7a05a6c22c150b6d8a7.png

问题引入

Flutter的Markdown解析一直是一大痛点. 虽然官方已经有flutter_markdown这个插件帮助我们搞定Markdown文本到Widget的转换了, 但是它并不是非常令人满意, 而且现在似乎还有止步不前的趋势. 什么代码块的语法高亮啊, 一些简单的html标签, 比如字体的样式显示, 都没法得到很好地支持, 可是在flutter_markdown的代码里, 却是有着不少Markdown标记转html标签再做Widget转换的成分, 想必在这样的基础上实现颜色支持应该也不是一件难事的说...

在这样的使用需求下, 我曾尝试用正则表达式直接替换掉flutter_markdown的代码块部分, 直接用dart packages上一个很优秀的高亮轮子flutter_highlight来搞定代码高亮, 效果很显著, 显示效果就像演示图的第一张那样, 但是别人的轮子终究不是自己的, 每当自己提出更新的需求时, 功能的添加就变得越发的困难, 所以最后, 我还是决定自己写一个轮子, 这个轮子要求有如下几点:

  1. 直接通过解析Markdown内部的标签转换成Flutter的组件, 也就是从原来flutter_markdown的这种流程:

e34a64c921b9004026ee453036a47c71.png

变成这样的流程:

41ee01fb915d09cf67fac59dd3302d6b.png

2. 所有的Markdown标记必须实现灵活的解析, 这就是说, 再块级标记上遵循一定程度的优先级顺序, 而在每一行的字体样式等方面采用灵活的解析和转换模式, 这一点几乎是废话

3. 必须创建一个支持解析标记的列表或者字典, 所有的标记识别和转换必须独立运作. 也就是说, 可以直接通过简单的增加和减少解析功能, 来实现对解析器的拓展, 而不影响插件整体的稳定性, 大概就像这样:

4d9282156f5bea2734e67c8dced12781.png

开始整活

如何实现Markdown文本直接转换成Flutter Widget?

使用正则表达式匹配对应的标记, 例如Markdown标题, 然后递归转换文本为Widget (确切来说, 是InlineSpan而不是Widget, 但是说Widget比较方便, 后面都说Widget了). 以正则表达式为例, 流程如下:

  1. 正则查找满足:

1) 开头是n的

2) n后可以有很多个空格;

3) 一直读取到下一个n

2. 找出"#"的后一位置, 取出内容, 递归解析成Widget

代码上的实现是这样的:

查找Markdown内"标题"的部分

// support.dart
{
  r"n *###### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 0)
              .build(context),
  r"n *##### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 5)
              .build(context),
  r"n *#### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 10)
              .build(context),
  r"n *### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 15)
              .build(context),
  r"n *## [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 20)
              .build(context),
  r"n *# [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 25)
              .build(context),
}

转换成Widget的部分

// renderer.dart
class Header extends Renderer {
  final String src;
  final int start;
  final int end;
  final double size;
  final CSS css;

  const Header({
    Key key,
    @required this.src,
    @required this.start,
    @required this.end,
    @required this.size,
    @required this.css,
  }) : super(src: src, start: start, end: end, css: css);

  @override
  InlineSpan build(BuildContext context) {
    // 假设提取的字符串是: "###### H6"

    // 1. 定位"#####"的位置
    RegExp symbol = RegExp(r"#+");
    var match = symbol.firstMatch(src.substring(start, end));
    int symbolEnd = start + match.end; // 最后一个"#"的后一位

    // 2. 提取关键字符串"H6"
    String keyStr = src.substring(symbolEnd, end).trim();

    // 3. 定义Header的叠加样式
    CSS headerCSS = CSS.copyFrom(css);
    headerCSS.fontSize = size + css.fontSize;
    headerCSS.isBold = true;

    return TextSpan(
      children: [
        Analyser(
          text: src.substring(0, start),
          css: css,
        ).parseTextSpan(context),
        TextSpan(text: "n"),
        Analyser(
          text: keyStr,
          css: headerCSS,
        ).parseTextSpan(context),
        Analyser(
          text: src.substring(end, src.length),
          css: css,
        ).parseTextSpan(context),
      ],
    );
  }
}

如何实现递归解析Markdown标记并转换成Widget呢?

我自己构想了一个结构, 它由一个解析器(analyser)和一个转换器(renderer)构成(抱歉, 之前因为没有仔细想两个的名字, 源码里面就直接是analyser.dart和renderer.dart了, 这里就索性这么写吧), 解析器先在support.dart, 也就是这里

// support.dart
{
  r"n *###### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 0)
              .build(context),
  r"n *##### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 5)
              .build(context),
  r"n *#### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 10)
              .build(context),
  r"n *### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 15)
              .build(context),
  r"n *## [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 20)
              .build(context),
  r"n *# [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 25)
              .build(context),
}

通过遍历每一个key, 查找出符合要求的match, 并对这些match做一些无脑的排序处理(后面会说的, 请不要在意, 只是无脑的排序处理罢了), 然后对找到的最优的match进行转换, 也就是直接访问key下的value值 Header(src: src, start: start, end: end, css: css, size:0).build(context), 然后在Header内部, 由示例代码

// renderer.dart
class Header extends Renderer {
  final String src;
  final int start;
  final int end;
  final double size;
  final CSS css;

  const Header({
    Key key,
    @required this.src,
    @required this.start,
    @required this.end,
    @required this.size,
    @required this.css,
  }) : super(src: src, start: start, end: end, css: css);

  @override
  InlineSpan build(BuildContext context) {
    // 假设提取的字符串是: "###### H6"

    // 1. 定位"#####"的位置
    RegExp symbol = RegExp(r"#+");
    var match = symbol.firstMatch(src.substring(start, end));
    int symbolEnd = start + match.end; // 最后一个"#"的后一位

    // 2. 提取关键字符串"H6"
    String keyStr = src.substring(symbolEnd, end).trim();

    // 3. 定义Header的叠加样式
    CSS headerCSS = CSS.copyFrom(css);
    headerCSS.fontSize = size + css.fontSize;
    headerCSS.isBold = true;

    return TextSpan(
      children: [
        Analyser(
          text: src.substring(0, start),
          css: css,
        ).parseTextSpan(context),
        TextSpan(text: "n"),
        Analyser(
          text: keyStr,
          css: headerCSS,
        ).parseTextSpan(context),
        Analyser(
          text: src.substring(end, src.length),
          css: css,
        ).parseTextSpan(context),
      ],
    );
  }
}

我们可以很直观的看出, 只是按照一定规则切出了其中的有效部分, 并把它再放入analyser中分析, 递归处理, 与此往复, 最后将整个Markdown内容转换为Widget.

这样一个流程可以画图为:

e41eb7fb251242eb0856c980020f60ce.png

关于analyser

analyer做的事情基本上只有两件

  1. 遍历support的所有key并做正则查询
  2. 找到最前的一个Markdown的标记, 传入renderer做转换工作

核心代码如下

InlineSpan parseTextSpan(BuildContext context) {
    int start = text.length;
    int end = 0;
    String finPtrn;
    for (var pattern in supports.keys) {
      RegExp regExp = RegExp(pattern);
      var firstMatch = regExp.firstMatch(text);
      if (firstMatch == null) continue;
      if (firstMatch.start < start ||
          (firstMatch.start == start && firstMatch.end > end)) {
        start = firstMatch.start;
        end = firstMatch.end;
        finPtrn = pattern;
      }
    }
    if (finPtrn != null) {
      return supports[finPtrn](text, start, end, css, context);
    }

    return (inheritedWidgetBuilder != null)
        ? inheritedWidgetBuilder(text)
        : TextSpan(
            text: text,
            style: css.castStyle(),
          );
  }

只有这么几行, 只不过是对每一个match的结果做了一个比较, 找到第一个匹配到的标记, 然后交由support -> key → value(renderer) 来做转换工作, 如果最后没能匹配到任何标记, 就开始返回转换结果.

关于renderer

这个基类接收传入的待解析的字符串src, 找到的Markdown的标记起始位置start和结束位置end, 以及一个叠加样式css(这个后面会说, Flutter自己也有这样的东西, 但我还是自己写了一个, 请不必过多在意), 它通过build方法, 转换src的内容为Widget, 返还给analyser, 然后就是反复递归递归了. 总的来说, renderer就是个用来触发递归转换的类, 通过截取到的Markdown标记做进一步的字符串切割处理, 并把它们组装成一个个子Widget.

abstract class Renderer {
  final String src;
  final int start;
  final int end;
  final CSS css;

  const Renderer({
    Key key,
    @required this.src,
    @required this.start,
    @required this.end,
    @required this.css,
  });

  InlineSpan build(BuildContext context);
}

关于样式的叠加问题

之所以把这个问题单独拿出来说, 是因为它并不影响到本Markdown解析器整体流程的理解, 但又在这之中起到了举足轻重的作用. 这个CSS是我自己定义的类, 它的作用顾名思义就是做样式的叠加.

在深入了解前, 我们思考一个这样的问题:

如果我们在字体加粗的外部或内部嵌套代码段标记, 那么优先解析完外层的标记以后, 要如何将这个外层的代码段标记和内层的文本加粗标记最终转换的Widget确定下来呢?

80e287f560415c79aca6fba10be256a6.png

因为这样一个原因, 说实话我这个笨脑瓜子还想了好久好久, 最后我决定传入一个叫做CSS的东西进去, 它可以在每一层递归的时候不断的积累文本的样式, 当我们解析到代码段时, 就直接把css设定为代码段的样子, 然后再把这个css传入子组件内, 子组件拿到之前的css, 再在它的基础上叠加新的样式, 就类似于这样

// 定义Header的叠加样式
CSS headerCSS = CSS.copyFrom(css);
headerCSS.fontSize = size + css.fontSize;
headerCSS.isBold = true;
// code...
Analyser(
  text: keyStr,
  css: headerCSS, // 看这里
).parseTextSpan(context),

插件可拓展性的研究

这个轮子制作的一大核心目的就是实现高度的可拓展性, 而我也为此做出了很多的尝试, 最后确定了support.dart. 这个文件里面写着的就是正则表达式以及每个正则表达式下转换为Widget的方法. 通过这样的设计可以使Markdown的解析器得到高度拓展. 目前的support如下:

import 'dart:io';
import 'package:flutter/material.dart';

import './css.dart';
import './renderer.dart';

/// 解析支持表, 支持渐进式开发. 当需要渲染新的Markdown标记时, 只需要实现基于Renderer的渲染类即可
final Map<String, dynamic> supports = {
  // YAML
  r"n *-{3} *n[sS]*?n *-{3} *":
      (String src, int start, int end, CSS css, BuildContext context) =>
          YAMLDoc(src: src, start: start, end: end, css: css).build(context),
  // 代码块
  r"n *`{3}.*n[sS]*?n *`{3}[^n]*":
      (String src, int start, int end, CSS css, BuildContext context) =>
          CodeBlock(src: src, start: start, end: end, css: css).build(context),
  // 代码段
  r"`[^ `n]+`": (String src, int start, int end, CSS css,
          BuildContext context) =>
      CodeSegment(src: src, start: start, end: end, css: css).build(context),
  // 任务列表
  r"n *- [(x| )] [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          TaskList(src: src, start: start, end: end, css: css).build(context),
  // 常规列表
  r"n *- [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          NormalList(src: src, start: start, end: end, css: css).build(context),
  // 顺序列表
  r"n *d+. [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          SeqList(src: src, start: start, end: end, css: css).build(context),
  // 标题
  r"n *###### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 0)
              .build(context),
  r"n *##### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 5)
              .build(context),
  r"n *#### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 10)
              .build(context),
  r"n *### [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 15)
              .build(context),
  r"n *## [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 20)
              .build(context),
  r"n *# [^n]+":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Header(src: src, start: start, end: end, css: css, size: 25)
              .build(context),
  // 粗斜体
  r"*{3}[^n*]+*{3}": (String src, int start, int end, CSS css,
          BuildContext context) =>
      BoldItalicText(src: src, start: start, end: end, css: css).build(context),
  // 粗体
  r"*{2}[^n*]+*{2}":
      (String src, int start, int end, CSS css, BuildContext context) =>
          BoldText(src: src, start: start, end: end, css: css).build(context),
  // 斜体
  r"*[^n*]+*":
      (String src, int start, int end, CSS css, BuildContext context) =>
          ItalicText(src: src, start: start, end: end, css: css).build(context),
  // 删除线
  r"~{2}[^n~]+~{2}":
      (String src, int start, int end, CSS css, BuildContext context) =>
          DelLine(src: src, start: start, end: end, css: css).build(context),
  // 文字高亮
  r"={2}[^n=]+={2}": (String src, int start, int end, CSS css,
          BuildContext context) =>
      HighlightText(src: src, start: start, end: end, css: css).build(context),
  // 文字样式
  r"<font[^n>]*>.+</font>":
      (String src, int start, int end, CSS css, BuildContext context) =>
          StyledText(src: src, start: start, end: end, css: css).build(context),
  // 文字样式
  r"<br */>":
      (String src, int start, int end, CSS css, BuildContext context) =>
          BreakRow(src: src, start: start, end: end, css: css).build(context),
  // 图片
  r"![[^n[]]*](.+)":
      (String src, int start, int end, CSS css, BuildContext context) =>
          MDImage(src: src, start: start, end: end, css: css).build(context),
  // 链接
  r"[[^n[]]*](.+)":
      (String src, int start, int end, CSS css, BuildContext context) =>
          Link(src: src, start: start, end: end, css: css).build(context),
  // 分割线
  r"n *-{4,} *":
      (String src, int start, int end, CSS css, BuildContext context) =>
          MDDivider(src: src, start: start, end: end, css: css).build(context),
};

支持的解析规则还不是很多, 但是我也在慢慢晚上, 基本上这些在Typora里面是非常常用的, 我都已经做好了.

support的可拓展性非常强. 当你需要添加新的解析规则的时候, 你只需要写入一个键值对, key是匹配这个Markdown标记的正则表达式, 值是转换这个标记为Widget的对应类. 这个类里面的基础设施都是建设好的, 你只需要按照上述的转换流程, 照葫芦画瓢画上递归的转换方法, 一个新的Markdown解析规则就完成了; 如果你觉得哪个规则没有必要, 则直接删掉那个规则对应的键值对和实现类就好了, 我个人觉得非常方便, 完全不会影响其他解析规则的执行.

事后

刚开始说实话, 我完全不知道这个东西要怎么下手, 我太笨了. 我在网上查找了很多的办法, 但那些都是现成的轮子, 而奈何本人并不对HTML和JS抱有十分的好感. 虽然我尝试过直接通过Webview加载本地html模板, 在模板内引入markedjs等轮子, 试图直接通过他们完成Markdown的显示. 先说结果, 单显示是十分成功的, 但是涉及到交互层面, 大家都懂的, 毕竟套的Webview, 直接在页面内跳转了, 场面一度十分尴尬. 当然确实是可以通过增加Webview的一些点击事件的方式来尝试这一问题, 但我觉得: 既然成本都一样高, 那么直接写一个新的轮子它不香吗? 只要能超越之前那些轮子的一切, 那就是舒服的. 于是我开始了尝试, 并且得到了一定程度上的成功. 虽然目前这个插件还不是十分完善, 但基础的转换已经十分稳定, 我现在自己的Flutter工程里面都是用的自己写的这个轮子, 它的名字叫做refined_markdown, 在Dart packages上面查得到的, 源码也在Github上面. 如果您对它有兴趣, 不妨给个Start, 有任何问题也随时Issue搞上来, 在我的可用时间内我一定尽快解决问题.

我设计了很多个提高拓展性的方案, 最终找到了这个相对来说最好的, 也是希望这个插件能在大家的共同努力下做得更好. 现在"不造重复轮子"的说法在卑微渺小的我看来有点可笑, 我觉得不管是谁来做这个东西, 确实是应该要竞争起来, 要做就是要做到最好, 没有竞争就不可能有更好的产品产生, 只会让一家独大变成一种奇妙的垄断, 最终大家都会止步不前, 你我应该深知这个道理.

话已至此, 感谢您耐心看完~

源码地址

https://github.com/Autokaka/refined_markdown​github.com

Dart Pub国内

https://dart-pub.mirrors.sjtug.sjtu.edu.cn/packages/refined_markdown​dart-pub.mirrors.sjtug.sjtu.edu.cn

Dart Pub

https://pub.dev/packages/refined_markdown​pub.dev
weixin_39717026
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter Web网站之Markdown展示与博客列表
m0_46622598的博客
05-13 987
往期 Flutter Web网站搭建教程 Flutter Web网站之主页框架搭建 Flutter Web网站之Jetpack成型 Flutter Web网站之ScrollView+GridView优化 Flutter Web网站之最简方式实现暗黑主题无缝切换 上期回顾 上期主要实现了主题切换，通过StreamBuilder来动态的切换ThemeData，最终达到效果。 本期内容 Markd...
代码高亮_Flutter 开发从 0 到 1（六）Markdown 与代码高亮
weixin_39968436的博客
01-14 1736
《Fluuter 开发从 0 到 1》博客详情是 Markdown，今天就来说说 Flutter Markdown 如何实现的。先剧透下，今天的主角是 flutter_markdown，可以实现从使用简单的 Markdown 标记格式化的纯文本数据创建富文本输出，包括文本样式，表格，链接等。准备添加依赖将 flutter_markdown 添加到 pubspec.yaml 文件中：dep...
flutter_markdown:Flutter的Markdown渲染器
05-12
感动 该存储库不再使用。 flutter_markdown软件包已移至 。 扑扑降价 Flutter的Markdown渲染器。 它支持，但不支持内联HTML。 概述 包将轻量级标记语言Markdown渲染到包含富文本表示形式的Flutter小部件中。 flutter_markdown建立在Dart 包的顶部，该包将Markdown解析为抽象语法树（AST）。 AST的节点是Markdown数据HTML表示。 Flutter不是HTML渲染器 尽管这种在Flutter中创建Markdown源文本的富文本表示的方法效果很好，但是Flutter并不像Web浏览器那样是HTML渲染器。 Markdown由John Gruber于2004年开发，旨在允许用户将可读的纯文本内容转换为富文本HTML。 与HTML的这种紧密关联允许将HTML注入Markdown源数据。 Markdown解析器通常会忽
flutter_markdown, 用于颤振的Markdown 渲染器.zip
10-09
flutter_markdown, 用于颤振的Markdown 渲染器 颤振 Markdown 用于颤振的Markdown 渲染器。 它支持原始格式，但没有 inline html 。正在启动使用 Markdown 小部件非常简单，只需将源 Markdown 作为字符串传递：new Mar
探秘 Flutter_html：赋予应用动态渲染HTML的能力
最新发布
gitblog_00017的博客
05-13 546
探秘 Flutter_html：赋予应用动态渲染HTML的能力 项目地址:https://gitcode.com/Sub6Resources/flutter_html 在软件开发中，有时我们需要在 Flutter 应用中展示或处理 HTML 内容，这就需要用到我们的主角——flutter_html。这是一个强大且易于使用的开源包，能够将 HTML 和 CSS 转换为 Flutter 的原生组件，实...
在Flutter中使用markdown
青年码农
08-12 1456
最近在写flutter入门的项目，打算把常用的widgets和插件用法总结下，方便后期查找，项目大概是这个样子。搜索页widgets属性页面写的时候考虑排版，但是文字居多，如果设计下排版，用widgets把样式写好，后期如果需要修改，则改动比较大，所以考虑使用markdown，毕竟也是支持的。1.安装依赖根目录下pubspec.yaml文件增加flutter_markd...
flutter_markdown:简约，高度可定制-基于正则表达式的Markdown小工具，适用于Flutter
03-26
adhara_markdown 极简，高度可定制的Markdown编辑器和查看器by adhara 入门 该项目是Dart的起点，Dart是一个库模块，其中包含可以在多个Flutter或Dart项目之间轻松共享的代码。 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
markdown_to_asciidoc-1.0.jar
04-21
mvn install:install-file -DgroupId=nl.jworks.markdown_to_asciidoc -DartifactId=markdown_to_asciidoc -Dversion=1.0 -Dpackaging=jar -Dfile=C:\Users\lizz\Downloads\markdown_to_asciidoc-1.0.jar
php-使用php开发的html转换为markdown的转换器.zip
03-04
这个"php-使用php开发的html转换为markdown的转换器.zip"文件提供了一个使用PHP语言实现的解决方案，使得开发者能够方便地将HTML格式的内容转换为Markdown格式。以下是关于这个转换器的详细解释和相关知识点： 1. *...
markdown:Node.js Markdown到HTML解析器
05-04
此Markdown-to-HTML解析器使用自定义的，轻量级的Markdown语法。 它允许创建：斜体，粗体，删除线和上标文本，标题，链接，图像，视频，音频，内联代码，多行代码，无序列表，有序列表，嵌套列表，水平线，引号和...
markdown文本解析成html，并生成大纲
dh99999900的博客
01-06 639
大纲一般都有父子关系，我们需要去对每个标题进行父子关系的处理，比如标题 3 在标题 1 的后面，那他就是标题 1 的子标题。文章详情页，在此引用大纲页面，为 ArticleTree，调用 ArticleTree 里的函数生成大纲的函数在82行。如果当前标题的层级小于等于数据中最后一个父标题的层级，那么他就是父标题，直接添加到数组中即可。细节：我们将标题分为两类，一种是直接可以用作父标题，一种则是需要添加在父标题中的子标题。子标题通过递归的方式，先找到最底层的标题，依次往上寻找，直到找到合适的位置即可。
md_to_html:用于将 Markdown 转换为 HTML 的简单 Dart 转换器
06-25
md_to_html 这是一个简单的转换器，可根据提供的模板将所有 Markdown 文件转换为 HTML。 要使用，请将md_to_html添加到您的 pubspec： dependencies: md_to_html: ">=0.1.0 <0.2.0" 然后，添加转换器并将template属性设置为 Mustache 样式模板的位置： transformers: md_to_html: template: "web/template.html" 在模板中， {{content}}标记将替换为从 Markdown 生成的 HTML。 您可以通过将 JSON 添加到 Markdown 文件的开头来填充其他标签。 例如： {"title": "My Title"} ## This is a header This is a paragraph
markdown:Dart Markdown库
04-30
用Dart编写的便携式Markdown库。 它可以将Markdown解析为客户端和服务器上HTML。 在玩它。 用法 import 'package:markdown/markdown.dart' ; void main () { print ( markdownToHtml ( 'Hello *Markdown*' )); //=> <p>Hello <em>Markdown</em></p> } 语法扩展 除了原始实现中指定的扩展功能外，还支持一些Markdown扩展功能。 默认情况下， 支持的已启用。 通过在markdownToHtml的blockSyntaxes或inlineSyntaxes参数中指定扩展语法数组，可以启用任何单独的扩展。 当前支持的内联扩展语法为： new InlineHtmlSyntax() -近似于CommonMark对“原始HTML”的。 当
如何将markdown解析成html
zwf193071的专栏
03-01 1619
什么是markdown文件 随意打开任何markdown文件，你可能会看到类似如下内容： # 标题1 ## 标题2 **粗体** 我们需要将标题1、标题2、粗体转为<h1>、<h2>、<b>，如何做到这些呢？我们将利用正则表达式对其一一解析 正则表达式 不同的编程语言，其正则表达式可能会有一些差异。下面是用javascript编写的正则表达式： const pattern = /Hello/ const text = 'Hello, beautiful people'
Markdown解析html的插件,markdown转html前台展示
weixin_42255060的博客
06-25 406
前言前端html不支持直接显示md格式代码，所以我们需要进行转换。转换方式有好几种，以下展示两种方式一通过editormd.markdownToHTML渲染主要是通过editor的渲染功能将md格式转为html并展示出来。editormdeditormd.markdownToHTML("myEditor", {htmlDecode : "style,script,iframe", //...
Flutter html渲染
isusjjyy的专栏
10-29 3237
引入flutter_html插件 pubspec.yaml文件中引入： dependencies: flutter_html: ^0.10.4 作用及使用 用来渲染html内容，如某些详情页面 参考网址：flutter_html 使用方式： import 'package:flutter_html/flutter_html.dart'; // 渲染html内容代码...
如何在Flutter中使用flutter_markdown
Maniu_666的博客
04-10 1692
然后安装flutter_markdown依赖失败，考虑到project name 和 flutter_markdown重名了，那就换一个项目名称。然后flutter pub get 然后又报错了，flutter_markdown依赖另外一个markdown package。很多博客，论坛都支持markdown语法，flutter也有支持markdown语法的插件。创建markdown文件,放开pubspec.yaml 静态文件路径。保存后，编辑器自动下载依赖，或者执行。在创建项目之初，随手就创建了。
探索 Dart Markdown：让文本变得生动有趣
gitblog_00046的博客
04-19 250
探索 Dart Markdown：让文本变得生动有趣 项目地址:https://gitcode.com/dart-lang/markdown 项目简介 Dart Markdown 是一个由 Dart 社区维护的库，用于解析和生成 Markdown 格式的文本。Markdown 是一种轻量级且易于阅读的标记语言，广泛应用于文档编写、博客、README 文件等场景。这个项目为 Dart 开发者提供了一...
Flutter 常用第三方库
一条咸鱼
12-03 1610
flutter_redux：在 Flutter 上使用 Redux。 flutter_webview_plugin：WebView 插件。 flutter_amap：高德地图 Flutter 插件。 flutter_alipay：支付宝支付 Flutter 插件。 amap_location：高德地图定位插件。 flutter_mobile_vision：二维码识别神库，支持人面识别。 barc...
markdown 编辑器_几款好用的Markdown编辑器
06-01
好的，下面是几款好用的 Markdown 编辑器： 1. Typora：一款简洁易用的 Markdown 编辑器，支持实时预览和导出多种格式文件。 2. VS Code：微软开发的一款开源的代码编辑器，支持 Markdown 扩展，并且可以安装多种 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值