๐Ÿ“ฆ GPT Markdown & LaTeX for Flutter

Pub Version Pub Likes Pub Points GitHub

A Flutter package for rendering rich Markdown and LaTeX in your app โ€” built for AI outputs like ChatGPT and Gemini. Drop-in replacement for flutter_markdown with full LaTeX support and better AI integration.

๐ŸŒ gptmarkdown.com ยท ๐Ÿ“– Docs ยท ๐ŸŽฎ Live Playground


๐Ÿš€ Why Use GPT Markdown?

  • Optimized for AI Outputs: Render ChatGPT and Gemini responses flawlessly in your Flutter apps.
  • LaTeX out of the box: No extra setup โ€” math rendering works from the first line.
  • Rich Customization: Easily apply custom styles using Flutter widgets like TextStyle.
  • Selectable Content: Pass selectable: true to make text highlightable and copyable on desktop and web.
  • Seamless Integration: Works out of the box with minimal setup.

Supported Markdown & LaTeX Features

โœจ Feature โœ… Supported ๐Ÿ”œ Upcoming
๐Ÿ’ป Code Block โœ…
๐Ÿ“Š Table โœ…
๐Ÿ“ Heading โœ…
๐Ÿ“Œ Unordered List โœ…
๐Ÿ“‹ Ordered List โœ…
๐Ÿ”˜ Radio Button โœ…
โ˜‘๏ธ Check Box โœ…
โž– Horizontal Line โœ…
๐Ÿ”ข Latex Math โœ…
โ†ฉ๏ธ Indent โœ…
๐Ÿ’ฌ BlockQuote โœ…
๐Ÿ–ผ๏ธ Image โœ…
โœจ Highlighted Text โœ…
โœ‚๏ธ Strike Text โœ…
๐Ÿ”ต Bold Text โœ…
๐Ÿ“œ Italic Text โœ…
๐Ÿ”— Links โœ…
๐Ÿ“ฑ Selectable โœ…
๐Ÿงฉ Custom components โœ…
๐Ÿ“Ž Underline โœ…

โœจ Key Features

Render a wide variety of content with full Markdown and LaTeX support, including:

  • List
- Unordered list item
1. Ordered list item
  • Horizontal line
---
  • Links
[<text here>](<href>)
  • Images with size
![<width>x<height> someText](url)
  • Table
| Name  | Roll |
|-------|------|
| sohag | 1    |

Name Roll
sohag 1
  • Striked text
~~striked text~~
  • Bold text
**Bold text**
  • Italic text
*Italic text*
<u>Underline text</u>
  • heading texts
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
  • Latex formula \(\frac a b\) or \[\frac ab\]
\(\frac a b\)
  • Radio button and checkbox
() Unchecked radio
(x) Checked radio
[] Unchecked checkbox
[x] Checked checkbox
  • Enable text selection on desktop and web:
GptMarkdown(markdownText, selectable: true)

๐Ÿ› ๏ธ Getting Started

Run this command:

flutter pub add gpt_markdown 

๐Ÿ“– Usage

Check the documentation here.

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

GptMarkdown(
  r'''
## Hello from gpt_markdown!

Render **bold**, *italic*, ~~strikethrough~~, `inline code`, and <u>underline</u>.

Inline LaTeX: \( E = mc^2 \) and block math:

\[
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\]

| Name  | Score |
|-------|-------|
| Alice | 98    |
| Bob   | 87    |

- [x] Task complete
- [ ] Task pending
  ''',
  onLinkTap: (url, title) => debugPrint('Tapped: $url'),
)

๐Ÿ’ก ChatGPT Response Examples

## ChatGPT Response

Welcome to ChatGPT! Below is an example of a response with Markdown and LaTeX code:

### Markdown Example

You can use Markdown to format text easily. Here are some examples:

- **Bold Text**: **This text is bold**
- *Italic Text*: *This text is italicized*
- [Link](https://www.example.com): [This is a link](https://www.example.com)
- Lists:
  1. Item 1
  2. Item 2
  3. Item 3

### LaTeX Example

You can also use LaTeX for mathematical expressions. Here's an example:

- **Equation**: \( f(x) = x^2 + 2x + 1 \)
- **Integral**: \( \int_{0}^{1} x^2 \, dx \)
- **Matrix**:

\[
\begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9
\end{bmatrix}
\]

### Conclusion

Markdown and LaTeX can be powerful tools for formatting text and mathematical expressions in your Flutter app. If you have any questions or need further assistance, feel free to ask!

Output from gpt_markdown

Screenshot 2024-02-15 at 4 13 59 AM

If you're using flutter_markdown and need more customization or LaTeX support, gpt_markdown is a great alternative.


โญ If you find this package helpful, please give it a like on pub.dev! Your support means a lot! โญ

๐Ÿ”— Additional Information