MarkBind · ryoarmanda · Mar 24, 2022 · Mar 18, 2022 · Mar 18, 2022 · Mar 20, 2022
diff --git a/docs/_markbind/layouts/userGuide.md b/docs/_markbind/layouts/userGuide.md
@@ -38,6 +38,7 @@
   * [Syntax Cheat Sheet]({{baseUrl}}/userGuide/syntaxCheatSheet.html)
   * [`site.json` File]({{baseUrl}}/userGuide/siteJsonFile.html)
   * [Tips & Tricks]({{baseUrl}}/userGuide/tipsAndTricks.html)
+  * [Troubleshooting]({{baseUrl}}/userGuide/troubleshooting.html)
   * [Glossary]({{baseUrl}}/userGuide/glossary.html)
       </site-nav>
     </div>

diff --git a/docs/index.md b/docs/index.md
@@ -6,11 +6,11 @@
 
 <h1 class="display-3"><md>**MarkBind**</md></h1>
 
-<span class="lead">
+<div class="lead">
 
 ++**Generate <tooltip content="as opposed to _one-size-fits-all_ static content">_more dynamic_</tooltip> websites from Markdown text.**++
 Optimized for creating text-heavy websites %%e.g., eLearning websites, online instruction manuals, project documentation etc.%%
-</span>
+</div>
 
 <a class="btn btn-primary" href="userGuide/">Get Started</a>
 

diff --git a/docs/userGuide/addingPages.md b/docs/userGuide/addingPages.md
@@ -14,11 +14,11 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **It is easy to add files to a MarkBind site as any file inside the {{ tooltip_root_directory }} becomes a part of the generated website.**
 
-</span>
+</div>
 
 <div class="indented">
 

diff --git a/docs/userGuide/components/imagesAndDiagrams.md b/docs/userGuide/components/imagesAndDiagrams.md
@@ -16,11 +16,11 @@
 
 # Image & Diagram Components
 
-<span id="overview" class="lead">
+<div id="overview" class="lead">
 
 The image components here provide **convenient syntax & styling abstractions** on top of raw HTML and Markdown images.
 Diagrams, in the form of **inline PlantUML components** are also supported.
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

diff --git a/docs/userGuide/components/others.md b/docs/userGuide/components/others.md
@@ -16,10 +16,10 @@
 
 # Other Components
 
-<span id="overview" class="lead">
+<div id="overview" class="lead">
 
 This page lists some other components that may be useful in creating education websites. For now, there are only question and quiz components.
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

diff --git a/docs/userGuide/components/popups.md b/docs/userGuide/components/popups.md
@@ -16,10 +16,10 @@
 
 # Pop-Up Components
 
-<span id="overview" class="lead">
+<div id="overview" class="lead">
 
 The components in this page can be used to easily create **various forms of pop-ups** that are activated on some user action (e.g., hovering over some text). This may be useful for showing additional information related to some specific area or span of content.
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md
@@ -16,10 +16,10 @@
 
 # Presentational Components
 
-<span id="overview" class="lead">
+<div id="overview" class="lead">
 
 The components in this page are the core **presentational** components you may want to use. Panels and tabs can be used to **organise content sections**, while badges and boxes can **highlight small, specific pieces of information**.
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

diff --git a/docs/userGuide/deployingTheSite.md b/docs/userGuide/deployingTheSite.md
@@ -14,10 +14,10 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server.** In addition, MarkBind provides several convenient deployment options.
-</span>
+</div>
 
 ## Generic steps for deploying a MarkBind site
 

diff --git a/docs/userGuide/formattingContents.md b/docs/userGuide/formattingContents.md
@@ -14,11 +14,11 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **MarkBind supports a wide collection of Markdown-like basic content formatting syntax** such as text styling, tables, lists, images, links, etc.
 
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

diff --git a/docs/userGuide/glossary.md b/docs/userGuide/glossary.md
@@ -5,7 +5,7 @@
 
 #### Live Preview <span style="font-size: 0.8em;">:fas-sync:</span>
 
-<span id="live-preview">
+<div id="live-preview">
 
 **_Live preview_** is:
 - Regeneration of affected content upon any change to <tooltip content="`.md`, `.njk` files ... anything your content depends on!">source files</tooltip>, then reloading the updated site in the Browser.
@@ -16,4 +16,4 @@
 
 Use [the `serve` command](cliCommands.html#serve-command) to launch a live preview.
 
-</span>
+</div>
diff --git a/docs/userGuide/makingTheSiteSearchable.md b/docs/userGuide/makingTheSiteSearchable.md
@@ -16,10 +16,10 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **MarkBind comes with an in-built _site search_ facility** with the option to use third-party search services as well.
-</span>
+</div>
 
 **All markdown and html headings of levels 1-3 are captured in the search index** by default. You can change this setting using the [`headingIndexLevel` property of the `site.json`](siteJsonFile.html#headingindexinglevel).
 

diff --git a/docs/userGuide/markBindInTheProjectWorkflow.md b/docs/userGuide/markBindInTheProjectWorkflow.md
@@ -13,10 +13,10 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 As **MarkBind is especially optimized as a project documentation tool**, it integrates well with the workflow of software projects.
-</span>
+</div>
 
 #### Authoring Workflow
 

diff --git a/docs/userGuide/markBindSyntaxOverview.md b/docs/userGuide/markBindSyntaxOverview.md
@@ -14,10 +14,10 @@
 # {{ title }}
 
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **A MarkBind source file may contain a mix of several popular syntax schemes** used in creating web pages. MarkBind source file can be as simple as basic Markdown, and you can use progressively more complicated syntax to create progressively more sophisticated Web pages while optimizing other aspects such as content reuse.
-</span>
+</div>
 
 Given below is an overview of the syntax schemes supported by MarkBind.
 

diff --git a/docs/userGuide/plugins/tags.md b/docs/userGuide/plugins/tags.md
@@ -67,7 +67,7 @@ Alternatively, you can specify tags to render for a page in the front matter.
 ```
 </div>
 
-<span id="short" class="d-none">
+<div id="short" class="d-none">
 
 ```html
 <p tags="language--java advanced">System.out.println("Hello world");</p>
@@ -79,7 +79,7 @@ Alternatively, you can specify tags to render for a page in the front matter.
   tags: ["language--java"]
 </frontmatter>
 ```
-</span>
+</div>
 
 Tags in `site.json` will be merged with the ones in the front matter, and are processed after front matter tags. See [Hiding Tags](../tweakingThePageStructure.html#hiding-tags) for more information.
 
@@ -143,7 +143,7 @@ Using `-` at the start of a tag hides all tags matching the expression. This is
 
 This only works because tags are processed left to right, so all `language--*` tags are hidden before `language--C#`. Tags in `site.json` are processed after tags in `<frontmatter>`.
 
-<span id="short" class="d-none">
+<div id="short" class="d-none">
 
 ```html
 # Print 'Hello world'
@@ -165,4 +165,4 @@ This only works because tags are processed left to right, so all `language--*` t
   }
 }
 ```
-</span>
+</div>
diff --git a/docs/userGuide/reusingContents.md b/docs/userGuide/reusingContents.md
@@ -14,10 +14,10 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **MarkBind is highly-optimized for content reuse**. It offers several mechanisms to provide readers with many variations of the content while minimizing duplication at source file level. As a result, instead of creating a one-size-fits-all site, MarkBind can create a site in which readers can chart their own path of reading.
-</span>
+</div>
 
 
 <include src="syntax/variables.md" />

diff --git a/docs/userGuide/siteJsonFile.md b/docs/userGuide/siteJsonFile.md
@@ -7,10 +7,10 @@
 
 # `site.json` File
 
-<span class="lead">
+<div class="lead">
 
 The `site.json` file {{ tooltip_root_directory }} is used to configure various aspects of a MarkBind website.
-</span>
+</div>
 
 Here is a typical `site.json` file:
 
@@ -131,14 +131,14 @@ _(Optional)_ **The styling options to be applied to the site.** This includes:
 * **`externalScripts`**: An array of external scripts to be referenced on the page. Scripts referenced will be run before the layout script.
 * **`frontMatter`**: Specifies properties to add to the front matter of a page or glob of pages. Overrides any existing properties if they have the same name, and overrides any front matter properties specified in `globalOverride`.
 
-<span id="page-property-overriding">
+<div id="page-property-overriding">
 <box type="warning">
 
 Note: Page properties that are defined in `site.json` for a particular page will override those defined in the front matter of the page.
 </box>
-</span>
+</div>
 
-<span id="page-glob-overriding">
+<div id="page-glob-overriding">
 <box type="warning">
 
 Note: If multiple **`src`** (pages) or **`glob`** (globs) attributes match a file, MarkBind will merge properties from all entries. If there are conflicting properties, pages are given priority over globs. If there are multiple matching glob entries, the last entry is given priority.
@@ -177,7 +177,7 @@ The following properties will apply to `index.md`:
 
 </div>
 </box>
-</span>
+</div>
 
 #### **`pagesExclude`**
 

diff --git a/docs/userGuide/syntax/attributes.md b/docs/userGuide/syntax/attributes.md
@@ -50,17 +50,17 @@ Those below this section do not.
 </box>
 
 <!-- Full syntax reference -->
-<span id="short" class="d-none">
+<div id="short" class="d-none">
 
 ```
 add a space before '{' for block level markdown {.class-name attribute="value" attribute=value #id}
 
 don't add a space for **inline**{.text-danger} markdown
 ```
 <small>For a more detailed guide, see: https://www.npmjs.com/package/markdown-it-attrs</small>
-</span>
+</div>
 
 <!-- Reader facing features -->
-<span id="examples" class="d-none">
+<div id="examples" class="d-none">
 <include src="attributes.md#list-example" />
-</span>
+</div>
diff --git a/docs/userGuide/syntax/badges.md b/docs/userGuide/syntax/badges.md
@@ -52,7 +52,7 @@ Headings:
 </div>
 
 
-<span id="short" class="d-none">
+<div id="short" class="d-none">
 
 ```markdown
 <span class="badge badge-primary">Primary</span>
@@ -61,14 +61,14 @@ Headings:
   Difficulty Level <span class="badge badge-light">4</span>
 </button>
 ```
-</span>
+</div>
 
-<span id="examples" class="d-none">
+<div id="examples" class="d-none">
 
 <span class="badge badge-primary">Primary</span>
 <span class="badge badge-pill badge-success">Success</span>
 <button type="button" class="btn btn-primary">
   Difficulty Level <span class="badge badge-light">4</span>
 ##### Feature Y <span class="badge badge-pill badge-warning">stable</span> {.no-index}
 </button>
-</span>
+</div>
diff --git a/docs/userGuide/syntax/blockquotes.md b/docs/userGuide/syntax/blockquotes.md
@@ -29,19 +29,19 @@ Nested blockquote
 
 <small>More info: https://www.markdownguide.org/basic-syntax#blockquotes-1</small>
 
-<span id="short" class="d-none">
+<div id="short" class="d-none">
 
 ```
 > Blockquote, first paragraph
 >
 > Second paragraph
 >> Nested blockquote
 ```
-</span>
-<span id="examples" class="d-none">
+</div>
+<div id="examples" class="d-none">
 
 > Blockquote, first paragraph
 >
 > Second paragraph
 >> Nested blockquote
-</span>
+</div>
diff --git a/docs/userGuide/syntax/boxes.md b/docs/userGuide/syntax/boxes.md
@@ -233,15 +233,15 @@ no-backgound | `Boolean` | `false` | Removes background, except if styled by `ba
 no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `icon` option.
 
 
-<span id="short" class="d-none">
+<div id="short" class="d-none">
 
 ```html
 <box type="warning">
   warning
 </box>
 ```
-</span>
-<span id="examples" class="d-none">
+</div>
+<div id="examples" class="d-none">
 
 <box>
     default
@@ -267,4 +267,4 @@ no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `i
 <box type="definition">
     definition
 </box>
-</span>
+</div>
diff --git a/docs/userGuide/syntax/code.md b/docs/userGuide/syntax/code.md
@@ -219,7 +219,7 @@ or the java code `public static void main(String[] args)`{.java}.
 </variable>
 </include>
 
-<span id="short" class="d-none">
+<div id="short" class="d-none">
 
 ````
 ```xml
@@ -231,8 +231,8 @@ or the java code `public static void main(String[] args)`{.java}.
 ```
 `<bar type="name">goo</bar>`{.xml}
 ```
-</span>
-<span id="examples" class="d-none">
+</div>
+<div id="examples" class="d-none">
 
 ```xml
 <foo>
@@ -241,4 +241,4 @@ or the java code `public static void main(String[] args)`{.java}.
 ```
 Syntax coloring for inline code: `<bar type="name">goo</bar>`{.xml} too!
 
-</span>
+</div>