Merge pull request #26 from DvdNss/main

+ highlightBuilder && - default padding on code block

Merge pull request #26 from DvdNss/main
+ highlightBuilder && - default padding on code block
Samin yeasar Sohag · GitHub
Commit f45132b2cd4b069d3e5703561deb5c7e51d3c560 f45132b2 2 parents 330069b1 ba0b1462
Showing 4 changed files with 108 additions and 26 deletions
example/lib/main.dart
lib/custom_widgets/markdow_config.dart
lib/gpt_markdown.dart
lib/markdown_component.dart
--- a/example/lib/main.dart
View file @f45132b
+++ b/example/lib/main.dart
View file @f45132b
@@ -99,6 +99,7 @@ class MarkdownHelper {
 You can use Markdown to format text easily. Here are some examples:
+- `Highlighted Text`: `This text is highlighted`
 - **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)
@@ -266,6 +267,29 @@ Markdown and LaTeX can be powerful tools for formatting text and mathematical ex
                                       style: const TextStyle(
                                         fontSize: 15,
                                       ),
+                                      highlightBuilder: (context, text, style) {
+                                        return Container(
+                                          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+                                          decoration: BoxDecoration(
+                                            color: Theme.of(context).colorScheme.secondaryContainer,
+                                            borderRadius: BorderRadius.circular(4),
+                                            border: Border.all(
+                                              color: Theme.of(context).colorScheme.secondary.withOpacity(0.5),
+                                              width: 1,
+                                            ),
+                                          ),
+                                          child: Text(
+                                            text,
+                                            style: TextStyle(
+                                              color: Theme.of(context).colorScheme.onSecondaryContainer,
+                                              fontFamily: 'monospace',
+                                              fontWeight: FontWeight.bold,
+                                              fontSize: style.fontSize != null ? style.fontSize! * 0.9 : 13.5,
+                                              height: style.height,
+                                            ),
+                                          ),
+                                        );
+                                      },
                                       latexWorkaround: (tex) {
                                         List<String> stack = [];
                                         tex = tex.splitMapJoin(
@@ -377,6 +401,20 @@ Markdown and LaTeX can be powerful tools for formatting text and mathematical ex
                                         );
                                       },
                                     );
+                                    codeBuilder: (context, name, code) {
+                                      return Padding(
+                                        padding: const EdgeInsets.symmetric(horizontal: 16),
+                                        child: Text(
+                                          code.trim(),
+                                          style: TextStyle(
+                                            fontFamily: 'JetBrains Mono',
+                                            fontSize: 14,
+                                            height: 1.5,
+                                            color: Theme.of(context).colorScheme.onSurface,
+                                          ),
+                                        ),
+                                      );
+                                    };
                                     if (selectable) {
                                       child = SelectionArea(
                                         child: child,
--- a/lib/custom_widgets/markdow_config.dart
View file @f45132b
+++ b/lib/custom_widgets/markdow_config.dart
View file @f45132b
@@ -12,6 +12,8 @@ class GptMarkdownConfig {
     this.followLinkColor = false,
     this.codeBuilder,
     this.sourceTagBuilder,
+    this.highlightBuilder,
+    this.linkBuilder,
     this.maxLines,
     this.overflow,
   });
@@ -32,6 +34,8 @@ class GptMarkdownConfig {
       codeBuilder;
   final int? maxLines;
   final TextOverflow? overflow;
+  final Widget Function(BuildContext context, String text, TextStyle style)? highlightBuilder;
+  final Widget Function(BuildContext context, String text, String url, TextStyle style)? linkBuilder;
   GptMarkdownConfig copyWith({
     TextStyle? style,
@@ -51,6 +55,8 @@ class GptMarkdownConfig {
         codeBuilder,
     final int? maxLines,
     final TextOverflow? overflow,
+    final Widget Function(BuildContext context, String text, TextStyle style)? highlightBuilder,
+    final Widget Function(BuildContext context, String text, String url, TextStyle style)? linkBuilder,
   }) {
     return GptMarkdownConfig(
       style: style ?? this.style,
@@ -65,6 +71,8 @@ class GptMarkdownConfig {
       sourceTagBuilder: sourceTagBuilder ?? this.sourceTagBuilder,
       maxLines: maxLines ?? this.maxLines,
       overflow: overflow ?? this.overflow,
+      highlightBuilder: highlightBuilder ?? this.highlightBuilder,
+      linkBuilder: linkBuilder ?? this.linkBuilder,
     );
   }
--- a/lib/gpt_markdown.dart
View file @f45132b
+++ b/lib/gpt_markdown.dart
View file @f45132b
@@ -34,6 +34,8 @@ class GptMarkdown extends StatelessWidget {
     this.latexBuilder,
     this.codeBuilder,
     this.sourceTagBuilder,
+    this.highlightBuilder,
+    this.linkBuilder,
     this.maxLines,
     this.overflow,
   });
@@ -53,6 +55,8 @@ class GptMarkdown extends StatelessWidget {
   final Widget Function(BuildContext context, String name, String code)?
       codeBuilder;
   final Widget Function(BuildContext, String, TextStyle)? sourceTagBuilder;
+  final Widget Function(BuildContext context, String text, TextStyle style)? highlightBuilder;
+  final Widget Function(BuildContext context, String text, String url, TextStyle style)? linkBuilder;
   @override
   Widget build(BuildContext context) {
@@ -93,6 +97,8 @@ class GptMarkdown extends StatelessWidget {
         maxLines: maxLines,
         overflow: overflow,
         sourceTagBuilder: sourceTagBuilder,
+        highlightBuilder: highlightBuilder,
+        linkBuilder: linkBuilder,
       ),
     ));
   }
--- a/lib/markdown_component.dart
View file @f45132b
+++ b/lib/markdown_component.dart
View file @f45132b
@@ -422,25 +422,37 @@ class HighlightedText extends InlineMd {
     final GptMarkdownConfig config,
   ) {
     var match = exp.firstMatch(text.trim());
-    var conf = config.copyWith(
-      style: config.style?.copyWith(
-            fontWeight: FontWeight.bold,
-            background: Paint()
-              ..color = GptMarkdownTheme.of(context).highlightColor
-              ..strokeCap = StrokeCap.round
-              ..strokeJoin = StrokeJoin.round,
-          ) ??
-          TextStyle(
-            fontWeight: FontWeight.bold,
-            background: Paint()
-              ..color = GptMarkdownTheme.of(context).highlightColor
-              ..strokeCap = StrokeCap.round
-              ..strokeJoin = StrokeJoin.round,
-          ),
-    );
+    var highlightedText = match?[1] ?? "";
+
+    if (config.highlightBuilder != null) {
+      return WidgetSpan(
+        alignment: PlaceholderAlignment.middle,
+        child: config.highlightBuilder!(
+          context,
+          highlightedText,
+          config.style ?? const TextStyle(),
+        ),
+      );
+    }
+
+    var style = config.style?.copyWith(
+          fontWeight: FontWeight.bold,
+          background: Paint()
+            ..color = GptMarkdownTheme.of(context).highlightColor
+            ..strokeCap = StrokeCap.round
+            ..strokeJoin = StrokeJoin.round,
+        ) ??
+        TextStyle(
+          fontWeight: FontWeight.bold,
+          background: Paint()
+            ..color = GptMarkdownTheme.of(context).highlightColor
+            ..strokeCap = StrokeCap.round
+            ..strokeJoin = StrokeJoin.round,
+        );
+
     return TextSpan(
-      text: match?[1],
-      style: conf.style,
+      text: highlightedText,
+      style: style,
     );
   }
 }
@@ -721,15 +733,35 @@ class ATagMd extends InlineMd {
     if (match?[1] == null && match?[2] == null) {
       return const TextSpan();
     }
+    
+    final linkText = match?[1] ?? "";
+    final url = match?[2] ?? "";
+    
+    // Use custom builder if provided
+    if (config.linkBuilder != null) {
+      return WidgetSpan(
+        child: GestureDetector(
+          onTap: () => config.onLinkTab?.call(url, linkText),
+          child: config.linkBuilder!(
+            context,
+            linkText,
+            url,
+            config.style ?? const TextStyle(),
+          ),
+        ),
+      );
+    }
+
+    // Default rendering
     var theme = GptMarkdownTheme.of(context);
     return WidgetSpan(
       child: LinkButton(
         hoverColor: theme.linkHoverColor,
         color: theme.linkColor,
         onPressed: () {
-          config.onLinkTab?.call("${match?[2]}", "${match?[1]}");
+          config.onLinkTab?.call(url, linkText);
         },
-        text: match?[1] ?? "",
+        text: linkText,
         config: config,
       ),
     );
@@ -892,11 +924,9 @@ class CodeBlockMd extends BlockMd {
     String codes = this.exp.firstMatch(text)?[2] ?? "";
     String name = this.exp.firstMatch(text)?[1] ?? "";
     codes = codes.replaceAll(r"```", "").trim();
-    return Padding(
-      padding: const EdgeInsets.all(16.0),
-      child: config.codeBuilder != null
-          ? config.codeBuilder?.call(context, name, codes)
-          : CodeField(name: name, codes: codes),
-    );
+    
+    return config.codeBuilder != null
+        ? config.codeBuilder!(context, name, codes)
+        : CodeField(name: name, codes: codes);
   }
 }