jaspr_markdown_plus 1.0.0 copy "jaspr_markdown_plus: ^1.0.0" to clipboard
jaspr_markdown_plus: ^1.0.0 copied to clipboard

a jaspr component for parsing and displaying markdown content

example/lib/main.dart

import 'package:jaspr/server.dart';
import 'package:jaspr_markdown_plus/jaspr_markdown_plus.dart';
import 'jaspr_options.dart';

void main() {
  Jaspr.initializeApp(options: defaultJasprOptions);
  runApp(
    Document(
      title: 'example',
      styles: [
        css('*').styles(padding: Padding.zero, margin: Margin.zero),
        css('html body').styles(width: 100.percent, height: 100.percent),
      ],
      body: Markdown(
        styles: Styles(
          padding: Padding.all(1.rem),
          fontFamily: FontFamilies.arial,
          backgroundColor: Color('#141414'),
        ),
        markdown: content,
        styleConfig: MarkdownStyleConfig.defaultDark,
      ),
    ),
  );
}

const content = """
> **DISCLAIMER:** This is a completely fictional README for a non-existent package named "ChronoGlide". All information, code, and links are for demonstration and testing purposes only.

# ChronoGlide: Effortless State Management with Time-Travel

[![pub version](https://img.shields.io/badge/pub-v0.0.0--fake-blue)](https://pub.flutter-io.cn)
[![build status](https://img.shields.io/badge/build-passing-green)](https://github.com)
[![license](https://img.shields.io/badge/license-MIT-lightgrey)](https://opensource.org/licenses/MIT)

**ChronoGlide** is a revolutionary state management library for Jaspr that uses temporal data structures to provide unparalleled debugging and state restoration capabilities.

> "The best way to predict the future is to invent it, and the best way to debug it is to rewind it." - *A wise developer (probably)*

## Core Features

- **Atomic State Snapshots:** Automatically create efficient, point-in-time snapshots of your application state.
- **Time-Travel Debugging:** Seamlessly move back and forth through the history of your state changes.
- **Predictive State Prefetching:** Uses `Future` analysis to predict and pre-calculate upcoming states.
- **Zero-Configuration Setup:** Just wrap your root component and you're good to go. No boilerplate required.
- ~~Temporal Paradoxes~~: Guaranteed to be 100% paradox-free!
- *Lightweight & Performant*: Built with performance as a first-class citizen.

## Installation

To install ChronoGlide, add it to your `pubspec.yaml` file.

```yaml
dependencies:
  jaspr: ^0.12.0
  # Note: This package is not real!
  chrono_glide: ^1.0.0-alpha
```

Then, run `dart pub get` in your terminal.

## Quick Start Guide

Getting started is as simple as 1, 2, 3.

1.  **Wrap your App:** Use the `ChronoScope` component at the root of your application.
2.  **Define a Glide:** Create a `Glide<T>` to hold a piece of your state. A `Glide` is a reactive variable that tracks its history.
3.  **Listen and Rebuild:** Use the `ChronoBuilder` component to listen for changes to a `Glide` and rebuild your UI automatically.

Here is a complete example of a simple counter app:

```dart
import 'package:jaspr/jaspr.dart';
import 'package:chrono_glide/chrono_glide.dart';

// 1. Define a global glide for your counter state.
final counterGlide = Glide(0);

void main() {
  // 2. Wrap your application with a ChronoScope.
  runApp(ChronoScope(child: const MyApp()));
}

class MyApp extends StatelessComponent {
  const MyApp({super.key});

  @override
  Component build(BuildContext context) {
    return div([
      // 3. Use ChronoBuilder to listen to changes.
      ChronoBuilder(
        listen: counterGlide,
        builder: (context, int count) {
          return p([
            text('Current count: \$count'),
          ]);
        },
      ),
      button(
        [text('Increment')],
        onClick: () => counterGlide.value++,
      ),
      button(
        [text('Rewind State')],
        onClick: () {
          // Time-travel to the previous state!
          if (counterGlide.history.canRewind) {
            counterGlide.history.rewind();
          }
        },
      ),
    ]);
  }
}
```

### API Overview

| Class           | Description                                             |
| --------------- | ------------------------------------------------------- |
| `ChronoScope`   | The root provider that manages all glides in the app.   |
| `Glide<T>`      | A reactive variable that stores state and its history.  |
| `ChronoBuilder` | A component that rebuilds when a `Glide` it listens to changes. |
| `History`       | An object on `Glide` for controlling time-travel (`rewind`, `fastForward`). |

---

This package is a demonstration project. For real Jaspr resources, please visit the official [Jaspr Website](https://jaspr.dev).
""";
1
likes
160
points
18
downloads

Publisher

verified publisherhani.day

Weekly Downloads

a jaspr component for parsing and displaying markdown content

Repository (GitLab)
View/report issues

Topics

#jaspr #markdown #render #web

Documentation

API reference

License

MIT (license)

Dependencies

highlight, jaspr, markdown

More

Packages that depend on jaspr_markdown_plus