Render Markdig Figure and FigureCaption blocks

ConsoleMarkdownRenderer.Example/data/example.md

@@ -147,6 +147,14 @@ HTML
 :   HyperText Markup Language.
 :   The standard language for creating web pages.
 
+## Figures
+
+Figures group an image (or other content) with an optional caption.
+
+^^^ A diagram illustrating the Markdown figure syntax.
+![diagram](http://example.com/diagram.png)
+^^^
+
 ## Thematic Break (Horizontal Rule)
 
 ---
@@ -208,6 +216,7 @@ Some text after the block
 - [x] Footnotes
 - [x] Custom containers (admonitions)
 - [x] Abbreviations
+- [x] Figures
 - [ ] One to always leave unchecked
 
 And here is the end

ConsoleMarkdownRenderer.Tests/RendererTests.cs

@@ -457,6 +457,15 @@ public void RendererTests_QuoteBlockTest(string text, Decoration decoration)
             AssertMarkdownYieldsFormat("quoteBlock", text, new Style(decoration: decoration), useCrazy: true);
         }
 
+        [TestMethod]
+        [DataRow(false)]
+        [DataRow(true)]
+        public void RendererTests_FigureCaptionTest(bool useCrazy)
+        {
+            // The caption inline content should carry the FigureCaption style (italic by default)
+            AssertMarkdownYieldsFormat("figure", "A descriptive caption for the figure.", new Style(decoration: Decoration.Italic), useCrazy);
+        }
+
         [TestMethod]
         [DataRow(false)]
         [DataRow(true)]
@@ -779,6 +788,7 @@ private static Dictionary<string, int> Counts(string text)
             DefinitionList = c_crazyFormat,
             DefinitionTerm = c_crazyFormat,
             FencedCodeBlockInfo = c_crazyFormat,
+            FigureCaption = c_crazyFormat,
             Footnote = c_crazyFormat,
             FootnoteGroup = c_crazyFormat,
             FootnoteLink = c_crazyFormat,

ConsoleMarkdownRenderer.Tests/resources/bracketEscaping.md

@@ -42,5 +42,8 @@ Paragraph with [test21] reference[^bracketfn] embedded.
 Inline ::tag [test29]:: container.
 
 Paragraph mentioning testAbbr abbreviation usage.
-
 *[testAbbr]: [test30] expansion with [test31] brackets
+
+^^^ [test30] figure caption with **[test31] bold** content.
+![[test32] alt](http://example.com/img.png)
+^^^

ConsoleMarkdownRenderer.Tests/resources/bracketEscaping.txt

@@ -49,6 +49,10 @@
 │ └───────────────────────────────────────────┘                                                                                                                                                                                                                                                                                                                        │
 │ Inline tag [test29] container.                                                                                                                                                                                                                                                                                                                                       │
 │ Paragraph mentioning testAbbr ([test30] expansion with [test31] brackets) abbreviation usage.                                                                                                                                                                                                                                                                        │
+│ ┌─────────────────────────────────────────────────────┐                                                                                                                                                                                                                                                                                                              │
+│ │ [test30] figure caption with [test31] bold content. │                                                                                                                                                                                                                                                                                                              │
+│ │ ![[test32] alt](http://example.com/img.png)         │                                                                                                                                                                                                                                                                                                              │
+│ └─────────────────────────────────────────────────────┘                                                                                                                                                                                                                                                                                                              │
 │ ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │
 │ │ ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── │ │
 │ │ ┌───────────────────────────────────────────────────────┐                                                                                                                                                                                                                                                                                                        │ │

ConsoleMarkdownRenderer.Tests/resources/figure.md

@@ -0,0 +1,3 @@
+^^^ A descriptive caption for the figure.
+![sample](http://example.com/img.png)
+^^^

ConsoleMarkdownRenderer.Tests/resources/figure.txt

@@ -0,0 +1,6 @@
+┌───────────────────────────────────────────┐
+│ ┌───────────────────────────────────────┐ │
+│ │ A descriptive caption for the figure. │ │
+│ │ ![sample](http://example.com/img.png) │ │
+│ └───────────────────────────────────────┘ │
+└───────────────────────────────────────────┘

DisplayOptions.cs

@@ -73,6 +73,13 @@ public sealed class DisplayOptions
         /// </summary>
         public TextStyle FencedCodeBlockInfo { get; set; } = new(foreground: TextColor.Green, background: TextColor.Blue);
 
+        /// <summary>
+        /// Style applied to the inline content of a <see cref="Markdig.Extensions.Figures.FigureCaption"/>
+        /// (the optional caption line of a Markdig <see cref="Markdig.Extensions.Figures.Figure"/> block).
+        /// Italic by default to visually distinguish it from the figure's body content.
+        /// </summary>
+        public TextStyle FigureCaption { get; set; } = new(decoration: TextDecoration.Italic);
+
         // List of Styles to use for headers the first will be used for #, the second for ## and so on
         // If the document referenced more than the length of the list, the Style in header will be used.
         // By default the first entry is a FigletTextStyle, so top-level (#) headings render as
@@ -169,6 +176,7 @@ public sealed class DisplayOptions
             DefinitionTerm = this.DefinitionTerm,
             Emojis = this.Emojis,
             FencedCodeBlockInfo = this.FencedCodeBlockInfo,
+            FigureCaption = this.FigureCaption,
             Footnote = this.Footnote,
             FootnoteGroup = this.FootnoteGroup,
             FootnoteLink = this.FootnoteLink,

ObjectRenderers/ConsoleObjectRenderers.cs

@@ -1,6 +1,7 @@
 using BoxOfYellow.ConsoleMarkdownRenderer.Styling;
 using Markdig.Extensions.CustomContainers;
 using Markdig.Extensions.DefinitionLists;
+using Markdig.Extensions.Figures;
 using Markdig.Extensions.Footnotes;
 using Markdig.Extensions.TaskLists;
 using Markdig.Renderers;
@@ -99,6 +100,26 @@ protected override void Write(ConsoleRenderer renderer, DefinitionTerm obj)
                 .EndInline();
     }
 
+    internal class ConsoleFigureRenderer : ConsoleObjectRenderer<Figure>
+    {
+        protected override void Write(ConsoleRenderer renderer, Figure obj)
+            => renderer
+                .NewFrame(borderStyle: Style.Plain)
+                .WriteChildrenChain(obj)
+                .CompleteFrame();
+    }
+
+    internal class ConsoleFigureCaptionRenderer : ConsoleObjectRenderer<FigureCaption>
+    {
+        protected override void Write(ConsoleRenderer renderer, FigureCaption obj)
+            => renderer
+                .StartInline()
+                .AddInLine($"[{renderer.Options.FigureCaption.ToSpectreStyle().ToMarkup()}]")
+                .WriteLeafInline(obj)
+                .AddInLine("[/]")
+                .EndInline();
+    }
+
     internal class ConsoleFootnoteRenderer : ConsoleObjectRenderer<Footnote>
     {
         protected override void Write(ConsoleRenderer renderer, Footnote obj)

ObjectRenderers/ConsoleRenderer.cs

@@ -28,6 +28,8 @@ internal ConsoleRenderer(DisplayOptions options, bool omitAutolinkInlineRenderer
                 new ConsoleDocumentRenderer(),
                 new ConsoleEmphasisInlineRenderer(),
                 new ConsoleEmojiInlineRenderer(),
+                new ConsoleFigureCaptionRenderer(),
+                new ConsoleFigureRenderer(),
                 new ConsoleFootnoteGroupRenderer(),
                 new ConsoleFootnoteLinkRenderer(),
                 new ConsoleFootnoteRenderer(),

docs/CHANGELOG.md

@@ -18,19 +18,20 @@
   - After
     <img width="338" height="58" alt="Image" src="https://github.com/user-attachments/assets/6b66b0fd-9cfa-4b40-8733-236ed5ab4b39" />
 - [#133](https://github.com/boxofyellow/ConsoleMarkdownRenderer/pull/133): Emit OSC 8 terminal hyperlinks from WriteLink via Spectre Markup
-- [#141](https://github.com/boxofyellow/ConsoleMarkdownRenderer/issues/141): Render Markdig AbbreviationInline nodes with their expansion title
+- [#142](https://github.com/boxofyellow/ConsoleMarkdownRenderer/pull/142): Render Markdig Figure and FigureCaption blocks
   - ```markdown
-    The HTML standard is maintained by the W3C.
-
-    *[HTML]: HyperText Markup Language
-    *[W3C]: World Wide Web Consortium
+    ^^^ A descriptive caption for the figure.
+    ![sample](http://example.com/img.png)
+    ^^^
     ```
   - Rendered
-    The HTML (HyperText Markup Language) standard is maintained by the W3C (World Wide Web Consortium).
+    ^^^ A descriptive caption for the figure.
+    ![sample](http://example.com/img.png)
+    ^^^
   - Before
-    <img width="266" height="38" alt="Image" src="https://github.com/user-attachments/assets/563c76ee-49a9-4bf3-b0f2-7c66c9302ccd" />
+    <img width="267" height="19" alt="Image" src="https://github.com/user-attachments/assets/64547b87-32eb-48d8-954b-c547443595f3" />
   - After
-    <img width="701" height="34" alt="Image" src="https://github.com/user-attachments/assets/ac12a25f-acd8-4c5c-9b03-9455077e2606" />
+    <img width="293" height="66" alt="Image" src="https://github.com/user-attachments/assets/0d44e717-9397-4bbf-8a95-2ab942e25140" />
 
 ### :wrench: Internal Improvements :wrench:
 - [#129](https://github.com/boxofyellow/ConsoleMarkdownRenderer/pull/129): Use ConfigureAwait(false) on awaits in published library code