[clang-doc] add Markdown Tag JS libraryusers/evelez7/clang-doc-markdown-tag

Enables Markdown rendering in comments according to CommonMark
specification. Text is required to be at the start of a line.

5 files changed, 200 insertions, 119 deletions

diff --git a/clang-tools-extra/clang-doc/assets/class-template.mustache b/clang-tools-extra/clang-doc/assets/class-template.mustache
index b1a7470f7c33..eb15b263a7d6 100644
--- a/clang-tools-extra/clang-doc/assets/class-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/class-template.mustache
@@ -130,7 +130,7 @@
                     <h1 class="hero__title-large">{{TagType}} {{Name}}</h1>
                     {{#Description}}
                     <div class="hero__subtitle">
-                        {{>Comments}}
+{{>Comments}}
                     </div>
                     {{/Description}}
                 </div>
@@ -145,9 +145,9 @@
                             <code class="language-cpp code-clang-doc" >{{Type}} {{Name}}</code>
                         </pre>
                         {{#MemberComments}}
-                        <div>
-                            {{>Comments}}
-                        </div>
+                            <div>
+{{>Comments}}
+                            </div>
                         {{/MemberComments}}
                     </div>
                     {{/PublicMembers}}
@@ -165,7 +165,7 @@
                         </pre>
                         {{#MemberComments}}
                         <div>
-                            {{>Comments}}
+{{>Comments}}
                         </div>
                         {{/MemberComments}}
                     </div>
@@ -226,4 +226,5 @@
     </div>
 </main>
 </body>
+<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Markdown-Tag/markdown-tag-commonmark.js"></script> 
 </html>
diff --git a/clang-tools-extra/clang-doc/assets/comment-template.mustache b/clang-tools-extra/clang-doc/assets/comment-template.mustache
index 4e38e5fb92d1..4f00ca3c4051 100644
--- a/clang-tools-extra/clang-doc/assets/comment-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/comment-template.mustache
@@ -7,37 +7,47 @@
 }}
 {{#BriefComments}}
     <div>
-    {{#.}}
-        <p>{{TextComment}}</p>
-    {{/.}}
+        <md>
+        {{#.}}
+            <p>
+{{TextComment}}
+            </p>
+        {{/.}}
+        </md>
     </div>
 {{/BriefComments}}
 {{#ParagraphComments}}
     <div>
-    {{#.}}
-        <p>{{TextComment}}</p>
-    {{/.}}
+        <md>
+        {{#.}}
+            <p>
+{{TextComment}}
+            </p>
+        {{/.}}
+        </md>
     </div>
 {{/ParagraphComments}}
-{{#ParagraphComment}}
-    {{#Children}}
-    {{>Comments}}
-    {{/Children}}
-{{/ParagraphComment}}
 {{#HasParamComments}}
     <h3>Parameters</h3>
     {{#ParamComments}}
     <div>
-        <b>{{ParamName}}</b> {{#Explicit}}{{Direction}}{{/Explicit}} {{#Children}}{{>Comments}}{{/Children}}
+        <b>{{ParamName}}</b> {{#Explicit}}{{Direction}}{{/Explicit}} 
+        {{#Children}}
+{{>Comments}}
+        {{/Children}}
     </div> 
     {{/ParamComments}}
 {{/HasParamComments}}
 {{#HasReturnComments}}
     <h3>Returns</h3>
     {{#ReturnComments}}
+    <md>
         {{#.}}
-        <p>{{TextComment}}</p>
+        <p>
+{{TextComment}}
+        </p>
         {{/.}}
+    </md>
     {{/ReturnComments}}
 {{/HasReturnComments}}
 {{#HasCodeComments}}
@@ -61,13 +71,13 @@
         </div>
         <div>
             {{#Children}}
-                {{>Comments}}
+{{>Comments}}
             {{/Children}}
         </div>
     </div>
 {{/BlockCommandComment}}
 {{#TextComment}}
     <div>
-        <p>{{TextComment}}</p>
+{{TextComment}}
     </div>
 {{/TextComment}}
diff --git a/clang-tools-extra/clang-doc/assets/enum-template.mustache b/clang-tools-extra/clang-doc/assets/enum-template.mustache
index 53da4669d824..51e821ab6b34 100644
--- a/clang-tools-extra/clang-doc/assets/enum-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/enum-template.mustache
@@ -34,7 +34,11 @@ enum {{Name}}
                 <td>{{ValueExpr}}</td>
                 {{/Value}}
                 {{#EnumValueComments}}
-                    <td>{{>Comments}}</td>
+                    <td>
+                        <md>
+{{>Comments}}
+                        </md>
+                    </td>
                 {{/EnumValueComments}}
             </tr>
             {{/Members}}
@@ -42,7 +46,9 @@ enum {{Name}}
     </table>
     {{#EnumComments}}
     <div>
-        {{>Comments}}
+        <md>
+{{>Comments}}
+        </md>
     </div>
     {{/EnumComments}}
     {{#Location}}
diff --git a/clang-tools-extra/clang-doc/assets/function-template.mustache b/clang-tools-extra/clang-doc/assets/function-template.mustache
index 2510a4de2cd6..e322884aae8b 100644
--- a/clang-tools-extra/clang-doc/assets/function-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/function-template.mustache
@@ -16,7 +16,7 @@
         {{! Function Comments }}
         {{#Description}}
         <div>
-            {{>Comments}}
+{{>Comments}}
         </div>
         {{/Description}}
     </div>
diff --git a/clang-tools-extra/test/clang-doc/basic-project.mustache.test b/clang-tools-extra/test/clang-doc/basic-project.mustache.test
index e2d9da60183f..f097d2b32dbc 100644
--- a/clang-tools-extra/test/clang-doc/basic-project.mustache.test
+++ b/clang-tools-extra/test/clang-doc/basic-project.mustache.test
@@ -62,13 +62,16 @@ HTML-SHAPE:                 <div class="hero__title">
 HTML-SHAPE:                     <h1 class="hero__title-large">class Shape</h1>
 HTML-SHAPE:                    <div class="hero__subtitle">
 HTML-SHAPE:                                    <div>
-HTML-SHAPE:                                        <p> Abstract base class for shapes.</p>
+HTML-SHAPE:                                        <p>
+HTML-SHAPE: Abstract base class for shapes.
+HTML-SHAPE:                                        </p>
 HTML-SHAPE:                                    </div>
 HTML-SHAPE:                                        <div>
-HTML-SHAPE:                                    <p></p>
 HTML-SHAPE:                                </div>
 HTML-SHAPE:                                    <div>
-HTML-SHAPE:                                    <p> Provides a common interface for different types of shapes.</p>
+HTML-SHAPE:                                    <p>
+HTML-SHAPE: Provides a common interface for different types of shapes.
+HTML-SHAPE:                                    </p>
 HTML-SHAPE:                                </div>
 HTML-SHAPE:                                                </div>
 HTML-SHAPE:                 </div>
@@ -85,16 +88,20 @@ HTML-SHAPE:             </code>
 HTML-SHAPE:         </pre>
 HTML-SHAPE:        <div>
 HTML-SHAPE:                        <div>
-HTML-SHAPE:                            <p> Calculates the area of the shape.</p>
+HTML-SHAPE:                                <p>
+HTML-SHAPE: Calculates the area of the shape.
+HTML-SHAPE:                                </p>
 HTML-SHAPE:                        </div>
 HTML-SHAPE:                            <div>
-HTML-SHAPE:                        <p></p>
+HTML-SHAPE:                        <p>
+HTML-SHAPE:                        </p>
 HTML-SHAPE:                    </div>
 HTML-SHAPE:                        <div>
-HTML-SHAPE:                        <p></p>
 HTML-SHAPE:                    </div>
 HTML-SHAPE:                    <h3>Returns</h3>
-HTML-SHAPE:                        <p> double The area of the shape.</p>
+HTML-SHAPE:                        <p>
+HTML-SHAPE: double The area of the shape.
+HTML-SHAPE:                        </p>
 HTML-SHAPE:                        </div>
 HTML-SHAPE:     </div>
 HTML-SHAPE: </div>
@@ -107,16 +114,18 @@ HTML-SHAPE:             </code>
 HTML-SHAPE:         </pre>
 HTML-SHAPE:        <div>
 HTML-SHAPE:                        <div>
-HTML-SHAPE:                            <p> Calculates the perimeter of the shape.</p>
+HTML-SHAPE:                            <p>
+HTML-SHAPE: Calculates the perimeter of the shape.
+HTML-SHAPE:                            </p>
 HTML-SHAPE:                        </div>
 HTML-SHAPE:                            <div>
-HTML-SHAPE:                        <p></p>
 HTML-SHAPE:                    </div>
 HTML-SHAPE:                        <div>
-HTML-SHAPE:                        <p></p>
 HTML-SHAPE:                    </div>
 HTML-SHAPE:                    <h3>Returns</h3>
-HTML-SHAPE:                        <p> double The perimeter of the shape.</p>
+HTML-SHAPE:                        <p>
+HTML-SHAPE: double The perimeter of the shape.
+HTML-SHAPE:                        </p>
 HTML-SHAPE:                        </div>
 HTML-SHAPE:     </div>
 HTML-SHAPE: </div>
@@ -129,10 +138,11 @@ HTML-SHAPE:             </code>
 HTML-SHAPE:         </pre>
 HTML-SHAPE:        <div>
 HTML-SHAPE:                        <div>
-HTML-SHAPE:                            <p> Virtual destructor.</p>
+HTML-SHAPE:                            <p>
+HTML-SHAPE: Virtual destructor.
+HTML-SHAPE:                            </p>
 HTML-SHAPE:                        </div>
 HTML-SHAPE:                            <div>
-HTML-SHAPE:                        <p></p>
 HTML-SHAPE:                    </div>
 HTML-SHAPE:                        </div>
 HTML-SHAPE:     </div>
@@ -218,13 +228,16 @@ HTML-CALC:             <section class="hero section-container">
 HTML-CALC:                 <div class="hero__title">
 HTML-CALC:                     <h1 class="hero__title-large">class Calculator</h1>
 HTML-CALC:                                    <div>
-HTML-CALC:                                        <p> A simple calculator class.</p>
+HTML-CALC:                                        <p>
+HTML-CALC: A simple calculator class.
+HTML-CALC:                                        </p>
 HTML-CALC:                                    </div>
 HTML-CALC:                                        <div>
-HTML-CALC:                                    <p></p>
 HTML-CALC:                                </div>
 HTML-CALC:                                    <div>
-HTML-CALC:                                    <p> Provides basic arithmetic operations.</p>
+HTML-CALC:                                    <p>
+HTML-CALC: Provides basic arithmetic operations.
+HTML-CALC:                                    </p>
 HTML-CALC:                                </div>
 HTML-CALC:                                                </div>
 HTML-CALC:                 </div>
@@ -256,33 +269,35 @@ HTML-CALC:             </code>
 HTML-CALC:         </pre>
 HTML-CALC:        <div>
 HTML-CALC:                        <div>
-HTML-CALC:                            <p> Adds two integers.</p>
+HTML-CALC:                            <p>
+HTML-CALC: Adds two integers.
+HTML-CALC:                            </p>
 HTML-CALC:                        </div>
 HTML-CALC:                            <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                        <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Parameters</h3>
 HTML-CALC:                    <div>
-HTML-CALC:                        <b>a</b>      <div>
-HTML-CALC:                        <p> First integer.</p>
+HTML-CALC:                        <b>a</b>      
+HTML-CALC:                        <div>
+HTML-CALC: First integer.
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <b>b</b>      <div>
-HTML-CALC:                        <p> Second integer.</p>
+HTML-CALC:                        <b>b</b>      
+HTML-CALC:                        <div>
+HTML-CALC: Second integer.
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Returns</h3>
-HTML-CALC:                        <p> int The sum of a and b.</p>
+HTML-CALC:                        <p>
+HTML-CALC: int The sum of a and b.
+HTML-CALC:                        </p>
 HTML-CALC:                        </div>
 HTML-CALC:     </div>
 HTML-CALC: </div>
@@ -295,16 +310,18 @@ HTML-CALC:             </code>
 HTML-CALC:         </pre>
 HTML-CALC:        <div>
 HTML-CALC:                        <div>
-HTML-CALC:                            <p> Subtracts the second integer from the first.</p>
+HTML-CALC:                            <p>
+HTML-CALC: Subtracts the second integer from the first.
+HTML-CALC:                            </p>
 HTML-CALC:                        </div>
 HTML-CALC:                            <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                        <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Returns</h3>
-HTML-CALC:                        <p> int The result of a - b.</p>
+HTML-CALC:                        <p>
+HTML-CALC: int The result of a - b.
+HTML-CALC:                        </p>
 HTML-CALC:                        </div>
 HTML-CALC:     </div>
 HTML-CALC: </div>
@@ -317,33 +334,35 @@ HTML-CALC:             </code>
 HTML-CALC:         </pre>
 HTML-CALC:        <div>
 HTML-CALC:                        <div>
-HTML-CALC:                            <p> Multiplies two integers.</p>
+HTML-CALC:                            <p>
+HTML-CALC: Multiplies two integers.
+HTML-CALC:                            </p>
 HTML-CALC:                        </div>
 HTML-CALC:                            <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                        <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Parameters</h3>
 HTML-CALC:                    <div>
-HTML-CALC:                        <b>a</b>      <div>
-HTML-CALC:                        <p> First integer.</p>
+HTML-CALC:                        <b>a</b>      
+HTML-CALC:                        <div>
+HTML-CALC: First integer.
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <b>b</b>      <div>
-HTML-CALC:                        <p> Second integer.</p>
+HTML-CALC:                        <b>b</b>      
+HTML-CALC:                    <div>
+HTML-CALC: Second integer.
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Returns</h3>
-HTML-CALC:                        <p> int The product of a and b.</p>
+HTML-CALC:                        <p> 
+HTML-CALC: int The product of a and b.
+HTML-CALC:                        </p>
 HTML-CALC:                        </div>
 HTML-CALC:     </div>
 HTML-CALC: </div>
@@ -356,34 +375,35 @@ HTML-CALC:             </code>
 HTML-CALC:         </pre>
 HTML-CALC:        <div>
 HTML-CALC:                        <div>
-HTML-CALC:                            <p> Divides the first integer by the second.</p>
+HTML-CALC:                            <p>
+HTML-CALC: Divides the first integer by the second.
+HTML-CALC:                            </p>
 HTML-CALC:                        </div>
 HTML-CALC:                            <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                        <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Parameters</h3>
 HTML-CALC:                    <div>
-HTML-CALC:                        <b>a</b>      <div>
-HTML-CALC:                        <p> First integer.</p>
+HTML-CALC:                        <b>a</b>      
+HTML-CALC:                        <div>
+HTML-CALC: First integer.
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <b>b</b>      <div>
-HTML-CALC:                        <p> Second integer.</p>
+HTML-CALC:                        <b>b</b>
+HTML-CALC:                        <div>
+HTML-CALC: Second integer.
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Returns</h3>
-HTML-CALC:                        <p> double The result of a / b.</p>
-HTML-CALC:                        <p></p>
+HTML-CALC:                        <p>
+HTML-CALC: double The result of a / b.
+HTML-CALC:                        </p>
 HTML-CALC:                        </div>
 HTML-CALC:     </div>
 HTML-CALC: </div>
@@ -396,33 +416,35 @@ HTML-CALC:             </code>
 HTML-CALC:         </pre>
 HTML-CALC:        <div>
 HTML-CALC:                        <div>
-HTML-CALC:                            <p> Performs the mod operation on integers.</p>
+HTML-CALC:                            <p>
+HTML-CALC: Performs the mod operation on integers.
+HTML-CALC:                            </p>
 HTML-CALC:                        </div>
 HTML-CALC:                            <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                        <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Parameters</h3>
 HTML-CALC:                    <div>
-HTML-CALC:                        <b>a</b>      <div>
-HTML-CALC:                        <p> First integer.</p>
+HTML-CALC:                        <b>a</b>      
+HTML-CALC:                        <div>
+HTML-CALC: First integer.
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <b>b</b>      <div>
-HTML-CALC:                        <p> Second integer.</p>
+HTML-CALC:                        <b>b</b>      
+HTML-CALC:                    <div>
+HTML-CALC: Second integer.
 HTML-CALC:                    </div>
 HTML-CALC:                    <div>
-HTML-CALC:                        <p></p>
 HTML-CALC:                    </div>
 HTML-CALC:                    </div>
 HTML-CALC:                    <h3>Returns</h3>
-HTML-CALC:                        <p> The result of a % b.</p>
+HTML-CALC:                        <p>
+HTML-CALC: The result of a % b.
+HTML-CALC:                        </p>
 HTML-CALC:                        </div>
 HTML-CALC:     </div>
 HTML-CALC: </div>
@@ -491,13 +513,18 @@ HTML-RECTANGLE:                 <div class="hero__title">
 HTML-RECTANGLE:                     <h1 class="hero__title-large">class Rectangle</h1>
 HTML-RECTANGLE:                    <div class="hero__subtitle">
 HTML-RECTANGLE:                                    <div>
-HTML-RECTANGLE:                                        <p> Rectangle class derived from Shape.</p>
+HTML-RECTANGLE:                                        <p>
+HTML-RECTANGLE: Rectangle class derived from Shape.
+HTML-RECTANGLE:                                        </p>
 HTML-RECTANGLE:                                    </div>
 HTML-RECTANGLE:                                        <div>
-HTML-RECTANGLE:                                    <p></p>
+HTML-RECTANGLE:                                    <p>
+HTML-RECTANGLE:                                    </p>
 HTML-RECTANGLE:                                </div>
 HTML-RECTANGLE:                                    <div>
-HTML-RECTANGLE:                                    <p> Represents a rectangle with a given width and height.</p>
+HTML-RECTANGLE:                                    <p>
+HTML-RECTANGLE: Represents a rectangle with a given width and height.
+HTML-RECTANGLE:                                    </p>
 HTML-RECTANGLE:                                </div>
 HTML-RECTANGLE:                                                </div>
 HTML-RECTANGLE:                 </div>
@@ -514,26 +541,31 @@ HTML-RECTANGLE:             </code>
 HTML-RECTANGLE:         </pre>
 HTML-RECTANGLE:        <div>
 HTML-RECTANGLE:                        <div>
-HTML-RECTANGLE:                            <p> Constructs a new Rectangle object.</p>
+HTML-RECTANGLE:                            <p>
+HTML-RECTANGLE: Constructs a new Rectangle object.
+HTML-RECTANGLE:                            </p>
 HTML-RECTANGLE:                        </div>
 HTML-RECTANGLE:                            <div>
-HTML-RECTANGLE:                        <p></p>
+HTML-RECTANGLE:                        <p>
+HTML-RECTANGLE:                        </p>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                        <div>
-HTML-RECTANGLE:                        <p></p>
+HTML-RECTANGLE:                        <p>
+HTML-RECTANGLE:                        </p>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                    <h3>Parameters</h3>
 HTML-RECTANGLE:                    <div>
-HTML-RECTANGLE:                        <b>width</b>      <div>
-HTML-RECTANGLE:                        <p> Width of the rectangle.</p>
+HTML-RECTANGLE:                        <b>width</b>
+HTML-RECTANGLE:                    <div>
+HTML-RECTANGLE: Width of the rectangle.
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                    <div>
-HTML-RECTANGLE:                        <p></p>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                    <div>
-HTML-RECTANGLE:                        <b>height</b>      <div>
-HTML-RECTANGLE:                        <p> Height of the rectangle.</p>
+HTML-RECTANGLE:                        <b>height</b>
+HTML-RECTANGLE:                    <div>
+HTML-RECTANGLE: Height of the rectangle.
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                        </div>
@@ -548,16 +580,22 @@ HTML-RECTANGLE:             </code>
 HTML-RECTANGLE:         </pre>
 HTML-RECTANGLE:        <div>
 HTML-RECTANGLE:                        <div>
-HTML-RECTANGLE:                            <p> Calculates the area of the rectangle.</p>
+HTML-RECTANGLE:                            <p>
+HTML-RECTANGLE: Calculates the area of the rectangle.
+HTML-RECTANGLE:                            </p>
 HTML-RECTANGLE:                        </div>
 HTML-RECTANGLE:                            <div>
-HTML-RECTANGLE:                        <p></p>
+HTML-RECTANGLE:                        <p>
+HTML-RECTANGLE:                        </p>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                        <div>
-HTML-RECTANGLE:                        <p></p>
+HTML-RECTANGLE:                        <p>
+HTML-RECTANGLE:                        </p>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                    <h3>Returns</h3>
-HTML-RECTANGLE:                        <p> double The area of the rectangle.</p>
+HTML-RECTANGLE:                        <p>
+HTML-RECTANGLE: double The area of the rectangle.
+HTML-RECTANGLE:                        </p>
 HTML-RECTANGLE:                        </div>
 HTML-RECTANGLE:     </div>
 HTML-RECTANGLE: </div>
@@ -570,16 +608,22 @@ HTML-RECTANGLE:             </code>
 HTML-RECTANGLE:         </pre>
 HTML-RECTANGLE:        <div>
 HTML-RECTANGLE:                        <div>
-HTML-RECTANGLE:                            <p> Calculates the perimeter of the rectangle.</p>
+HTML-RECTANGLE:                            <p>
+HTML-RECTANGLE: Calculates the perimeter of the rectangle.
+HTML-RECTANGLE:                            </p>
 HTML-RECTANGLE:                        </div>
 HTML-RECTANGLE:                            <div>
-HTML-RECTANGLE:                        <p></p>
+HTML-RECTANGLE:                        <p>
+HTML-RECTANGLE:                        </p>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                        <div>
-HTML-RECTANGLE:                        <p></p>
+HTML-RECTANGLE:                        <p>
+HTML-RECTANGLE:                        </p>
 HTML-RECTANGLE:                    </div>
 HTML-RECTANGLE:                    <h3>Returns</h3>
-HTML-RECTANGLE:                        <p> double The perimeter of the rectangle.</p>
+HTML-RECTANGLE:                        <p>
+HTML-RECTANGLE: double The perimeter of the rectangle.
+HTML-RECTANGLE:                        </p>
 HTML-RECTANGLE:                        </div>
 HTML-RECTANGLE:     </div>
 HTML-RECTANGLE: </div>
@@ -648,13 +692,18 @@ HTML-CIRCLE:                 <div class="hero__title">
 HTML-CIRCLE:                     <h1 class="hero__title-large">class Circle</h1>
 HTML-CIRCLE:                    <div class="hero__subtitle">
 HTML-CIRCLE:                                    <div>
-HTML-CIRCLE:                                        <p> Circle class derived from Shape.</p>
+HTML-CIRCLE:                                        <p>
+HTML-CIRCLE: Circle class derived from Shape.
+HTML-CIRCLE:                                        </p>
 HTML-CIRCLE:                                    </div>
 HTML-CIRCLE:                                        <div>
-HTML-CIRCLE:                                    <p></p>
+HTML-CIRCLE:                                    <p>
+HTML-CIRCLE:                                    </p>
 HTML-CIRCLE:                                </div>
 HTML-CIRCLE:                                    <div>
-HTML-CIRCLE:                                    <p> Represents a circle with a given radius.</p>
+HTML-CIRCLE:                                    <p>
+HTML-CIRCLE: Represents a circle with a given radius.
+HTML-CIRCLE:                                    </p>
 HTML-CIRCLE:                                </div>
 HTML-CIRCLE:                                                </div>
 HTML-CIRCLE:                 </div>
@@ -671,18 +720,23 @@ HTML-CIRCLE:             </code>
 HTML-CIRCLE:         </pre>
 HTML-CIRCLE:        <div>
 HTML-CIRCLE:                        <div>
-HTML-CIRCLE:                            <p> Constructs a new Circle object.</p>
+HTML-CIRCLE:                            <p>
+HTML-CIRCLE: Constructs a new Circle object.
+HTML-CIRCLE:                            </p>
 HTML-CIRCLE:                        </div>
 HTML-CIRCLE:                            <div>
-HTML-CIRCLE:                        <p></p>
+HTML-CIRCLE:                        <p>
+HTML-CIRCLE:                        </p>
 HTML-CIRCLE:                    </div>
 HTML-CIRCLE:                        <div>
-HTML-CIRCLE:                        <p></p>
+HTML-CIRCLE:                        <p>
+HTML-CIRCLE:                        </p>
 HTML-CIRCLE:                    </div>
 HTML-CIRCLE:                    <h3>Parameters</h3>
 HTML-CIRCLE:                    <div>
-HTML-CIRCLE:                        <b>radius</b>      <div>
-HTML-CIRCLE:                        <p> Radius of the circle.</p>
+HTML-CIRCLE:                        <b>radius</b>
+HTML-CIRCLE:                    <div>
+HTML-CIRCLE: Radius of the circle.
 HTML-CIRCLE:                    </div>
 HTML-CIRCLE:                    </div>
 HTML-CIRCLE:                        </div>
@@ -697,16 +751,20 @@ HTML-CIRCLE:             </code>
 HTML-CIRCLE:         </pre>
 HTML-CIRCLE:        <div>
 HTML-CIRCLE:                        <div>
-HTML-CIRCLE:                            <p> Calculates the area of the circle.</p>
+HTML-CIRCLE:                            <p>
+HTML-CIRCLE: Calculates the area of the circle.
+HTML-CIRCLE:                            </p>
 HTML-CIRCLE:                        </div>
 HTML-CIRCLE:                            <div>
-HTML-CIRCLE:                        <p></p>
+HTML-CIRCLE:                        <p>
+HTML-CIRCLE:                        </p>
 HTML-CIRCLE:                    </div>
 HTML-CIRCLE:                        <div>
-HTML-CIRCLE:                        <p></p>
+HTML-CIRCLE:                        <p>
+HTML-CIRCLE:                        </p>
 HTML-CIRCLE:                    </div>
 HTML-CIRCLE:                    <h3>Returns</h3>
-HTML-CIRCLE:                        <p> double The area of the circle.</p>
+HTML-CIRCLE: double The area of the circle.
 HTML-CIRCLE:                        </div>
 HTML-CIRCLE:     </div>
 HTML-CIRCLE: </div>
@@ -719,16 +777,22 @@ HTML-CIRCLE:             </code>
 HTML-CIRCLE:         </pre>
 HTML-CIRCLE:        <div>
 HTML-CIRCLE:                        <div>
-HTML-CIRCLE:                            <p> Calculates the perimeter of the circle.</p>
+HTML-CIRCLE:                            <p>
+HTML-CIRCLE: Calculates the perimeter of the circle.
+HTML-CIRCLE:                            </p>
 HTML-CIRCLE:                        </div>
 HTML-CIRCLE:                            <div>
-HTML-CIRCLE:                        <p></p>
+HTML-CIRCLE:                        <p>
+HTML-CIRCLE:                        </p>
 HTML-CIRCLE:                    </div>
 HTML-CIRCLE:                        <div>
-HTML-CIRCLE:                        <p></p>
+HTML-CIRCLE:                        <p>
+HTML-CIRCLE:                        </p>
 HTML-CIRCLE:                    </div>
 HTML-CIRCLE:                    <h3>Returns</h3>
-HTML-CIRCLE:                        <p> double The perimeter of the circle.</p>
+HTML-CIRCLE:                        <p>
+HTML-CIRCLE: double The perimeter of the circle.
+HTML-CIRCLE:                        </p>
 HTML-CIRCLE:                    <h3>Code</h3> 
 HTML-CIRCLE:                    <div>
 HTML-CIRCLE:                        <pre class="code-block">