Pendart
A Flutter package for editing and rendering rich text markup with support for light and dark modes.
Features
- Simple, intuitive markup syntax
- Editor with formatting toolbar
- Live preview
- Checkbox support
- Code syntax highlighting
- Light and dark mode support
Usage
PendartView Widget
PendartView is a simple widget for displaying Pendart markup as formatted text:
import 'package:pendart/preview.dart';
// ...
PendartView(
text: "This is **bold** and this is %%italic%%",
isDarkMode: false, // Set to true for dark mode
)
PendartEditor Widget
PendartEditor provides a full editor experience with a formatting toolbar:
import 'package:pendart/editor.dart';
// ...
PendartEditor(
initialText: "# Start typing here",
height: 400,
isDarkMode: false, // Set to true for dark mode
onTextChanged: (text) {
// Do something with the updated text
print('Text updated: $text');
},
)
Markup Syntax
Pendart uses a simple markup language:
| Markup | Result |
|---|---|
**text** |
Bold text |
%%text%% |
Italic text |
__text__ |
|
~~text~~ |
|
! Text |
# Heading 1 |
!! Text |
## Heading 2 |
[] |
☐ Unchecked checkbox |
[x] |
☑ Checked checkbox |
@@url text@@ |
text |
[[image.jpg]] |
Image |
--- |
Horizontal rule |
code |
Inline code |
::: and ::: |
Code block |
Dark Mode Support
Both PendartView and PendartEditor support dark mode through the isDarkMode property. When enabled, the widgets will use a dark color scheme for better visibility in dark environments.
Example with theme switching:
bool isDarkMode = false;
// ... in your build method:
PendartEditor(
initialText: "Dark mode example",
isDarkMode: isDarkMode,
onTextChanged: (text) {
// Handle text changes
},
),
// Toggle dark mode
FloatingActionButton(
onPressed: () {
setState(() {
isDarkMode = !isDarkMode;
});
},
child: Icon(isDarkMode ? Icons.light_mode : Icons.dark_mode),
)
Example
Check out the example.dart file for a complete example of how to use Pendart with dark mode support.
License
MIT