Fix formatting errors in user guide

docs/userGuide/components/advanced.md

@@ -65,13 +65,13 @@ However, we **$$do not recommend$$** using this syntax as it is deprecated and w
 <trigger for="modal:tip-example" trigger="click">Click here to show Modal.</trigger>
 
 <modal id="modal:tip-example">
-  <div slot="header" class="modal-title text-center">
+  <span slot="header" class="modal-title text-center">
     <span style="font-size:20pt"><span style="color:red;">BIG</span> header</span>
-  </div>
+  </span>
     Modal allows you to style both header and footer individually, with style classes and inline styles.
-  <div slot="footer" class="text-center">
+  <span slot="footer" class="text-center">
     <span style="font-size:10pt">Tiny <span style="color:green;">footer</span></span>
-  </div>
+  </span>
 </modal>
 </variable>
 <variable name="highlightStyle">html</variable>

docs/userGuide/syntax/code.mbdf

@@ -22,7 +22,6 @@ To enable syntax coloring, specify a language next to the backticks before the f
 <div id="main-example">
 <include src="codeAndOutputCode.md" boilerplate >
 <variable name="code">
-
 ```xml
 <foo>
   <bar type="name">goo</bar>
@@ -37,7 +36,6 @@ Line numbers are provided by default. To hide line numbers, add the class `no-li
 
 <include src="codeAndOutputCode.md" boilerplate >
 <variable name="code">
-
 ```xml {.no-line-numbers}
 <foo>
   <bar type="name">goo</bar>
@@ -50,7 +48,6 @@ You can have your line numbers start with a value other than `1` with the `start
 
 <include src="codeAndOutputCode.md" boilerplate >
 <variable name="code">
-
 ```js {start-from=6}
 function add(a, b) {
     return a + b;
@@ -82,7 +79,6 @@ For ranges, you only need to use line-slices on either ends.
 <include src="codeAndOutputCode.md" boilerplate >
 
 <variable name="code">
-
 ```java {highlight-lines="1,3[:],6-8,10[:]-12"}
 import java.util.List;
 
@@ -108,7 +104,6 @@ To add a heading, add the attribute `heading` with the heading text as the value
 
 <include src="codeAndOutputCode.md" boilerplate >
 <variable name="code">
-
 ```xml {heading="Heading title"}
 <foo>
   <bar type="name">goo</bar>
@@ -121,7 +116,6 @@ Headings support inline Markdown, except for `Inline Code` and %%Dim%% text styl
 
 <include src="codeAndOutputCode.md" boilerplate >
 <variable name="code">
-
 ```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, $$Underline$$, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
 <foo></foo>
 ```
@@ -133,7 +127,6 @@ You can also use multiple features together, as shown below.
 
 <include src="codeAndOutputCode.md" boilerplate >
 <variable name="code">
-
 ```xml {highlight-lines="2" heading="Heading title"}
 <foo>
   <bar type="name">goo</bar>

docs/userGuide/syntax/lists.mbdf

@@ -74,7 +74,7 @@ first number
 
 
 ****Radio-button lists:****
-<span id="main-example-markbind">
+<div id="main-example-markbind">
 <include src="codeAndOutput.md" boilerplate >
 <variable name="highlightStyle">markdown</variable>
 <variable name="code">
@@ -83,7 +83,7 @@ first number
 - (x) Item 3
 </variable>
 </include>
-</span>
+</div>
 
 <span id="short" class="d-none">
 

docs/userGuide/syntax/questions.mbdf

@@ -229,11 +229,11 @@ If no keywords are provided, the answer will always be marked as correct when pl
 Keywords are validated by simply looking for the keyword as a pattern in the user's answer!
 This works well for some
 <popover header="When does validation work?">cases
-  <div slot="content">
+  <span slot="content">
   When the keywords specified are rather long (eg. `requirements`), it reduces the chance that this keyword can be mistakenly validated.
   <br><br>
   In contrast, something short and common like `take` which can easily be part of another word (eg. `mis-take-nly`) would be mistakenly validated.
-  </div>
+  </span>
 </popover>
 and not others.