首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何向flutter_markdown添加代码语法高亮工具

如何向flutter_markdown添加代码语法高亮工具
EN

Stack Overflow用户
提问于 2020-01-05 00:28:35
回答 2查看 686关注 0票数 3

我正在使用flutter_markdown包向我的应用程序添加markdown支持。有一个用于syntaxHighlighter的选项。我找到了一个syntax highlight library,我该如何使用它来帮助编写我的SyntaxHighlighter类

EN

回答 2

Stack Overflow用户

发布于 2021-03-30 19:16:18

我刚刚写了一期:)

请查看Feature: Get Syntax Language when customizing properties syntaxHighlighter #355.

这就是那个问题的内容。

相关问题

问题#227 StackOverflow - How to add code syntax highlighter to flutter markdown

处理语法语言突出显示。

可能的解决方案

这取决于highlight,当然还有flutter_markdown

首先使用,在将数据传递给Markdown之前使用RegExp获取语法语言。

第二个,用相同的LANG_MARKER标记语言,比如L@NG!

这是一个示例代码。

代码语言:javascript
运行
复制
  String parseSyntaxLanguage(String data) {
    String parsed = data;
    RegExp codeSign = new RegExp(r'`{3} *');
    RegExp pattern = new RegExp(r'`{3} *[\w]+');
    for (RegExpMatch match in pattern.allMatches(this.data)) {
      String lang = match.group(0).split(codeSign)[1]; // get a syntax language
      parsed = parsed.replaceFirst(match.group(0), '```\n$LANG_MARKER$lang$LANG_MARKER');
    } // CAUTION "\n" newline is required!
    return parsed;
  }

第三个,使语法高亮扩展了SyntaxHighlighter

这是一个示例代码。

代码语言:javascript
运行
复制
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:highlight/highlight.dart' show highlight, Node;

class LangSyntaxHighlighter extends SyntaxHighlighter {
  final String language;
  final String _rootKey = 'root';
  final String _defaultLang = 'dart';
  final String _defaultFontFamily = 'monospace';
  final Color _defaultFontColor = Color(0xfffdfeff);
  final Map<String, TextStyle> theme; // User's code theme

  LangSyntaxHighlighter(this.theme);

  @override
  TextSpan format(String source) {
    String lang;
    if (source.startsWith(LANG_MARKER)) {
      int idx = source.indexOf(LANG_MARKER, LANG_MARKER.length);
      lang = source.substring(LANG_MARKER.length, idx);
      source = source.substring(idx + LANG_MARKER.length);
    }
    TextStyle _textStyle = TextStyle(
      fontFamily: this._defaultFontFamily,
      color: this.theme[this._rootKey].color ?? this._defaultFontColor,
    );
    return TextSpan(
      style: _textStyle,
      children: this._convert(highlight
          .parse(source, autoDetection: true, language: lang ?? this._defaultLang)
          .nodes),
    );
  }

  List<TextSpan> _convert(List<Node> nodes) {
    List<TextSpan> spans = [];
    var currentSpans = spans;
    List<List<TextSpan>> stack = [];

    _traverse(Node node) {
      if (node.value != null) {
        currentSpans.add(node.className == null
            ? TextSpan(text: node.value)
            : TextSpan(text: node.value, style: theme[node.className]));
      } else if (node.children != null) {
        List<TextSpan> tmp = [];
        currentSpans.add(TextSpan(children: tmp, style: theme[node.className]));
        stack.add(currentSpans);
        currentSpans = tmp;

        node.children.forEach((n) {
          _traverse(n);
          if (n == node.children.last)
            currentSpans = stack.isEmpty ? spans : stack.removeLast();
        });
      }
    }

    for (var node in nodes) _traverse(node);
    return spans;
  }
}

最后一个,结合了语法高亮和解析器。

代码语言:javascript
运行
复制
Widget build(BuildContext context) {
    Future<Widget> parseMarkdown = new Future(() {
      return MarkdownBody(
          data: parseSyntaxLanguage(this.data), // markdown source
          syntaxHighlighter: LangSyntaxHighlighter(),
          styleSheet: MarkdownStyleSheet(
    
         ...

我不确定这是否适合功能请求。但是,我希望这个问题能对某些人有所帮助:)

票数 3
EN

Stack Overflow用户

发布于 2022-01-16 18:40:40

我想出了一个使用flutter_highlighterflutter_markdown的解决方案,我使用了Google Fonts作为等宽字体。

首先,您需要创建一个元素构建器来操作Markdown小部件中的代码块。

代码语言:javascript
运行
复制
import 'package:flutter_highlighter/flutter_highlighter.dart';
import 'package:flutter_highlighter/themes/atom-one-dark.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:markdown/markdown.dart' as md;
import 'package:google_fonts/google_fonts.dart';

class CodeElementBuilder extends MarkdownElementBuilder {
@override
Widget? visitElementAfter(md.Element element, TextStyle? preferredStyle) {
var language = '';

if (element.attributes['class'] != null) {
  String lg = element.attributes['class'] as String;
  language = lg.substring(9);
}
return SizedBox(
  width:
      MediaQueryData.fromWindow(WidgetsBinding.instance!.window).size.width,
  child: HighlightView(
    // The original code to be highlighted
    element.textContent,

    // Specify language
    // It is recommended to give it a value for performance
    language: language,

    // Specify highlight theme
    // All available themes are listed in `themes` folder
    theme: MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
                .platformBrightness ==
            Brightness.light
        ? atomOneLightTheme
        : atomOneDarkTheme,

    // Specify padding
    padding: const EdgeInsets.all(8),

    // Specify text style
    textStyle: GoogleFonts.robotoMono(),
     ),
   );
  }
}

接下来,您需要将上面的元素构建器添加到Markdown中的构建器中

代码语言:javascript
运行
复制
 Markdown(
  key: const Key("defaultmarkdownformatter"),
  data: codeText, 
  selectable: true,
  padding: const EdgeInsets.all(10),
  builders: {
    'code': CodeElementBuilder(),
    
  }),

你应该可以走了。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59592640

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档