Add Syntax Highlighter

[gazreese]

Migrated from flutter/flutter#81755
This issue was originally filed against the official flutter_markdown package.
The package has since been discontinued and ownership transferred to flutter_markdown_plus.

---

By default, the SyntaxHighlighter is not working, and setting the syntaxHighlighter property has no documentation on it. Please add one or two examples on how to add Syntax Highlighting to the widget.

[gazreese]

@ldelossa commented on 2021-03-07T13:36:41Z (migrated from flutter/flutter#81755)

---

Does it work, and no one knows how to use it? Or does it just not work?

Im trying to add syntax highlighting myself.

[gazreese]

@domesticmouse commented on 2021-03-07T22:22:42Z (migrated from flutter/flutter#81755)

---

As a wild guess, this may require integrating https://pub.dev/packages/flutter_highlight or similar

[gazreese]

@ldelossa commented on 2021-03-07T23:30:23Z (migrated from flutter/flutter#81755)

---

Yup, trying to see how these fit together.

[gazreese]

@capntrips commented on 2021-03-26T03:56:31Z (migrated from flutter/flutter#81755)

---

Not using SyntaxHighlighter, but I managed to get flutter_highlight working with a MarkdownElementBuilder:

class HighlightBuilder extends MarkdownElementBuilder {
  @override
  Widget visitElementAfter(md.Element element, TextStyle preferredStyle) {
    if (element.attributes['class'] == null && !element.textContent.trim().contains('\n')) {
      return Container(
          padding: EdgeInsets.only(top: 0.0, right: 4.0, bottom: 1.75, left: 4.0),
          margin: EdgeInsets.symmetric(horizontal: 2.0),
          color: Colors.black12,
          child: Text(
              element.textContent,
              style: TextStyle(fontFamily: 'RobotoMono', fontSize: 12.0)));
    } else {
      var language = 'plaintext';
      final pattern = RegExp(r'^language-(.+)$');
      if (element.attributes['class'] != null && pattern.hasMatch(element.attributes['class'])) {
        language = pattern.firstMatch(element.attributes['class']).group(1);
      }
      return HighlightView(
        element.textContent.trim(),
        language: language,
        theme: themeMap['a11y-light'],
        padding: EdgeInsets.all(12),
        textStyle: TextStyle(fontFamily: 'RobotoMono', fontSize: 12));
    }
  }
}

The builder gets inline and 4 space indented code, as well, so I have some basic handling of that in there. You can return null, instead, if you don't want to handle those. I couldn't find a built-in monospace font in Flutter, so I used RobotoMono. You'll need to drop the font file in your fonts folder and include it in your pubspec to use it.

To use it, just set it to handle code tags in the Markdown widget:

Markdown(
  data: markdownString,
  builders: {'code': HighlightBuilder()},
  extensionSet: md.ExtensionSet([md.FencedCodeBlockSyntax()], []),
)

If you aren't using other syntaxes, you don't don't need the ExtensionSet line, but if you are, you have to include FencedCodeBlockSyntax.

If you're looking to use SyntaxHighligher specifically, someone did make one for Dart here.

[gazreese]

@devidw commented on 2025-02-07T03:07:29Z (migrated from flutter/flutter#81755)

---

Thank you @capntrips

Just resharing slightly updated version to account for dart and flutter changes/deprecations, new method is visitElementAfterWithContext:

import 'package:flutter_highlight/flutter_highlight.dart';
import 'package:flutter_highlight/themes/gruvbox-dark.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:markdown/src/ast.dart' as md;

class MyHighLightBuilder extends MarkdownElementBuilder {
  @override
  Widget? visitElementAfterWithContext(
    BuildContext context,
    md.Element element,
    TextStyle? preferredStyle,
    TextStyle? parentStyle,
  ) {
    var lang = 'plaintext';
    final pattern = RegExp(r'^language-(.+)$');

    var className = element.attributes['class'];

    if (className != null) {
      var out = pattern.firstMatch(className)?.group(1);

      if (out != null) {
        lang = out;
      }
    }

    return HighlightView(
      element.textContent.trim(),
      language: lang,
      theme: gruvboxDarkTheme,
      textStyle: GoogleFonts.dmMono(),
      tabSize: 4,
      padding: EdgeInsets.all(10),
    );
  }
}

[gazreese]

@github-actions commented on 2025-07-23T14:03:30Z (migrated from flutter/flutter#81755)

---

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.