Add support for auto-numbering

src/views/Help.vue

@@ -33,6 +33,18 @@
         If a block is missing a end, it will be transformed into something like <code>[[ERROR: BLOCK_NAME has no
           end]]</code>.
       </i-alert>
+
+      <h3>Numbering sections</h3>
+
+      <p>
+        To have a dynamic sections numbering, use this format:
+      </p>
+
+      <pre
+        v-html="`${codeNumber('[#]')} ${codeContent('Rendering as 1')}\n\n${codeNumber('[##]')} ${codeContent('Rendering as 1.1')}\n\n${codeNumber('[#]')} ${codeContent('Rendering as 2')}\n\n...`" />
+
+      <i-alert variant="warning">Every time you use the number code, it will increment the counter; doing <code>[#] - This is section
+        [#]</code> will render as <code>1 - This is section 2</code></i-alert>
     </section>
 
     <section>
@@ -128,6 +140,7 @@ export default {
 
       return this.codeElement('condition', `[[${typeTag} ${blockNameTag}]]${contentTag}[[${endTypeTag} ${blockNameTag}]]`)
     },
+    codeNumber (code) { return this.codeElement('number', code) },
   },
 }
 </script>
@@ -184,5 +197,10 @@ export default {
         color: lighten($color, 40%);
       }
     }
+
+    &-number {
+      $color: #436fce;
+      color: $color;
+    }
   }
 </style>

src/views/Renderer.vue

@@ -67,7 +67,8 @@
         <div class="main-content" :class="displayTab === 'render' ? 'render' : 'raw'">
           <!--          <pre><strong>variables</strong>{{ variables }}</pre>-->
           <!--          <pre><strong>blocks</strong>{{ blocks }}</pre>-->
-          <!--          <pre><strong>source</strong>{{ source }}</pre>-->
+          <!--          <pre><strong>source</strong><br>{{ source }}</pre>-->
+          <!--          <pre><strong>preparedSource</strong><br>{{ preparedSource }}</pre>-->
           <pre v-show="displayTab === 'source'">{{ source }}</pre>
           <pre v-if="ready" v-show="displayTab === 'md'">{{ renderedMd }}</pre>
           <pre v-if="ready" v-show="displayTab === 'html'">{{ renderedText }}</pre>
@@ -127,6 +128,7 @@ export default {
     renderMd () {
       let source = this.renderBlocks(this.preparedSource)
       source = this.renderConditionals(source)
+      source = this.renderNumbers(source)
       return this.renderVariables(source)
     },
     renderText () {
@@ -157,6 +159,30 @@ export default {
 
       return text
     },
+    renderNumbers (text) {
+      // Replace incremental numbers in block
+      let section = '0'
+      return text.replace(/\[(#+)\]/g, function (stringToReplace) {
+        // Extract numbers in section
+        const numbers = section.split('.').map(e => parseInt(e, 10))
+        // Get the desired depth
+        const depth = stringToReplace.match(/\[(#+)\]/)[1].length
+        // Create an array of 0s of the length of the section to increment
+        const out = [...'0'.repeat(depth)]
+        // Insert current section
+        for (let i = 0; i < numbers.length; i++) { out[i] = numbers[i] }
+        // Convert to integers
+        out.map(e => parseInt(e, 10))
+        // Increment the counter
+        out[depth - 1]++
+        // Truncate the section length
+        out.length = depth
+        // Update section in caller, replacing zeros by ones
+        section = out.map(e => e === 0 ? 1 : e).join('.')
+        // Return replacement
+        return section
+      })
+    },
     renderVariables (text) {
       let matches