{"id":34700190,"url":"https://github.com/fingerart/flutter_hypertext","last_synced_at":"2026-03-13T20:33:59.797Z","repository":{"id":290572816,"uuid":"974912754","full_name":"fingerart/flutter_hypertext","owner":"fingerart","description":"Hypertext is a highly extensible flutter rich text widget that automatically parses styles.","archived":false,"fork":false,"pushed_at":"2026-01-22T07:34:25.000Z","size":568,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-16T19:30:15.367Z","etag":null,"topics":["flutter","localization","rich-text"],"latest_commit_sha":null,"homepage":"https://fingerart.github.io/flutter_hypertext/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fingerart.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-29T13:48:16.000Z","updated_at":"2026-01-22T07:34:28.000Z","dependencies_parsed_at":"2025-04-29T14:47:49.120Z","dependency_job_id":"2adec0d1-d831-4664-94b6-b584239469e5","html_url":"https://github.com/fingerart/flutter_hypertext","commit_stats":null,"previous_names":["fingerart/flutter_hypertext"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/fingerart/flutter_hypertext","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerart%2Fflutter_hypertext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerart%2Fflutter_hypertext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerart%2Fflutter_hypertext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerart%2Fflutter_hypertext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fingerart","download_url":"https://codeload.github.com/fingerart/flutter_hypertext/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerart%2Fflutter_hypertext/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30474887,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T17:15:31.527Z","status":"ssl_error","status_checked_at":"2026-03-13T17:15:22.394Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","localization","rich-text"],"created_at":"2025-12-24T22:51:03.680Z","updated_at":"2026-03-13T20:33:59.788Z","avatar_url":"https://github.com/fingerart.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![pub package](https://img.shields.io/pub/v/flutter_hypertext.svg)](https://pub.dartlang.org/packages/flutter_hypertext)\n[![GitHub stars](https://img.shields.io/github/stars/fingerart/flutter_hypertext)](https://github.com/fingerart/flutter_hypertext/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/fingerart/flutter_hypertext)](https://github.com/fingerart/flutter_hypertext/network)\n[![GitHub license](https://img.shields.io/github/license/fingerart/flutter_hypertext)](https://github.com/fingerart/flutter_hypertext/blob/main/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/fingerart/flutter_hypertext)](https://github.com/fingerart/flutter_hypertext/issues)\n\nLanguage: English | [中文](./README_zh.md)\n\n\u003cbr/\u003e\n\nHypertext is a highly extensible rich text widget that automatically parses styles.\n\n## Preview\n\nView [online demo](https://fingerart.github.io/flutter_hypertext)\n\n| EN                                                                                         | ZH                                                                                         |\n|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|\n| ![](https://raw.githubusercontent.com/fingerart/flutter_hypertext/main/doc/preview_en.jpg) | ![](https://raw.githubusercontent.com/fingerart/flutter_hypertext/main/doc/preview_zh.jpg) |\n\n\n## Features\n\n1. Built-in support for common [HTML-like tags](#predefined-markup-tags), such as:\n\n    * Links (with tap and long-press events)\n    * Images\n    * Text styles: *italic*, **bold**, ~~strikethrough~~, underline, text color, gradients, etc.\n    * ...\n2. Event handling support\n3. Custom markup support\n4. Customize color or style name mapping to easily support multi-theme scenes\n5. Text style inheritance for `WidgetSpan`'s inner `child`\n\n## Table of contents\n\n\u003c!-- TOC --\u003e\n  * [Preview](#preview)\n  * [Features](#features)\n  * [Table of contents](#table-of-contents)\n  * [Getting Started](#getting-started)\n    * [Supported Parameters](#supported-parameters)\n  * [Use Cases](#use-cases)\n  * [Predefined Markup Tags](#predefined-markup-tags)\n    * [1) LinkMarkup](#1-linkmarkup)\n    * [2) StyleMarkup](#2-stylemarkup)\n      * [1. FontWeightMarkup](#1-fontweightmarkup)\n      * [2. BoldMarkup](#2-boldmarkup)\n      * [3. FontStyleMarkup](#3-fontstylemarkup)\n      * [4. ItalicMarkup](#4-italicmarkup)\n      * [5. TextDecorationMarkup](#5-textdecorationmarkup)\n      * [6. DelMarkup](#6-delmarkup)\n      * [7. UnderlineMarkup](#7-underlinemarkup)\n      * [8. ColorMarkup](#8-colormarkup)\n      * [9. SizeMarkup](#9-sizemarkup)\n    * [4) GradientMarkup](#4-gradientmarkup)\n    * [5) ImageMarkup](#5-imagemarkup)\n    * [6) GapMarkup](#6-gapmarkup)\n    * [7) PaddingMarkup](#7-paddingmarkup)\n  * [6) PatternMarkup](#6-patternmarkup)\n  * [Advanced](#advanced)\n    * [Custom Markups](#custom-markups)\n    * [Support for multiple themes](#support-for-multiple-themes)\n  * [Special Notes](#special-notes)\n    * [Color Names](#color-names)\n    * [Hex Colors](#hex-colors)\n    * [Margin Values](#margin-values)\n  * [Things to Keep in Mind](#things-to-keep-in-mind)\n  * [TODO](#todo)\n\u003c!-- TOC --\u003e\n\n## Getting Started\n\n```yaml\ndependencies:\n  flutter_hypertext: ^1.0.0+1\n```\n\n```dart\nimport 'package:flutter_hypertext/markup.dart';\n\nHypertext(\"Hello \u003ccolor=red\u003eHypertext\u003c/color\u003e\")\n```\n\n### Supported Parameters\n\n| Parameter              | Default           | Description                                      |\n|------------------------|-------------------|--------------------------------------------------|\n| `onMarkupEvent`        |                   | Receive events like `a`                          |\n| `lowercaseAttrName`    | `true`            | Convert attribute names to lowercase             |\n| `lowercaseElementName` | `true`            | Convert element names to lowercase               |\n| `ignoreErrorMarkup`    | `false`           | Ignore erroneous tags                            |\n| `colorMapper`          | `kBasicCSSColors` | Color name mapping (default is CSS basic colors) |\n| `styleMapper`          |                   | Supported style collections                      |\n| `markups`              | `kDefaultMarkups` | Supported markup tags                            |\n\n\u003e Global default configuration can be set via `HypertextThemeExtension`\n\n## Use Cases\n\n1. Rich text in multiple languages\n2. Rich text with multiple themes\n3. Highlighting keywords (search, mentions, topics...)\n\n## Predefined Markup Tags\n\n### 1) LinkMarkup\n\nMarks a range as a hyperlink, specifically for adding click events.\n\n**Tag Name: `a`**\n\nParameters:\n\n| Parameter    | Value                                 | Required | Description                                  |\n|--------------|---------------------------------------|----------|----------------------------------------------|\n| `href`       | URI string                            | ✅        | URI                                          |\n| `tap`        | -                                     | ☑️       | Handle click (can also specify `long-press`) |\n| `long-press` | -                                     | ☑️       | Handle long press (can also specify `tap`)   |\n| `title`      | String                                | ☑️       | Tooltip content                              |\n| `cursor`     | `basic` `click` `text` `defer`...     | ☑️       | See [SystemMouseCursors]                     |\n| `alignment`  | `baseline` `middle` `top` `bottom`... | ☑️       | See [PlaceholderAlignment]                   |\n| `baseline`   | `alphabetic` `ideographic`            | ☑️       | See [TextBaseline]                           |\n\nExample:\n\n```html\n\u003ca href=\"https://example.com\"\u003ego\u003c/a\u003e\n\u003ca href=\"app://op\" custom-attr=foo title=\"User Foo\" long-press tap\u003efoo\u003c/a\u003e \u003c!-- Supports both tap and long-press --\u003e\n```\n\n```dart\nHypertext(\n    text,\n    onMarkupEvent: (MarkupEvent event){\n      // event.tag\n      // event.data\n    },\n);\n```\n\n### 2) StyleMarkup\n\nSets text styles for a specified range, such as text color, background color, font size, font family, font weight, italic, text decorations (underline, overline, strikethrough)...\n\n**Tag: `style`**\n\nParameters:\n\n| Parameter     | Value                                                  | Required | Description                                                                                                             |\n|---------------|--------------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------|\n| `color`       | [Hex Color](#hex-colors) or [Color Name](#color-names) | ☑️       | Text color, default supports [CSS Basic Colors](https://www.w3.org/wiki/CSS/Properties/color/keywords)[kBasicCSSColors] |\n| `background`  | [Hex Color](#hex-colors) or [Color Name](#color-names) | ☑️       | Text background color                                                                                                   |\n| `size`        | double                                                 | ☑️       | Text size                                                                                                               |\n| `font-family` | font family name                                       | ☑️       | Font family                                                                                                             |\n| `weight`      | `100`~`900`、`bold`、`normal`                            | ☑️       | See [FontWeight]                                                                                                        |\n| `font-style`  | `normal` `italic`                                      | ☑️       | Font style [FontStyle]                                                                                                  |\n| `decor`       | `none` `underline` `overline` `lineThrough`            | ☑️       | Text decoration [TextDecoration]                                                                                        |\n| `decor-style` | `double` `dashed` `dotted` `solid` `wavy`              | ☑️       | Decoration style [TextDecorationStyle]                                                                                  |\n| `decor-color` | [Hex Color](#hex-colors) or [Color Name](#color-names) | ☑️       | Decoration color                                                                                                        |\n| `thickness`   | double                                                 | ☑️       | Decoration line thickness                                                                                               |\n\nExample:\n\n```html\n\u003cstyle color=red background=white size=20 weight=900\u003ehypertext\u003c/style\u003e\n\u003cstyle decor=underline decor-color=#F00 thickness=2\u003ehypertext\u003c/style\u003e\n```\n\n**`StyleMarkup` is a superset of the following tags:**\n\n#### 1. FontWeightMarkup\n\nTag: `weight`\n\n| Parameter           | Value                       | Required | Description      |\n|---------------------|-----------------------------|----------|------------------|\n| `weight` (simplify) | `100`~`900`、`bold`、`normal` | ✅️       | See [FontWeight] |\n\nExample:\n\n```html\n\u003cweight=500\u003efoo\u003c/weight\u003e\n\u003cweight weight=100\u003ebar\u003c/weight\u003e\n```\n\n#### 2. BoldMarkup\n\nTags: `b` `bold` `strong`\n\n| Parameter           | Value                       | Required | Description      |\n|---------------------|-----------------------------|----------|------------------|\n| `weight` (simplify) | `100`~`900`、`bold`、`normal` | ✅️       | See [FontWeight] |\n\n```html\n\u003cb\u003eHypertext\u003c/b\u003e\n\u003cbold=900\u003eHypertext\u003c/bold\u003e\n\u003cstrong weight=100\u003eHypertext\u003c/strong\u003e\n```\n\n#### 3. FontStyleMarkup\n\nTag: `font-style`\n\n| Parameter               | Value             | Required | Description      |\n|-------------------------|-------------------|----------|------------------|\n| `font-style` (simplify) | `normal` `italic` | ✅        | See [FontWeight] |\n\nExample:\n\n```html\n\u003cfont-style=italic\u003efoo\u003c/font-style\u003e\n\u003cfont-style font-style=normal\u003ebar\u003c/font-style\u003e\n```\n\n#### 4. ItalicMarkup\n\nTag: `i`\n\nExample:\n\n```html\n\u003ci\u003ebar\u003c/i\u003e\n```\n\n#### 5. TextDecorationMarkup\n\nTag: `text-decor`\n\n| Parameter          | Value                                                  | Required | Description                            |\n|--------------------|--------------------------------------------------------|----------|----------------------------------------|\n| `decor` (simplify) | `none` `underline` `overline` `lineThrough`            | ✅        | Text decoration [TextDecoration]       |\n| `style`            | `double` `dashed` `dotted` `solid` `wavy`              | ☑️       | Decoration style [TextDecorationStyle] |\n| `color`            | [Hex Color](#hex-colors) or [Color Name](#color-names) | ☑️       | Decoration color                       |\n| `thickness`        | double                                                 | ☑️       | Decoration line thickness              |\n\nExample:\n\n```html\n\u003ctext-decor=underline style=dotted\u003efoo\u003c/text-decor\u003e\n\u003ctext-decor decor=lineThrough color=red thickness=2\u003ebar\u003c/text-decor\u003e\n```\n\n#### 6. DelMarkup\n\nTag: `del`\n\n| Parameter   | Value                                                  | Required | Description                            |\n|-------------|--------------------------------------------------------|----------|----------------------------------------|\n| `style`     | `double` `dashed` `dotted` `solid` `wavy`              | ☑️       | Decoration style [TextDecorationStyle] |\n| `color`     | [Hex Color](#hex-colors) or [Color Name](#color-names) | ☑️       | Decoration color                       |\n| `thickness` | double                                                 | ☑️       | Decoration line thickness              |\n\nExample:\n\n```html\n\u003cdel color=red\u003ebar\u003c/del\u003e\n```\n\n#### 7. UnderlineMarkup\n\nTag: `u` `ins`\n\n| Parameter   | Value                                                  | Required | Description                            |\n|-------------|--------------------------------------------------------|----------|----------------------------------------|\n| `style`     | `double` `dashed` `dotted` `solid` `wavy`              | ☑️       | Decoration style [TextDecorationStyle] |\n| `color`     | [Hex Color](#hex-colors) or [Color Name](#color-names) | ☑️       | Decoration color                       |\n| `thickness` | double                                                 | ☑️       | Decoration line thickness              |\n\nExample:\n\n```html\n\u003cu style=wavy\u003ebar\u003c/u\u003e\n```\n\n#### 8. ColorMarkup\n\nTag: `color`\n\nParameters:\n\n| Parameter          | Value                                                  | Required | Description |\n|--------------------|--------------------------------------------------------|----------|-------------|\n| `color` (simplify) | [Hex Color](#hex-colors) or [Color Name](#color-names) | ✅        | Text color  |\n\nExample:\n\n```html\n\u003ccolor=red\u003ebar\u003c/color\u003e\n\u003ccolor color=#FF0\u003ebar\u003c/color\u003e\n```\n\n#### 9. SizeMarkup\n\nTag: `size`\n\nParameters:\n\n| Parameter         | Value  | Required | Description |\n|-------------------|--------|----------|-------------|\n| `size` (simplify) | double | ✅        | Text size   |\n\nExample:\n\n```html\n\u003csize=red\u003ebar\u003c/size\u003e\n\u003csize color=#FF0\u003ebar\u003c/size\u003e\n```\n\n### 4) GradientMarkup\n\nSets a linear gradient for the specified range of text.\n\nTag: `gradient`\n\nParameters:\n\n| Parameter   | Value                                                  | Required | Description                                                    |\n|-------------|--------------------------------------------------------|----------|----------------------------------------------------------------|\n| `colors`    | [Hex Color](#hex-colors) or [Color Name](#color-names) | ✅        | Gradient colors                                                |\n| `stops`     | List\u003cdouble\u003e                                           | ☑️       | Values between 0.0 and 1.0 for gradient stops [LinearGradient] |\n| `rotation`  | Angle (0~360)                                          | ☑️       | Rotation angle for gradient                                    |\n| `tile-mode` | `clamp` (default) `repeated` `mirror` `decal`          | ☑️       | Tiling mode                                                    |\n| `alignment` | `baseline` `middle` `top` `bottom`...                  | ☑️       | See [PlaceholderAlignment]                                     |\n| `baseline`  | `alphabetic` `ideographic`                             | ☑️       | See [TextBaseline]                                             |\n\nExample:\n\n```html\n\u003cgradient colors=\"red, green\" rotation=45\u003ebar\u003c/gradient\u003e\n\u003cgradient colors=\"#F00,#00F\" rotation=45\u003ebar\u003c/gradient\u003e\n```\n\n### 5) ImageMarkup\n\nAdd image, support custom parsing `src` and creating image widgets through `imageBuilder`.\n\n\u003e [Note] The default implementation of network image is `NetworkImage`, which does not support disk\n\u003e caching. If necessary, please use `ImageMarkup.imagebuilder`.\n\nTag: `img` `image`\n\nParameters:\n\n| Parameter   | Value                                                              | Required | Description                                            |\n|-------------|--------------------------------------------------------------------|----------|--------------------------------------------------------|\n| `src`       | URI string                                                         | ✅        | Image path (supports `http[s]://`, `asset://`, `path`) |\n| `size`      | List\\\u003cdouble\\\u003e                                                     | ☑️       | Image width and height (1~2 values)                    |\n| `width`     | double                                                             | ☑️       | Image width                                            |\n| `height`    | double                                                             | ☑️       | Image height                                           |\n| `color`     | [Hex Color](#hex-colors) or [Color Name](#color-names)             | ☑️       | Colorize the picture                                   |\n| `fit`       | `fill` `contain` `cover` `fitWidth` `fitHeight` `none` `scaleDown` | ☑️       | BoxFit modes                                           |\n| `align`     | `topLeft` `center` `bottomLeft`...                                 | ☑️       | Alignment options                                      |\n| `alignment` | `baseline` `middle` `top` `bottom`...                              | ☑️       | See [PlaceholderAlignment]                             |\n| `baseline`  | `alphabetic` `ideographic`                                         | ☑️       | See [TextBaseline]                                     |\n\nExample:\n\n```html\n\u003cimg src=\"https://example.com/avatar.png\" size=50 fit=cover color=orange/\u003e\n\u003cimg src=\"asset://images/icon.png\" size=\"50,100\"/\u003e\n\u003cimg src=\"path/to/icon.png\" width=\"50\" height=\"50\"/\u003e \u003c!--File path--\u003e\n```\n\n### 6) GapMarkup\n\nAdds space gaps.\n\nTag: `gap`\n\nParameters:\n\n| Parameter        | Value  | Required | Description |\n|------------------|--------|----------|-------------|\n| `gap` (simplify) | double | ✅        | Gap size    |\n\nExample:\n\n```html\n\u003cgap=10 /\u003e\n\u003cgap gap=\"50\"/\u003e\n```\n\n### 7) PaddingMarkup\n\nAdds padding inside an element.\n\nTag: `padding`\n\nParameters:\n\n| Parameter            | Value                                 | Required | Description                                  |\n|----------------------|---------------------------------------|----------|----------------------------------------------|\n| `padding` (simplify) | double                                | ✅        | [Padding value](#margin-values) (1~4 values) |\n| `hor`                | List\\\u003cdouble\\\u003e                        | ☑️       | Horizontal padding (1~2 values)              |\n| `ver`                | List\\\u003cdouble\\\u003e                        | ☑️       | Vertical padding (1~2 values)                |\n| `alignment`          | `baseline` `middle` `top` `bottom`... | ☑️       | See [PlaceholderAlignment]                   |\n| `baseline`           | `alphabetic` `ideographic`            | ☑️       | See [TextBaseline]                           |\n\nExample:\n\n```html\n\u003cpadding=\"10, 20\"\u003efoo\u003c/padding\u003e \u003c!-- Set top/bottom padding to 10, left/right padding to 20 --\u003e\n\u003cpadding padding=\"50\"/\u003e \u003c!-- Set all padding to 50 --\u003e\n\u003cpadding hor=\"10, 20\"/\u003e \u003c!-- Set left padding to 10, right padding to 20 --\u003e\n\u003cpadding ver=\"20\"/\u003e \u003c!-- Set vertical padding to 20 --\u003e\n```\n\n## 6) PatternMarkup\n\nA pattern-matching-based markup, used for recognizing and styling specific patterns such as user mentions (`@foo`), topics (`#flutter`), and email addresses (`foo@bar.com`).\n\nYou can define custom pattern markups by extending `PatternMarkup` or `DefaultPatternMarkup`.\n\n**Public Constructor Parameters:**\n\n| Parameter Name    | Type                   | Required | Description                                                                   |\n|:------------------|:-----------------------|:---------|:------------------------------------------------------------------------------|\n| `style`           | `TextStyle`            | ✅️       | The text style to apply to the matched pattern.                               |\n| `pattern`         | `String`               | ✅️       | The regular expression string used for pattern matching.                      |\n| `tag`             | `String`               | ✅️       | The corresponding tag name in the lexical tree.                               |\n| `startCharacter`  | `int`                  | ☑️       | The starting matching character (used to reduce the number of regex matches). |\n| `enableLongPress` | `bool`                 | ☑️       | Whether to enable the long-press event.                                       |\n| `enableTap`       | `bool`                 | ☑️       | Whether to enable the tap (click) event.                                      |\n| `cursor`          | `MouseCursor`          | ☑️       | The mouse cursor style when hovering over the pattern.                        |\n| `tooltip`         | `String`               | ☑️       | The tooltip text displayed on mouse hover.                                    |\n| `alignment`       | `PlaceholderAlignment` | ☑️       | The alignment of the inline placeholder.                                      |\n| `baseline`        | `TextBaseline`         | ☑️       | The text baseline for the inline placeholder.                                 |\n\n**Predefined Pattern Markups:**\n\n\u003e [!WARNING]\n\u003e Using pattern markups may result in **slower performance** compared to not using them.\n\u003e The default predefined markups are **not** automatically added to `Hypertext` and must be added manually (via `Hypertext.markups` or `HypertextThemeExtension.markups`).\n\n| Markup          | Description       | Usage Example |\n|:----------------|:------------------|:--------------|\n| `MentionMarkup` | Mention Tag       | `@foo`        |\n| `EmailMarkup`   | Email Address Tag | `foo@bar.com` |\n| `TopicMarkup`   | Topic Tag         | `#flutter`    |\n\n## Advanced\n\n### Custom Markups\n\n**Defining a Custom Markup:**\n\n```dart\nclass CustomMarkup extends TagMarkup {\n  const CustomMarkup() : super('your-tag');\n\n  @override\n  HypertextSpan onMarkup(List\u003cHypertextSpan\u003e? children, MarkupContext ctx) {\n    return HypertextTextSpan(children: children, style: TextStyle());\n    return HypertextWidgetSpan(child: child);\n  }\n}\n```\n\n**Setting Custom Markup:**\n\n```dart\nHypertext(\n    text,\n    markups: [...kDefaultMarkups, CustomMarkup()],\n)\n```\n\nOr\n\n```dart\nThemeData(\n  extensions: [HypertextThemeExtension(markups: [...kDefaultMarkups, CustomMarkup()])],\n)\n```\n\n### Support for multiple themes\n\n\u003e You can see an **[ example ](example/lib/settings.dart)** of a theme adaptation。\n\n**1. Define color mapper**\n\n```dart\nfinal lightColorMapper = {\n  'appRed': appLightRed,\n  'appGreen': appLightGreen,\n};\nfinal darkColorMapper = {\n  'appRed': appDarkRed,\n  'appGreen': appDarkGreen,\n};\n```\n\n**2. Define style mapper**\n\n```dart\nfinal styleMapper = {\n  'myStyle': TextStyle(\n    fontSize: 12,\n    decoration: TextDecoration.underline,\n  ),\n};\n```\n\n**3. Apply to the theme**\n\n```dart\nfinal lightHypertextThemeExt = HypertextThemeExtension(\n  colorMapper: lightColorMapper,\n  styleMapper: styleMapper,\n);\nfinal darkHypertextThemeExt = HypertextThemeExtension(\n  colorMapper: darkColorMapper,\n  styleMapper: styleMapper,\n);\n\nfinal lightTheme = ThemeData(extensions: [lightHypertextThemeExt]);\nfinal darkTheme = ThemeData(extensions: [darkHypertextThemeExt]);\n\nMaterialApp(\n  themeMode: ThemeMode.light,\n  theme: lightTheme,\n  darkTheme: darkTheme,\n  locale: settings.local,\n  localizationsDelegates: L.localizationsDelegates,\n  supportedLocales: L.supportedLocales,\n  home: HomePage(),\n)\n```\n\n**4. Usage**\n\n```dart\nHypertext(\n  \"\u003cgradient colors='appGreen,appRed' alignment=middle\u003eHypertext\u003c/gradient\u003e是一个基于Flutter的\u003cstyle name=myStyle\u003e高扩展性\u003c/style\u003e的富文本组件。\"\n)\n```\n\n## Special Notes\n\n### Color Names\n\nBy default, [CSS Basic Colors](https://www.w3.org/wiki/CSS/Properties/color/keywords)[kBasicCSSColors] are supported. You can customize color name mappings via `Hypertext.colorMapper` and `HypertextThemeExtension.colorMapper`.\n\n### Hex Colors\n\nSupports the following [formats](https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color#syntax):\n\n1. **RGB**, e.g., `#0F0`\n2. **RGBA**, e.g., `#0F0F`\n3. **RRGGBB**, e.g., `#00FF00`\n4. **RRGGBBAA**, e.g., `#00FF00FF`\n\n### Margin Values\n\nSupports the following formats:\n\n1. `10` → `left=10 top=10 right=10 bottom=10`\n2. `10, 20` → `left=20 top=10 right=20 bottom=10`\n3. `10, 20, 30` → `left=20 top=10 right=20 bottom=30`\n4. `10, 20, 30, 40` → `left=10 top=20 right=30 bottom=40`\n\n## Things to Keep in Mind\n\n1. When customizing Markups, it is recommended to use `HypertextTextSpan` or `HypertextWidgetSpan` to help inherit styles from parent `WidgetSpan` for text within it.\n\n## TODO\n\n- ☑️ Improve selectability: Add built-in selectability options and pass selectability to `WidgetSpan`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffingerart%2Fflutter_hypertext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffingerart%2Fflutter_hypertext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffingerart%2Fflutter_hypertext/lists"}