markdown_widget

When using parseHtml to process HTML content, you can define how specific HTML tags are rendered by implementing custom SpanNode classes. If the parser encounters a tag you have registered in your MarkdownGeneratorConfig.generators, it will instantiate your custom SpanNode for that tag.

For reference, you can implement custom logic for tags like <img> or <video> by following the patterns used in the library's internal img.dart or custom example implementations.

You can extend the Markdown parser to support custom tags and rendering logic in two ways:

1. Custom Tags: Pass a SpanNodeGeneratorWithTag to MarkdownGeneratorConfig. This allows you to map new tags to specific SpanNode implementations or override existing ones.
2. Custom Syntax: Use InlineSyntax and BlockSyntax to define new parsing rules for the Markdown string, which then generate your custom tags.

For detailed implementation details, refer to the repository's example/lib/markdown_custom directory.

You can extend the package to support custom tags or override existing ones:

1. Custom Tags: Pass a SpanNodeGeneratorWithTag to MarkdownGeneratorConfig to add new tags and their corresponding SpanNodes.
2. Custom Parsing: Use InlineSyntax and BlockSyntax to customize how Markdown strings are parsed and to generate new tags.

Refer to the custom_node.dart example in the repository for implementation details.

To extend the package with custom tags or override existing ones, you can:

1. Pass a SpanNodeGeneratorWithTag to MarkdownGeneratorConfig to add new tags and their corresponding SpanNodes.
2. Customize parsing rules using InlineSyntax and BlockSyntax to generate new tags.

This allows for features like custom video tags, LaTeX math rendering, or HTML tag extensions.

You can enable night mode by switching the MarkdownConfig. It is recommended to use MarkdownConfig.darkConfig and update the PreConfig (for code blocks) to match the theme.

Widget buildMarkdown(BuildContext context) {
  final isDark = Theme.of(context).brightness == Brightness.dark;
  final config = isDark
      ? MarkdownConfig.darkConfig
      : MarkdownConfig.defaultConfig;
  final codeWrapper = (child, text, language) =>
      CodeWrapperWidget(child, text, language);
  return MarkdownWidget(
      data: data,
      config: config.copy(configs: [
      isDark
      ? PreConfig.darkConfig.copy(wrapper: codeWrapper)
      : PreConfig().copy(wrapper: codeWrapper)
  ]));
}

The markdown_widget package supports Mermaid syntax, allowing you to render complex diagrams and flowcharts directly from text within your markdown content. To use this feature, wrap your mermaid code blocks with the ```mermaid language identifier. Supported diagram types include Flowcharts, Sequence Diagrams, State Diagrams, Entity Relationship Diagrams, User Journeys, Git Graphs, Mindmaps, and Timelines.

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[Finish]

To render Mermaid diagrams in MarkdownWidget, you must wrap your configuration using the createMermaidWrapper function. This wrapper intercepts code blocks marked with language="mermaid" and uses the Kroki.io API to fetch PNG renders of the diagrams.

Integration requires passing the result of createMermaidWrapper into a PreConfig object, which is then added to the MarkdownConfig via the configs list.

final preConfig = PreConfig(
  wrapper: createMermaidWrapper(
    config: const MermaidConfig(),
    isDark: isDark,
    preConfig: preConfig,
  ),
);

MarkdownWidget(
  data: markdown,
  config: config.copy(configs: [preConfig]),
)

The primary way to render markdown is using the MarkdownWidget. It is a simple, easy-to-use component that supports TOC, code highlighting, and multiple platforms.

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

class MarkdownPage extends StatelessWidget {
  final String data;

  MarkdownPage(this.data);

  @override
  Widget build(BuildContext context) => Scaffold(body: buildMarkdown());

  Widget buildMarkdown() => MarkdownWidget(data: data);
}