Merge pull request #823 from xoofx/fix-mermaid

Update DiagramExtension.cs

readme.md

@@ -48,7 +48,7 @@ You can **try Markdig online** and compare it to other implementations on [babel
   - [**Emoji**](src/Markdig.Tests/Specs/EmojiSpecs.md) support (inspired from [Markdown-it](https://markdown-it.github.io/))
   - [**SmartyPants**](src/Markdig.Tests/Specs/SmartyPantsSpecs.md) (inspired from [Daring Fireball - SmartyPants](https://daringfireball.net/projects/smartypants/))
   - [**Bootstrap**](src/Markdig.Tests/Specs/BootstrapSpecs.md) class (to output bootstrap class)
-  - [**Diagrams**](src/Markdig.Tests/Specs/DiagramsSpecs.md) extension whenever a fenced code block contains a special keyword, it will be converted to a div block with the content as-is (currently, supports [`mermaid`](https://knsv.github.io/mermaid/) and [`nomnoml`](https://github.com/skanaar/nomnoml) diagrams)
+  - [**Diagrams**](src/Markdig.Tests/Specs/DiagramsSpecs.md) extension whenever a fenced code block contains a special keyword, it will be converted to a div block with the content as-is (currently, supports [`mermaid`](https://mermaid.js.org) and [`nomnoml`](https://github.com/skanaar/nomnoml) diagrams)
   - [**YAML Front Matter**](src/Markdig.Tests/Specs/YamlSpecs.md) to parse without evaluating the front matter and to discard it from the HTML output (typically used for previewing without the front matter in MarkdownEditor)
   - [**JIRA links**](src/Markdig.Tests/Specs/JiraLinks.md) to automatically generate links for JIRA project references (Thanks to @clarkd: https://github.com/clarkd/MarkdigJiraLinker)
 - Starting with Markdig version `0.20.0+`, Markdig is compatible only with `NETStandard 2.0`, `NETStandard 2.1`, `NETCoreApp 2.1` and `NETCoreApp 3.1`.

src/Markdig.Tests/Specs/DiagramsSpecs.generated.cs

@@ -17,7 +17,7 @@ namespace Markdig.Tests.Specs.Diagrams
         // 
         // ## Mermaid diagrams
         //  
-        // Using a fenced code block with the `mermaid` language info will output a `<div class='mermaid'>` instead of a `pre/code` block:
+        // Using a fenced code block with the `mermaid` language info will output a `<pre class='mermaid'>` block (which is the default for other code block):
         [Test]
         public void ExtensionsMermaidDiagrams_Example001()
         {
@@ -34,14 +34,14 @@ namespace Markdig.Tests.Specs.Diagrams
             //     ```
             //
             // Should be rendered as:
-            //     <div class="mermaid">graph TD;
+            //     <pre class="mermaid">graph TD;
             //         A-->B;
             //         A-->C;
             //         B-->D;
             //         C-->D;
-            //     </div>
+            //     </pre>
 
-            TestParser.TestSpec("```mermaid\ngraph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n```", "<div class=\"mermaid\">graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n</div>", "diagrams|advanced", context: "Example 1\nSection Extensions / Mermaid diagrams\n");
+            TestParser.TestSpec("```mermaid\ngraph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n```", "<pre class=\"mermaid\">graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n</pre>", "diagrams|advanced", context: "Example 1\nSection Extensions / Mermaid diagrams\n");
         }
     }
 

src/Markdig.Tests/Specs/DiagramsSpecs.md

@@ -4,7 +4,7 @@ Adds support for diagrams extension:
 
 ## Mermaid diagrams
  
-Using a fenced code block with the `mermaid` language info will output a `<div class='mermaid'>` instead of a `pre/code` block:
+Using a fenced code block with the `mermaid` language info will output a `<pre class='mermaid'>` block (which is the default for other code block):
 
 ```````````````````````````````` example
 ```mermaid
@@ -15,12 +15,12 @@ graph TD;
     C-->D;
 ```
 .
-<div class="mermaid">graph TD;
+<pre class="mermaid">graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
-</div>
+</pre>
 ````````````````````````````````
 
 ## nomnoml diagrams

src/Markdig/Extensions/Diagrams/DiagramExtension.cs

@@ -1,5 +1,5 @@
 // Copyright (c) Alexandre Mutel. All rights reserved.
-// This file is licensed under the BSD-Clause 2 license. 
+// This file is licensed under the BSD-Clause 2 license.
 // See the license.txt file in the project root for more information.
 
 using Markdig.Renderers;
@@ -22,9 +22,8 @@ public class DiagramExtension : IMarkdownExtension
         if (renderer is HtmlRenderer htmlRenderer)
         {
             var codeRenderer = htmlRenderer.ObjectRenderers.FindExact<CodeBlockRenderer>()!;
-            // TODO: Add other well known diagram languages
-            codeRenderer.BlocksAsDiv.Add("mermaid");
+            codeRenderer.BlockMapping["mermaid"] = "pre";
             codeRenderer.BlocksAsDiv.Add("nomnoml");
         }
     }
-}
+}

src/Markdig/Renderers/Html/CodeBlockRenderer.cs

@@ -1,5 +1,5 @@
 // Copyright (c) Alexandre Mutel. All rights reserved.
-// This file is licensed under the BSD-Clause 2 license. 
+// This file is licensed under the BSD-Clause 2 license.
 // See the license.txt file in the project root for more information.
 
 using Markdig.Parsers;
@@ -13,8 +13,6 @@ namespace Markdig.Renderers.Html;
 /// <seealso cref="HtmlObjectRenderer{CodeBlock}" />
 public class CodeBlockRenderer : HtmlObjectRenderer<CodeBlock>
 {
-    private HashSet<string>? _blocksAsDiv;
-
     /// <summary>
     /// Initializes a new instance of the <see cref="CodeBlockRenderer"/> class.
     /// </summary>
@@ -25,23 +23,32 @@ public class CodeBlockRenderer : HtmlObjectRenderer<CodeBlock>
     /// <summary>
     /// Gets a map of fenced code block infos that should be rendered as div blocks instead of pre/code blocks.
     /// </summary>
-    public HashSet<string> BlocksAsDiv => _blocksAsDiv ??= new HashSet<string>(StringComparer.OrdinalIgnoreCase);
+    public HashSet<string> BlocksAsDiv { get; } = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
+
+    /// <summary>
+    /// Gets a map of custom block mapping to render as custom blocks instead of pre/code blocks.
+    /// For example defining {"mermaid", "pre"} will render a block with info `mermaid` as a `pre` block but without the code HTML element.
+    /// </summary>
+    public Dictionary<string, string> BlockMapping { get; } = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);
 
     protected override void Write(HtmlRenderer renderer, CodeBlock obj)
     {
         renderer.EnsureLine();
 
-        if (_blocksAsDiv is not null && (obj as FencedCodeBlock)?.Info is string info && _blocksAsDiv.Contains(info))
+        if ((obj as FencedCodeBlock)?.Info is string info && (BlocksAsDiv.Contains(info) || BlockMapping.ContainsKey(info)))
         {
             var infoPrefix = (obj.Parser as FencedCodeBlockParser)?.InfoPrefix ??
                              FencedCodeBlockParser.DefaultInfoPrefix;
 
+            var htmlBlock = BlockMapping.TryGetValue(info, out var blockType) ? blockType : "div";
+
             // We are replacing the HTML attribute `language-mylang` by `mylang` only for a div block
             // NOTE that we are allocating a closure here
 
             if (renderer.EnableHtmlForBlock)
             {
-                renderer.Write("<div")
+                renderer.WriteRaw('<');
+                renderer.Write(htmlBlock)
                         .WriteAttributes(obj.TryGetAttributes(),
                             cls => cls.StartsWith(infoPrefix, StringComparison.Ordinal) ? cls.Substring(infoPrefix.Length) : cls)
                         .WriteRaw('>');
@@ -51,7 +58,7 @@ public class CodeBlockRenderer : HtmlObjectRenderer<CodeBlock>
 
             if (renderer.EnableHtmlForBlock)
             {
-                renderer.WriteLine("</div>");
+                renderer.Write("</").Write(htmlBlock).WriteLine(">");
             }
         }
         else

src/Markdig/Renderers/MarkdownObjectRenderer.cs

@@ -28,15 +28,15 @@ public abstract class MarkdownObjectRenderer<TRenderer, TObject> : IMarkdownObje
 
     public virtual void Write(RendererBase renderer, MarkdownObject obj)
     {
-        var htmlRenderer = (TRenderer)renderer;
+        var typedRenderer = (TRenderer)renderer;
         var typedObj = (TObject)obj;
 
-        if (_tryWriters is not null && TryWrite(htmlRenderer, typedObj))
+        if (_tryWriters is not null && TryWrite(typedRenderer, typedObj))
         {
             return;
         }
 
-        Write(htmlRenderer, typedObj);
+        Write(typedRenderer, typedObj);
     }
 
     private bool TryWrite(TRenderer renderer, TObject obj)

src/markdig.sln.DotSettings

@@ -3,7 +3,9 @@
 This file is licensed under the BSD-Clause 2 license. 
 See the license.txt file in the project root for more information.</s:String>
 	<s:String x:Key="/Default/CodeStyle/Naming/CSharpNaming/PredefinedNamingRules/=PrivateInstanceFields/@EntryIndexedValue">&lt;Policy Inspect="True" Prefix="" Suffix="" Style="aaBb" /&gt;</s:String>
+	<s:String x:Key="/Default/CodeStyle/Naming/CSharpNaming/UserRules/=4a98fdf6_002D7d98_002D4f5a_002Dafeb_002Dea44ad98c70c/@EntryIndexedValue">&lt;Policy&gt;&lt;Descriptor Staticness="Instance" AccessRightKinds="Private" Description="Instance fields (private)"&gt;&lt;ElementKinds&gt;&lt;Kind Name="FIELD" /&gt;&lt;Kind Name="READONLY_FIELD" /&gt;&lt;/ElementKinds&gt;&lt;/Descriptor&gt;&lt;Policy Inspect="True" Prefix="" Suffix="" Style="aaBb" /&gt;&lt;/Policy&gt;</s:String>
 	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EFeature_002EServices_002ECodeCleanup_002EFileHeader_002EFileHeaderSettingsMigrate/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/Environment/SettingsMigration/IsMigratorApplied/=JetBrains_002EReSharper_002EPsi_002ECSharp_002ECodeStyle_002ESettingsUpgrade_002EPredefinedNamingRulesToUserRulesUpgrade/@EntryIndexedValue">True</s:Boolean>
 	<s:String x:Key="/Default/Environment/UnitTesting/NUnitProvider/SetCurrentDirectoryTo/@EntryValue">TestFolder</s:String>
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=Autolink/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=Inlines/@EntryIndexedValue">True</s:Boolean>