dart 如何在flutter_markdown中的内联代码和代码块中添加单独的样式

yftpprvb  于 2023-04-27  发布在  Flutter
关注(0)|答案(1)|浏览(155)

有两种类型的代码标记,一种是inline code(1个反引号),另一种是codeblock(3个反引号)

Markdown(
      controller: scrollController,
      selectable: true,
      builders: {
        'code': CodeElementBuilder()
       },
      styleSheet: MarkdownStyleSheet(
        textScaleFactor: 1.0,
        codeblockPadding: EdgeInsets.all(10),
      ),
      data: data,
      styleSheetTheme: MarkdownStyleSheetBaseTheme.material,
   );

我使用下面的示例Codeblock Syntex Builder创建了一个自定义的codeElementBuilder
但它也适用于内联代码如何区分样式inlineCodecodeblock
我正在使用flutter_markdown包添加markdown

ogq8wdun

ogq8wdun1#

您可以将构建器添加到pre而不是code,它将仅适用于code blocks。例如:

MarkdownBody(
...
 builders: {
   "pre": CodeBlockMarkdownElementBuilder(),
 },
...
);
class CodeMarkdownElementBuilder extends MarkdownElementBuilder {
  ScrollController verticalController = ScrollController();
  ScrollController horizontalController = ScrollController();
  @override
  Widget visitText(md.Text text, TextStyle? preferredStyle) {
    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: 200),
      child: Scrollbar(
        controller: verticalController,
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          controller: verticalController,
          child: Scrollbar(
            controller: horizontalController,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              controller: horizontalController,
              child: Text.rich(formatText(preferredStyle, text.text)),
            ),
          ),
        ),
      ),
    );
  }
}

相关问题