elegant_markdown #

A high-quality Flutter component for rendering Markdown + LaTeX simultaneously.
Styled after Notion / GitHub — clean, readable, and fully customizable.

✨ Features #

📦 Installation #

Add to your pubspec.yaml:

dependencies:
  elegant_markdown: ^0.1.0

Then run:

flutter pub get

🚀 Quick Start #

import 'package:elegant_markdown/elegant_markdown.dart';

// Minimal usage — auto-follows system theme
ElegantMarkdown(
  data: '# Hello\n\nThis is **bold** and $E=mc^2$.',
)

// Full API
ElegantMarkdown(
  data: markdownText,
  theme: ElegantMarkdownTheme.light(),   // or .dark()
  onTapLink: (url) => launchUrl(Uri.parse(url)),
  selectable: true,
  maxWidth: 800,
  padding: const EdgeInsets.all(16),
)

🧩 API Reference #

ElegantMarkdown #

ElegantMarkdownTheme #

// Built-in presets
ElegantMarkdownTheme.light()   // GitHub-inspired light theme
ElegantMarkdownTheme.dark()    // GitHub-inspired dark theme

// Custom theme
ElegantMarkdownTheme(
  brightness: Brightness.light,
  background: Colors.white,
  surface: Color(0xFFF6F8FA),
  onSurface: Color(0xFF1F2328),
  primary: Color(0xFF0969DA),            // links, checkboxes
  codeBackground: Color(0xFFF6F8FA),
  codeForeground: Color(0xFF1F2328),
  inlineCodeColor: Color(0xFFD63384),    // inline `code` color
  blockquoteBorder: Color(0xFFD0D7DE),
  blockquoteBackground: Color(0xFFF6F8FA),
  tableBorder: Color(0xFFD0D7DE),
  tableHeaderBackground: Color(0xFFF6F8FA),
  tableAltRowBackground: Color(0xFFFAFAFA),
  divider: Color(0xFFD0D7DE),
  highlightTheme: githubTheme,           // from flutter_highlight
)

📐 Markdown Syntax Reference #

Text #

# H1  ## H2  ### H3

**bold**  *italic*  ~~strikethrough~~  `inline code`

Math (LaTeX) #

Inline: $E = mc^2$

Display (single line): $$\frac{a}{b}$$

Block (multi-line):
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Code Blocks #

```dart
void main() => runApp(const MyApp());
```

Supported language tags: dart, python, javascript, typescript, java, kotlin, swift, rust, go, bash, yaml, json, sql, html, css, and more.

Task Lists #

- [x] Completed task
- [ ] Pending task

Tables #

| Column A | Column B |
|----------|----------|
| Cell 1   | Cell 2   |

🌗 Theme Usage #

Explicit Theme #

ElegantMarkdown(
  data: content,
  theme: ElegantMarkdownTheme.dark(),
)

Auto Follow System Theme #

Simply omit theme — the widget reads Theme.of(context).brightness:

ElegantMarkdown(data: content)

Dynamic Toggle #

class _MyState extends State<MyPage> {
  bool _isDark = false;

  @override
  Widget build(BuildContext context) {
    return ElegantMarkdown(
      data: content,
      theme: _isDark
          ? ElegantMarkdownTheme.dark()
          : ElegantMarkdownTheme.light(),
    );
  }
}

🔧 Scrollable Document #

ElegantMarkdown renders as a non-scrolling body (MarkdownBody under the hood).
Wrap it in a SingleChildScrollView for scrollable documents:

SingleChildScrollView(
  padding: const EdgeInsets.all(16),
  child: ElegantMarkdown(data: longDocument),
)

🏗️ Architecture #

elegant_markdown/
├── lib/
│   ├── elegant_markdown.dart        # Public API entry point
│   └── src/
│       ├── theme.dart               # ElegantMarkdownTheme
│       ├── syntax/
│       │   └── math_syntax.dart     # InlineMathSyntax + BlockMathSyntax
│       └── builders/
│           ├── code_builder.dart    # Code block with highlight + copy
│           └── math_builder.dart    # LaTeX inline + block builders
└── example/
    └── lib/main.dart                # Runnable demo app

Key design decisions:

• BlockMathBuilder.isBlockElement() = true — registers blockmath into flutter_markdown's block tag list, preventing inline-context errors.
• Custom InlineMathSyntax regex matches both $...$ and $$...$$ (single-line display) as inline nodes.
• Custom BlockMathSyntax handles multi-line $$...$$ blocks as top-level block elements.
• builders['pre'] intercepts all fenced code blocks; language is read from class="language-*" attribute.

🤝 Contributing #

Contributions, issues, and pull requests are welcome!
See CONTRIBUTING.md or open an issue.

1. Fork the repository
2. Create your feature branch: git checkout -b feat/awesome-feature
3. Commit changes: git commit -m 'feat: add awesome feature'
4. Push: git push origin feat/awesome-feature
5. Open a Pull Request

📄 License #

MIT © 2026 — See LICENSE for details.