add comments to the extension class

src/processors/marked-extension.js

@@ -1,13 +1,22 @@
+// This code defines a custom renderer that extends marked.js and overrides the table rendering method to include a <caption>. 
+// You can learn more about custom renderer here at https://marked.js.org/using_pro#renderer
 export default function markedExtension() {
+  // Declare the heading text so it can be used globally
   let headingText;
   return {
     renderer: {
+      // Custom renderer for headings
       heading(text) {
+        // Set the heading text
         headingText = text;
+      // Return an empty string to skip rendering the heading itself
         return ''; 
-      }, 
+      },       
+      // Custom renderer for tables
       table(header, body){
-        const caption = headingText ? `<caption class="ons-table__caption ons-u-fs-m">${headingText}</caption>` : '';
+        // Check if there is heading text so we can add a caption
+        const caption = headingText ? `<caption>${headingText}</caption>` : '';
+        // Construct the table element with the optional caption
         return `<table>
           ${caption}
           <thead>${header}</thead>

src/rendering/filters/htmlContentFilter.js

@@ -35,6 +35,7 @@ export default function createHtmlContentFilter(data) {
     // Decorate table elements with ONS design system classes.
     [escape("<table>")]: '<div class="ons-table-scrollable__content"><table class="ons-table ons-table--scrollable">',
     [escape("</table>")]: '</table></div>',
+    [escape("<caption>")]: '<caption class="ons-table__caption ons-u-fs-m ons-u-mb-s ons-u-mt-l">',
     [escape("<thead>")]: '<thead class="ons-table__head">',
     [escape("<tbody>")]: '<tbody class="ons-table__body">',
     [escape("<tr>")]: '<tr class="ons-table__row">',