From 5200f0867c1cf65a7766ecb121cc69293789f720 Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Tue, 10 Mar 2020 22:16:57 +0800
Subject: [PATCH 01/11] Upgrade beautify and support option to toggle
 js-beautify

---
 package-lock.json | 83 +++++++++++++++++++++++++++++++++--------------
 package.json      |  6 ++--
 src/Page.js       | 53 ++++++++++++++++++++----------
 src/Site.js       |  1 +
 4 files changed, 99 insertions(+), 44 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 95f86cee5c..b70158f6a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2193,14 +2193,13 @@
       }
     },
     "editorconfig": {
-      "version": "0.13.3",
-      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.13.3.tgz",
-      "integrity": "sha512-WkjsUNVCu+ITKDj73QDvi0trvpdDWdkDyHybDGSXPfekLCqwmpD7CP7iPbvBgosNuLcI96XTDwNa75JyFl7tEQ==",
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
       "requires": {
-        "bluebird": "^3.0.5",
-        "commander": "^2.9.0",
-        "lru-cache": "^3.2.0",
-        "semver": "^5.1.0",
+        "commander": "^2.19.0",
+        "lru-cache": "^4.1.5",
+        "semver": "^5.6.0",
         "sigmund": "^1.0.1"
       },
       "dependencies": {
@@ -5255,14 +5254,30 @@
       }
     },
     "js-beautify": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.7.5.tgz",
-      "integrity": "sha512-9OhfAqGOrD7hoQBLJMTA+BKuKmoEtTJXzZ7WDF/9gvjtey1koVLuZqIY6c51aPDjbNdNtIXAkiWKVhziawE9Og==",
+      "version": "1.10.1-rc2",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.1-rc2.tgz",
+      "integrity": "sha512-FjuOxdWIbpXKE6ydkg/uYmVgbv84tXpFhViCyATxAxtI8XNRDrgYD7YiJ6leaa02S19YVcRzHFpruxGi5thN7A==",
       "requires": {
-        "config-chain": "~1.1.5",
-        "editorconfig": "^0.13.2",
-        "mkdirp": "~0.5.0",
-        "nopt": "~3.0.1"
+        "config-chain": "^1.1.12",
+        "editorconfig": "^0.15.3",
+        "glob": "^7.1.3",
+        "mkdirp": "~0.5.1",
+        "nopt": "~4.0.1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
       }
     },
     "js-tokens": {
@@ -5784,11 +5799,12 @@
       }
     },
     "lru-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-3.2.0.tgz",
-      "integrity": "sha1-cXibO39Tmb7IVl3aOKow0qCX7+4=",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
       "requires": {
-        "pseudomap": "^1.0.1"
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
       }
     },
     "make-dir": {
@@ -6351,11 +6367,12 @@
       }
     },
     "nopt": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
       "requires": {
-        "abbrev": "1"
+        "abbrev": "1",
+        "osenv": "^0.1.4"
       }
     },
     "normalize-package-data": {
@@ -6782,11 +6799,24 @@
         "word-wrap": "~1.2.3"
       }
     },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
     },
     "p-each-series": {
       "version": "2.1.0",
@@ -9565,6 +9595,11 @@
       "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
       "dev": true
     },
+    "yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
     "yaml": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.7.2.tgz",
diff --git a/package.json b/package.json
index 850a6549b7..1461d649db 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "highlight.js": "^9.14.2",
     "htmlparser2": "^3.10.1",
     "ignore": "^5.1.4",
-    "js-beautify": "~1.7.5",
+    "js-beautify": "^1.10.1-rc2",
     "live-server": "^1.2.1",
     "lodash": "^4.17.15",
     "markdown-it": "^8.4.2",
@@ -47,11 +47,11 @@
     "markdown-it-linkify-images": "^1.1.1",
     "markdown-it-mark": "^2.0.0",
     "markdown-it-regexp": "^0.4.0",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
     "markdown-it-table-of-contents": "^0.4.4",
     "markdown-it-task-lists": "^1.4.1",
     "markdown-it-video": "^0.6.3",
-    "markdown-it-sub": "^1.0.0",
-    "markdown-it-sup": "^1.0.0",
     "nunjucks": "^3.2.0",
     "path-is-inside": "^1.0.2",
     "progress": "^2.0.3",
diff --git a/src/Page.js b/src/Page.js
index 6e90d83232..cb8ebe2af4 100644
--- a/src/Page.js
+++ b/src/Page.js
@@ -62,6 +62,7 @@ class Page {
     this.content = pageConfig.content || '';
     this.faviconUrl = pageConfig.faviconUrl;
     this.frontmatterOverride = pageConfig.frontmatter || {};
+    this.jsBeautify = pageConfig.jsBeautify;
     this.layout = pageConfig.layout;
     this.layoutsAssetPath = pageConfig.layoutsAssetPath;
     this.rootPath = pageConfig.rootPath;
@@ -657,14 +658,23 @@ class Page {
       const pageNavTitleHtml = this.generatePageNavTitleHtml();
       const pageNavHeadingHTML = this.generatePageNavHeadingHtml();
       this.pageSectionsHtml[`#${PAGE_NAV_ID}`]
-        = htmlBeautify(`<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
-        + '<div class="border-left-grey nav-inner position-sticky slim-scroll">\n'
-        + `${pageNavTitleHtml}\n`
-        + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
-        + `${pageNavHeadingHTML}\n`
-        + '</nav>\n'
-        + '</div>\n'
-        + '</nav>\n', Page.htmlBeautifyOptions);
+        = this.jsBeautify
+          ? htmlBeautify(`<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
+            + '<div class="border-left-grey nav-inner position-sticky slim-scroll">\n'
+            + `${pageNavTitleHtml}\n`
+            + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
+            + `${pageNavHeadingHTML}\n`
+            + '</nav>\n'
+            + '</div>\n'
+            + '</nav>\n', Page.htmlBeautifyOptions)
+          : `<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
+            + '<div class="border-left-grey nav-inner position-sticky slim-scroll">\n'
+            + `${pageNavTitleHtml}\n`
+            + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
+            + `${pageNavHeadingHTML}\n`
+            + '</nav>\n'
+            + '</div>\n'
+            + '</nav>\n';
     }
   }
 
@@ -755,10 +765,12 @@ class Page {
     if (pageSection.length === 0) {
       return;
     }
-    this.pageSectionsHtml[section] = htmlBeautify($.html(section), Page.htmlBeautifyOptions)
-      .trim();
+    this.pageSectionsHtml[section]
+      = this.jsBeautify
+        ? htmlBeautify($.html(section), Page.htmlBeautifyOptions).trim()
+        : $.html(section);
     pageSection.remove();
-    this.content = htmlBeautify($.html(), Page.htmlBeautifyOptions);
+    this.content = this.jsBeautify ? htmlBeautify($.html(), Page.htmlBeautifyOptions) : $.html();
   }
 
   collectAllPageSections() {
@@ -803,7 +815,7 @@ class Page {
         .then(result => markbinder.processDynamicResources(this.sourcePath, result))
         .then(result => MarkBind.unwrapIncludeSrc(result))
         .then((result) => {
-          this.content = htmlBeautify(result, Page.htmlBeautifyOptions);
+          this.content = this.jsBeautify ? htmlBeautify(result, Page.htmlBeautifyOptions) : result;
 
           const { relative } = urlUtils.getParentSiteAbsoluteAndRelativePaths(this.sourcePath, this.rootPath,
                                                                               this.baseUrlMap);
@@ -821,10 +833,13 @@ class Page {
           this.collectAllPageSections();
           this.buildPageNav();
 
-          return fs.outputFileAsync(this.resultPath, htmlBeautify(
-            this.template.render(this.prepareTemplateData()),
-            Page.htmlBeautifyOptions,
-          ));
+          const renderedTemplate = this.template.render(this.prepareTemplateData());
+          const outputTemplateHTML
+            = this.jsBeautify
+              ? htmlBeautify(renderedTemplate, Page.htmlBeautifyOptions)
+              : renderedTemplate;
+
+          return fs.outputFileAsync(this.resultPath, outputTemplateHTML);
         })
         .then(() => {
           const resolvingFiles = [];
@@ -1071,7 +1086,11 @@ class Page {
             baseUrl,
             hostBaseUrl,
           });
-          return fs.outputFileAsync(resultPath, htmlBeautify(content, Page.htmlBeautifyOptions));
+          const outputContentHTML
+            = this.jsBeautify
+              ? htmlBeautify(content, Page.htmlBeautifyOptions)
+              : content;
+          return fs.outputFileAsync(resultPath, outputContentHTML);
         })
         .then(() => {
           // Recursion call to resolve nested dependency
diff --git a/src/Site.js b/src/Site.js
index e626ad1de3..444ce5f5e1 100644
--- a/src/Site.js
+++ b/src/Site.js
@@ -237,6 +237,7 @@ class Site {
       faviconUrl: config.faviconUrl,
       frontmatter: config.frontmatter,
       globalOverride: this.siteConfig.globalOverride || {},
+      jsBeautify: this.siteConfig.jsBeautify,
       pageTemplate: this.pageTemplate,
       plugins: this.plugins || {},
       rootPath: this.rootPath,

From 862020fe639a287fd3e27200b4129d3b8f21cc76 Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Tue, 10 Mar 2020 23:43:22 +0800
Subject: [PATCH 02/11] Update test sites

---
 .../test_site/expected/bugs/index.html        |   3 +-
 test/functional/test_site/expected/index.html | 197 +++++++++++-------
 .../NonFunctionalRequirements._include_.html  |   4 +-
 .../requirements/UserStories._include_.html   |  22 +-
 .../expected/sub_site/index._include_.html    |   6 +-
 .../test_site/expected/sub_site/index.html    |   6 +-
 .../sub_site/testReuse._include_.html         |   4 +-
 .../expected/testAnchorGeneration.html        |  26 ++-
 .../expected/testAntiFOUCStyles.html          |   4 +-
 .../expected/testExternalScripts.html         |   3 +-
 .../testImportVariables._include_.html        |   3 +-
 .../expected/testImportVariables.html         |   3 +-
 .../testPanels/NestedPanel._include_.html     |   4 +-
 test/functional/test_site/site.json           |   1 +
 test/functional/test_site/sub_site/site.json  |   1 +
 .../expected/index.html                       |  53 +++--
 .../test_site_algolia_plugin/site.json        |   1 +
 .../test_site_convert/expected/Home.html      |  78 +++----
 .../test_site_convert/expected/Page-1.html    |  78 +++----
 .../test_site_convert/expected/_Footer.html   |  78 +++----
 .../test_site_convert/expected/_Sidebar.html  |  83 +++-----
 .../test_site_convert/expected/about.html     |  80 +++----
 .../expected/contents/topic1.html             |  77 +++----
 .../expected/contents/topic2.html             |  74 +++----
 .../expected/contents/topic3a.html            |  74 +++----
 .../expected/contents/topic3b.html            |  74 +++----
 .../test_site_convert/expected/index.html     |  78 +++----
 .../expected/index.html                       |   7 +-
 .../test_site_expressive_layout/site.json     |   1 +
 .../expected/index.html                       |  11 +-
 .../test_site_special_tags/site.json          |   1 +
 .../expected/contents/topic1.html             |  73 +++----
 .../expected/contents/topic2.html             |  70 +++----
 .../expected/contents/topic3a.html            |  70 +++----
 .../expected/contents/topic3b.html            |  70 +++----
 .../test_default/expected/index.html          |  61 +++---
 .../test_minimal/expected/index.html          |  62 +++---
 37 files changed, 694 insertions(+), 847 deletions(-)

diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
index 5b7bd96720..0afdc4476b 100644
--- a/test/functional/test_site/expected/bugs/index.html
+++ b/test/functional/test_site/expected/bugs/index.html
@@ -29,7 +29,8 @@
         <li><a class="nav-link" href="/test_site/bugs/index.html">Open Bugs</a></li>
       </navbar>
       <div class="bg-info display-4 text-center text-white">
-        <br> Test Jumbotron<br>
+        <br>
+        Test Jumbotron<br>
         <br></div>
     </header>
     <div id="flex-body">
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index 3ab1d3aa1d..cd757e3972 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -23,8 +23,7 @@
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
-  <link rel="stylesheet" href="markbind/css/page-nav.css">
-  <!-- Start of bottom level head file content insertion -->
+  <link rel="stylesheet" href="markbind/css/page-nav.css"><!-- Start of bottom level head file content insertion -->
   <script src="/test_site/headFiles/customScriptBottom.js"></script>
   <!-- End of bottom level head file content insertion-->
   <!-- Start of bottom level head file content insertion -->
@@ -41,7 +40,8 @@
         <li><a class="nav-link" href="/test_site/bugs/index.html">Open Bugs</a></li>
       </navbar>
       <div class="bg-info display-4 text-center text-white">
-        <br> Test Jumbotron<br>
+        <br>
+        Test Jumbotron<br>
         <br></div>
     </header>
     <div id="flex-body">
@@ -56,15 +56,15 @@ <h2 id="navigation">Navigation<a class="fa fa-anchor" href="#navigation"></a></h
             <li class="mt-2">
               <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing-site-nav"></a></h3>
             </li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open"><strong>Dropdown </strong> <span aria-hidden="true" class="glyphicon glyphicon-search"></span> title ✏️ 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open"><strong>Dropdown </strong> <span aria-hidden="true" class="glyphicon glyphicon-search"></span> title ✏️
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
               <div class="dropdown-container dropdown-container-open">
                 <ul class="pl-3 site-nav-list">
                   <li class="mt-2"><a href="https://www.google.com/" class="site-nav__a">Dropdown link one</a></li>
                   <li class="mt-2"><button class="dropdown-btn">Nested Dropdown title 📐
- <i class="dropdown-btn-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+                      <i class="dropdown-btn-icon">
+                        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
                     <div class="dropdown-container">
                       <ul class="pl-3 site-nav-list">
                         <li class="mt-2"><a href="https://www.google.com/" class="site-nav__a"><strong>Nested</strong> Dropdown link one</a></li>
@@ -80,9 +80,9 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
             <li class="mt-2">Filler text <a href="https://www.youtube.com/" class="site-nav__a"><span aria-hidden="true" class="glyphicon glyphicon-facetime-video"></span> Youtube 📺</a> filler text
               <ul class="pl-3 site-nav-list">
                 <li class="mt-2"><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="site-nav__a">The answer to everything in the universe</a></li>
-                <li class="mt-2"><button class="dropdown-btn dropdown-btn-open"><mark>Dropdown title</mark> <span aria-hidden="true" class="glyphicon glyphicon-comment"></span> ✏️ 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+                <li class="mt-2"><button class="dropdown-btn dropdown-btn-open"><mark>Dropdown title</mark> <span aria-hidden="true" class="glyphicon glyphicon-comment"></span> ✏️
+                    <i class="dropdown-btn-icon rotate-icon">
+                      <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
                   <div class="dropdown-container dropdown-container-open">
                     <ul class="pl-3 site-nav-list">
                       <li class="mt-2"><a href="https://www.google.com/" class="site-nav__a"><strong>Nested</strong> Dropdown link one</a></li>
@@ -92,24 +92,19 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
               </ul>
             </li>
             <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
               <div class="dropdown-container dropdown-container-open">
                 <ul class="pl-3 site-nav-list">
-                  <li class="mt-2">Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long
-                    Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really
-                    Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really
-                    Really Long Text Really Really Long Text</li>
+                  <li class="mt-2">Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text</li>
                   <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Nested Dropdown Title
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+                      <i class="dropdown-btn-icon rotate-icon">
+                        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
                     <div class="dropdown-container dropdown-container-open">
                       <ul class="pl-3 site-nav-list">
                         <li class="mt-2">Hello Doge Hello Doge 🐶</li>
                         <li class="mt-2"><a href="/test_site/index.html" class="site-nav__a current"><strong>NESTED LINK</strong> Home 🏠</a></li>
-                        <li class="mt-2">Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off
-                          from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height
-                          limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit</li>
+                        <li class="mt-2">Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit</li>
                       </ul>
                     </div>
                   </li>
@@ -117,8 +112,8 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
               </div>
             </li>
             <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Test line break in navigation layout
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
               <div class="dropdown-container dropdown-container-open">
                 <ul class="pl-3 site-nav-list">
                   <li class="mt-2">Nested line break text ✂️</li>
@@ -128,8 +123,8 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
                     </ul>
                   </li>
                   <li class="mt-2"><button class="dropdown-btn">Nested line break dropdown menu
- <i class="dropdown-btn-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+                      <i class="dropdown-btn-icon">
+                        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
                     <div class="dropdown-container">
                       <ul class="pl-3 site-nav-list">
                         <li class="mt-2">Line break item 2 📘</li>
@@ -146,9 +141,11 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         <div class="website-content">
           <p><strong>Test footnotes</strong></p>
           <div>
-            <p><strong>Normal footnotes:</strong> Here is a footnote reference,<span for="pop:footnote1" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:footnote1'].show()" class="trigger"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#footnote1" id="footnoteref1">[1]</a></sup></span>              and another.<span for="pop:footnote2" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:footnote2'].show()" class="trigger"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#footnote2" id="footnoteref2">[2]</a></sup></span></p>
+            <p><strong>Normal footnotes:</strong>
+              Here is a footnote reference,<span for="pop:footnote1" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:footnote1'].show()" class="trigger"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#footnote1" id="footnoteref1">[1]</a></sup></span> and another.<span for="pop:footnote2" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:footnote2'].show()" class="trigger"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#footnote2" id="footnoteref2">[2]</a></sup></span></p>
             <p>Here is a repeated footnote to <span for="pop:footnote1" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:footnote1'].show()" class="trigger"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#footnote1" id="footnoteref1:1">[1]</a></sup></span></p>
-            <p><strong>Inline footnotes:</strong> Here is an inline note.<span for="pop:footnote3" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:footnote3'].show()" class="trigger"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#footnote3" id="footnoteref3">[3]</a></sup></span></p>
+            <p><strong>Inline footnotes:</strong>
+              Here is an inline note.<span for="pop:footnote3" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:footnote3'].show()" class="trigger"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#footnote3" id="footnoteref3">[3]</a></sup></span></p>
           </div>
           <p><strong>Json Variable</strong></p>
           <div> front back </div>
@@ -166,7 +163,8 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
           <p><strong>Nested Page Variable</strong></p>
           <div>
             <span>
-    <div></div></span></div>
+              <div></div>
+            </span></div>
           Nested Page Variable
           <p><strong>Page Variable with Global Variable</strong></p>
           <div></div>
@@ -198,18 +196,26 @@ <h1 id="heading-with-multiple-keywords">Heading with multiple keywords<a class="
           <p><span class="keyword">keyword 1</span>
             <span class="keyword">keyword 2</span></p>
           <h1 id="heading-with-keyword-in-panel">Heading with keyword in panel<a class="fa fa-anchor" href="#heading-with-keyword-in-panel"></a></h1>
-          <panel expanded=""><template slot="_header"><p>Panel with keyword</p></template>
+          <panel expanded=""><template slot="_header">
+              <p>Panel with keyword</p>
+            </template>
             <span class="keyword">panel keyword</span></panel>
           <p><strong>Panel with heading with keyword</strong></p>
-          <panel expanded="" id="panel-with-heading"><template slot="_header"><h1 id="panel-with-heading">Panel with heading<a class="fa fa-anchor" href="#panel-with-heading"></a></h1></template>
+          <panel expanded="" id="panel-with-heading"><template slot="_header">
+              <h1 id="panel-with-heading">Panel with heading<a class="fa fa-anchor" href="#panel-with-heading"></a></h1>
+            </template>
             <span class="keyword">panel keyword</span></panel>
           <p><strong>Expanded panel without heading with keyword</strong></p>
-          <panel expanded="" id="panel-without-heading-with-keyword"><template slot="_header"><h1 id="panel-without-heading-with-keyword">Panel without heading with keyword<a class="fa fa-anchor" href="#panel-without-heading-with-keyword"></a></h1></template>
+          <panel expanded="" id="panel-without-heading-with-keyword"><template slot="_header">
+              <h1 id="panel-without-heading-with-keyword">Panel without heading with keyword<a class="fa fa-anchor" href="#panel-without-heading-with-keyword"></a></h1>
+            </template>
             <h1 id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading"></a></h1>
             <p><span class="keyword">panel keyword</span></p>
           </panel>
           <p><strong>Unexpanded panel with heading with keyword</strong>
-            <panel id="panel-with-heading-with-keyword"><template slot="_header"><h1 id="panel-with-heading-with-keyword">Panel with heading with keyword<a class="fa fa-anchor" href="#panel-with-heading-with-keyword"></a></h1></template></panel>
+            <panel id="panel-with-heading-with-keyword"><template slot="_header">
+                <h1 id="panel-with-heading-with-keyword">Panel with heading with keyword<a class="fa fa-anchor" href="#panel-with-heading-with-keyword"></a></h1>
+              </template></panel>
           </p>
           <h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading"></a></h1>
           <p><span class="keyword">panel keyword</span></p>
@@ -272,29 +278,38 @@ <h1 id="heading-with-hidden-keyword">Heading with hidden keyword<a class="fa fa-
           <div>
             <h3 id="establishing-requirements">Establishing Requirements<a class="fa fa-anchor" href="#establishing-requirements"></a></h3>
             <p>
-              <seg id="preview">Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-                do.</seg>
+              <seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
+                requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+                of understanding what a software product should do.</seg>
             </p>
             <p>There are many techniques used during a requirements gathering. The following are some of the techniques.</p>
             <h4 id="brainstorming">Brainstorming<a class="fa fa-anchor" href="#brainstorming"></a></h4>
-            <p>Brainstorming is a group activity designed to generate a large number of diverse and creative ideas for the solution of a problem. In a brainstorming session there are no &quot;bad&quot; ideas. The aim is to generate ideas; not to validate
-              them. Brainstorming encourages you to &quot;think outside the box&quot; and put &quot;crazy&quot; ideas on the table without fear of rejection.</p>
+            <p>Brainstorming is a group activity designed to generate a large number of diverse and creative ideas for the solution
+              of a problem. In a brainstorming session there are no &quot;bad&quot; ideas.
+              The aim is to generate ideas; not to validate them. Brainstorming encourages you to &quot;think outside the box&quot; and
+              put &quot;crazy&quot; ideas on the table without fear of rejection.</p>
             <h4 id="user-surveys">User surveys<a class="fa fa-anchor" href="#user-surveys"></a></h4>
-            <p>Carefully designed questionnaires can be used to solicit responses and opinions from a large number of users regarding any current system or a new innovation.</p>
+            <p>Carefully designed questionnaires can be used to solicit responses and opinions from a large number of users regarding
+              any current system or a new innovation.</p>
             <h4 id="focus-groups">Focus groups<a class="fa fa-anchor" href="#focus-groups"></a></h4>
-            <p>Focus groups are a kind of informal interview within an interactive group setting. A <span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-html-for="_content">e.g. potential users, beta testers</span>group
-              of people</span>
-              are asked about their understanding of a specific issue or a process. Focus groups can bring out undiscovered conflicts and misunderstandings among stakeholder interests which can then be resolved or clarified as necessary.</p>
+            <p>Focus groups are a kind of informal interview within an interactive group setting.
+              A <span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-html-for="_content">e.g. potential users, beta testers</span>group of people</span>
+              are asked about their understanding of a specific issue or a process.
+              Focus groups can bring out undiscovered conflicts and misunderstandings among stakeholder interests which can then be
+              resolved or clarified as necessary.</p>
           </div>
           <p><strong>Include segment</strong></p>
           <div>
-            <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-              do.</p>
+            <p>Requirements gathering, requirements elicitation, requirements analysis,
+              requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+              of understanding what a software product should do.</p>
           </div>
           <p><strong>Boilerplate include</strong></p>
           <div name="Boilerplate Referencing">
             <p>
-              <panel src="/test_site/requirements/UserStories._include_.html" no-close=""><template slot="_header"><p>Boilerplate Includes</p></template></panel>
+              <panel src="/test_site/requirements/UserStories._include_.html" no-close=""><template slot="_header">
+                  <p>Boilerplate Includes</p>
+                </template></panel>
             </p>
           </div>
           <div name="Referencing specified path in boilerplate">
@@ -310,12 +325,12 @@ <h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within
           <div>
             <ol>
               <li><strong>Establishing requirements</strong>: <span>Requirements gathering, requirements elicitation, requirements analysis,
-requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
-of understanding what a software product should do.</span></li>
+                  requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+                  of understanding what a software product should do.</span></li>
               <li><strong>Specifying requirements</strong>: <span>As we establish requirements, they should be recorded in some way for future reference,
-usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders,
-and refine requirements based on their feedback. The next phase is to convert requirements into a product
-specification that specifies how the product will address the requirements. </span></li>
+                  usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders,
+                  and refine requirements based on their feedback. The next phase is to convert requirements into a product
+                  specification that specifies how the product will address the requirements. </span></li>
             </ol>
           </div>
           <p><strong>HTML include</strong></p>
@@ -334,8 +349,10 @@ <h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within
           <div>
             <p>This is a page from another Markbind site.</p>
             <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
-            <p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample
-              feature list from Minesweeper (only a brief description has been provided to save space).</p>
+            <p>It is a list of features (or functionalities) grouped according to some criteria such as priority
+              (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
+              (e.g. order-related, invoice-related, etc.).
+              Here is a sample feature list from Minesweeper (only a brief description has been provided to save space).</p>
             <ol>
               <li>Basic play – Single player play.</li>
               <li>Difficulty levels – Additional Medium and Advanced levels.</li>
@@ -346,7 +363,9 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
               <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
           </div>
           <div>
-            <p>This is a page from another Markbind site. The purpose of this page is to ensure that reuse works as expected. All the following images should display correctly.</p>
+            <p>This is a page from another Markbind site.
+              The purpose of this page is to ensure that reuse works as expected.
+              All the following images should display correctly.</p>
             <p>Some variables:</p>
             <div></div>
             <p>IMG tags:
@@ -452,8 +471,7 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
             <p><strong>Test included variable</strong></p>
             <p>Included variable</p>
             <p><strong>Test included variable with markdown</strong></p>
-            <p><strong><strong>Included variable with markdown</strong></strong>
-            </p>
+            <p><strong><strong>Included variable with markdown</strong></strong></p>
             <p><strong>Test included variable as attribute</strong></p>
             <p style="color: blue">Test</p>
             <p><strong>Test included variable as html element</strong></p>
@@ -472,7 +490,8 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
             <p><strong>Test included variable with global variable</strong></p>
             <p>Included variable with Global Variable</p>
             <p><strong>Test included variable overridden by set</strong></p>
-            <p>Inner variable overridden by set Global variable overridden by set</p>
+            <p>Inner variable overridden by set
+              Global variable overridden by set</p>
             <p><strong>Test missing variable with default</strong></p>
             <p>Missing Variable</p>
           </div>
@@ -483,33 +502,53 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
           <p><strong>Panel with shorthand heading syntax</strong></p>
           <panel>
             <span slot="header" class="card-title">
-        Heading
-    </span></panel>
+              Heading
+            </span></panel>
           <p><strong>Panel without src</strong></p>
-          <panel expanded="" id="panel-without-src-header"><template slot="_header"><h2 id="panel-without-src-header">Panel without src header<a class="fa fa-anchor" href="#panel-without-src-header"></a></h2></template>
+          <panel expanded="" id="panel-without-src-header"><template slot="_header">
+              <h2 id="panel-without-src-header">Panel without src header<a class="fa fa-anchor" href="#panel-without-src-header"></a></h2>
+            </template>
             <div>
               <p><strong>Panel without src content heading</strong></p>
             </div>
           </panel>
           <p><strong>Panel with normal src</strong></p>
-          <panel src="/test_site/testPanels/PanelNormalSource._include_.html" expanded="" id="panel-with-normal-src-header"><template slot="_header"><h2 id="panel-with-normal-src-header">Panel with normal src header<a class="fa fa-anchor" href="#panel-with-normal-src-header"></a></h2></template></panel>
+          <panel src="/test_site/testPanels/PanelNormalSource._include_.html" expanded="" id="panel-with-normal-src-header"><template slot="_header">
+              <h2 id="panel-with-normal-src-header">Panel with normal src header<a class="fa fa-anchor" href="#panel-with-normal-src-header"></a></h2>
+            </template></panel>
           <p><strong>Panel with src from a page segment</strong></p>
-          <panel src="/test_site/testPanels/PanelSourceContainsSegment._include_.html#segment" expanded="" fragment="segment" id="panel-with-src-from-a-page-segment-header"><template slot="_header"><h2 id="panel-with-src-from-a-page-segment-header">Panel with src from a page segment header<a class="fa fa-anchor" href="#panel-with-src-from-a-page-segment-header"></a></h2></template></panel>
+          <panel src="/test_site/testPanels/PanelSourceContainsSegment._include_.html#segment" expanded="" fragment="segment" id="panel-with-src-from-a-page-segment-header"><template slot="_header">
+              <h2 id="panel-with-src-from-a-page-segment-header">Panel with src from a page segment header<a class="fa fa-anchor" href="#panel-with-src-from-a-page-segment-header"></a></h2>
+            </template></panel>
           <p><strong>Panel with boilerplate</strong></p>
-          <panel src="/test_site/testPanels/boilerTestPanel._include_.html" expanded="" id="boilerplate-referencing"><template slot="_header"><h2 id="boilerplate-referencing">Boilerplate referencing<a class="fa fa-anchor" href="#boilerplate-referencing"></a></h2></template></panel>
-          <panel src="/test_site/testPanels/notInside._include_.html" expanded="" id="referencing-specified-path-in-boilerplate"><template slot="_header"><h2 id="referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate<a class="fa fa-anchor" href="#referencing-specified-path-in-boilerplate"></a></h2></template></panel>
+          <panel src="/test_site/testPanels/boilerTestPanel._include_.html" expanded="" id="boilerplate-referencing"><template slot="_header">
+              <h2 id="boilerplate-referencing">Boilerplate referencing<a class="fa fa-anchor" href="#boilerplate-referencing"></a></h2>
+            </template></panel>
+          <panel src="/test_site/testPanels/notInside._include_.html" expanded="" id="referencing-specified-path-in-boilerplate"><template slot="_header">
+              <h2 id="referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate<a class="fa fa-anchor" href="#referencing-specified-path-in-boilerplate"></a></h2>
+            </template></panel>
           <p><strong>Nested panel</strong></p>
-          <panel src="/test_site/testPanels/NestedPanel._include_.html" expanded="" id="outer-nested-panel"><template slot="_header"><h2 id="outer-nested-panel">Outer nested panel<a class="fa fa-anchor" href="#outer-nested-panel"></a></h2></template></panel>
+          <panel src="/test_site/testPanels/NestedPanel._include_.html" expanded="" id="outer-nested-panel"><template slot="_header">
+              <h2 id="outer-nested-panel">Outer nested panel<a class="fa fa-anchor" href="#outer-nested-panel"></a></h2>
+            </template></panel>
           <p><strong>Nested panel without src</strong></p>
-          <panel expanded="" id="outer-nested-panel-without-src"><template slot="_header"><h2 id="outer-nested-panel-without-src">Outer nested panel without src<a class="fa fa-anchor" href="#outer-nested-panel-without-src"></a></h2></template>
+          <panel expanded="" id="outer-nested-panel-without-src"><template slot="_header">
+              <h2 id="outer-nested-panel-without-src">Outer nested panel without src<a class="fa fa-anchor" href="#outer-nested-panel-without-src"></a></h2>
+            </template>
             <p><strong>Panel content of outer nested panel</strong></p>
-            <panel expanded="" id="inner-panel-header-without-src"><template slot="_header"><h2 id="inner-panel-header-without-src">Inner panel header without src<a class="fa fa-anchor" href="#inner-panel-header-without-src"></a></h2></template>
+            <panel expanded="" id="inner-panel-header-without-src"><template slot="_header">
+                <h2 id="inner-panel-header-without-src">Inner panel header without src<a class="fa fa-anchor" href="#inner-panel-header-without-src"></a></h2>
+              </template>
               <p><strong>Panel content of inner nested panel</strong></p>
             </panel>
           </panel>
           <p><strong>Panel with src from another Markbind site</strong></p>
-          <panel src="/test_site/sub_site/index._include_.html" expanded="" id="panel-with-src-from-another-markbind-site-header"><template slot="_header"><h2 id="panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header"></a></h2></template></panel>
-          <panel src="/test_site/sub_site/testReuse._include_.html" expanded="" id="panel-with-src-from-another-markbind-site-header-2"><template slot="_header"><h2 id="panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header-2"></a></h2></template></panel>
+          <panel src="/test_site/sub_site/index._include_.html" expanded="" id="panel-with-src-from-another-markbind-site-header"><template slot="_header">
+              <h2 id="panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header"></a></h2>
+            </template></panel>
+          <panel src="/test_site/sub_site/testReuse._include_.html" expanded="" id="panel-with-src-from-another-markbind-site-header-2"><template slot="_header">
+              <h2 id="panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header-2"></a></h2>
+            </template></panel>
         </div>
         <p><strong>Modal with panel inside</strong></p>
         <p><span for="modal-with-panel" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal-with-panel'].show()" class="trigger">trigger</span></p>
@@ -519,9 +558,13 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
           </panel>
         </b-modal>
         <p><strong>Unexpanded panel</strong></p>
-        <panel id="unexpanded-panel-header"><template slot="_header"><h2 id="unexpanded-panel-header">Unexpanded panel header<a class="fa fa-anchor" href="#unexpanded-panel-header"></a></h2></template>
+        <panel id="unexpanded-panel-header"><template slot="_header">
+            <h2 id="unexpanded-panel-header">Unexpanded panel header<a class="fa fa-anchor" href="#unexpanded-panel-header"></a></h2>
+          </template>
           <p><strong>Panel content of unexpanded panel should not appear in search data</strong></p>
-          <panel expanded="" id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"><template slot="_header"><h2 id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data">Panel header inside unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"></a></h2></template>
+          <panel expanded="" id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"><template slot="_header">
+              <h2 id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data">Panel header inside unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"></a></h2>
+            </template>
             <p><strong>Panel content inside unexpanded panel should not appear in search data</strong></p>
           </panel>
         </panel>
@@ -575,11 +618,13 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
             </li>
             <li id="footnote2" class="footnote-item">
               <p>Here's one with multiple blocks.</p>
-              <p>Subsequent paragraphs are indented to show that they belong to the previous footnote.</p>
+              <p>Subsequent paragraphs are indented to show that they
+                belong to the previous footnote.</p>
             </li>
             <li id="footnote3" class="footnote-item">
-              <p>Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note.
-              </p>
+              <p>Inlines notes are easier to write, since
+                you don't have to pick an identifier and move down to type the
+                note.</p>
             </li>
           </ol>
           <popover id="pop:footnote1">
@@ -591,14 +636,16 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
           <popover id="pop:footnote2">
             <div slot="content">
               <p>Here's one with multiple blocks.</p>
-              <p>Subsequent paragraphs are indented to show that they belong to the previous footnote.</p>
+              <p>Subsequent paragraphs are indented to show that they
+                belong to the previous footnote.</p>
             </div>
           </popover>
 
           <popover id="pop:footnote3">
             <div slot="content">
-              <p>Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note.
-              </p>
+              <p>Inlines notes are easier to write, since
+                you don't have to pick an identifier and move down to type the
+                note.</p>
             </div>
           </popover>
         </section>
diff --git a/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html b/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
index 2e44a9c0c1..5e31c012fe 100644
--- a/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
+++ b/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
@@ -4,6 +4,8 @@
       <strong>Non-Functional Requirements</strong> specify the constraints under which system is developed and operated.</p>
   </div>
   <p>
-    <seg id="preview">Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should do.</seg>
+    <seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
+      requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+      of understanding what a software product should do.</seg>
   </p>
 </seg>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/requirements/UserStories._include_.html b/test/functional/test_site/expected/requirements/UserStories._include_.html
index 72cb964f89..09327439ce 100644
--- a/test/functional/test_site/expected/requirements/UserStories._include_.html
+++ b/test/functional/test_site/expected/requirements/UserStories._include_.html
@@ -1,17 +1,21 @@
-<p>User stories are brief (typically, 1-3 sentences) descriptions of what the system can do for the users, written in the customers’ language. Often, user stories are written by the customers themselves.</p>
+<p>User stories are brief (typically, 1-3 sentences) descriptions of what the system can do for the users,
+  written in the customers’ language. Often, user stories are written by the customers themselves.</p>
 <p>A commonly used format for writing user stories is:<br>
   <strong><code>As a</code></strong> <code>&lt;use type/role&gt;</code> <strong><code>I can</code></strong> <code>&lt;function&gt;</code> <strong><code>so that</code></strong> <code>&lt;benefit&gt;</code></p>
 <p>Here are some examples of user stories for the IVLE system:</p>
 <pre><code class="hljs bat"><span>* As a student, I can download files uploaded by lecturers, so that I can get my own <span class="hljs-built_in">copy</span> of the files.</span><span>* As a lecturer, I can create discussion forums, so that students can discuss things online.</span><span>* As a tutor, I can <span class="hljs-built_in">print</span> attendance sheets, so that I can take attendance during the class.</span></code></pre>
-<p>The <code>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets. User stories are mainly used for early estimation and scheduling purposes.</p>
-<p>According to
-  <ref xp-website="">this
-    <ref></ref>, the biggest difference between user stories and traditional requirements specifications is in the level of detail. User stories should only provide enough detail to make a reasonably low risk estimate of how long the story will take to implement.
-    When the time comes to implement the story, the developers will meet with the customer face-to-face to work out a more detailed description of the requirements.</ref>
+<p>The <code>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets.
+  User stories are mainly used for early estimation and scheduling purposes.</p>
+<p>According to <ref xp-website="">this<ref></ref>, the biggest difference between user stories and traditional requirements
+    specifications is in the level of detail. User stories should only provide enough detail to make a reasonably low risk
+    estimate of how long the story will take to implement. When the time comes to implement the story,
+    the developers will meet with the customer face-to-face to work out a more detailed description of the requirements.</ref>
 </p>
-<p>User stories are often written on index cards or sticky notes, and arranged on walls or tables to facilitate planning and discussion.</p>
+<p>User stories are often written on index cards or sticky notes, and arranged on walls or tables to facilitate
+  planning and discussion.</p>
 <p>
-  <seg xp-website="" sup=""><a href="http://www.extremeprogramming.org/rules/userstories.html">http://www.extremeprogramming.org/rules/userstories.html</a> This is the main website for eXtreme Programming (XP), an approach to software development currently popular among practitioners.
-    User stories are commonly used among XP practitioners to capture requirements.
+  <seg xp-website="" sup=""><a href="http://www.extremeprogramming.org/rules/userstories.html">http://www.extremeprogramming.org/rules/userstories.html</a>
+    This is the main website for eXtreme Programming (XP), an approach to software development currently popular
+    among practitioners. User stories are commonly used among XP practitioners to capture requirements.
   </seg>
 </p>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/sub_site/index._include_.html b/test/functional/test_site/expected/sub_site/index._include_.html
index 88c699b5b3..d8882f7f54 100644
--- a/test/functional/test_site/expected/sub_site/index._include_.html
+++ b/test/functional/test_site/expected/sub_site/index._include_.html
@@ -1,7 +1,9 @@
 <p>This is a page from another Markbind site.</p>
 <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
-<p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample feature
-  list from Minesweeper (only a brief description has been provided to save space).</p>
+<p>It is a list of features (or functionalities) grouped according to some criteria such as priority
+  (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
+  (e.g. order-related, invoice-related, etc.).
+  Here is a sample feature list from Minesweeper (only a brief description has been provided to save space).</p>
 <ol>
   <li>Basic play – Single player play.</li>
   <li>Difficulty levels – Additional Medium and Advanced levels.</li>
diff --git a/test/functional/test_site/expected/sub_site/index.html b/test/functional/test_site/expected/sub_site/index.html
index ff562d1f75..4176d0d3f1 100644
--- a/test/functional/test_site/expected/sub_site/index.html
+++ b/test/functional/test_site/expected/sub_site/index.html
@@ -27,8 +27,10 @@
       <div id="content-wrapper">
         <p>This is a page from another Markbind site.</p>
         <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
-        <p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample
-          feature list from Minesweeper (only a brief description has been provided to save space).</p>
+        <p>It is a list of features (or functionalities) grouped according to some criteria such as priority
+          (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
+          (e.g. order-related, invoice-related, etc.).
+          Here is a sample feature list from Minesweeper (only a brief description has been provided to save space).</p>
         <ol>
           <li>Basic play – Single player play.</li>
           <li>Difficulty levels – Additional Medium and Advanced levels.</li>
diff --git a/test/functional/test_site/expected/sub_site/testReuse._include_.html b/test/functional/test_site/expected/sub_site/testReuse._include_.html
index 627a6d8de1..263cd85a41 100644
--- a/test/functional/test_site/expected/sub_site/testReuse._include_.html
+++ b/test/functional/test_site/expected/sub_site/testReuse._include_.html
@@ -1,4 +1,6 @@
-<p>This is a page from another Markbind site. The purpose of this page is to ensure that reuse works as expected. All the following images should display correctly.</p>
+<p>This is a page from another Markbind site.
+  The purpose of this page is to ensure that reuse works as expected.
+  All the following images should display correctly.</p>
 <p>Some variables:</p>
 <div></div>
 <p>IMG tags:
diff --git a/test/functional/test_site/expected/testAnchorGeneration.html b/test/functional/test_site/expected/testAnchorGeneration.html
index f23232ca80..cc00a30672 100644
--- a/test/functional/test_site/expected/testAnchorGeneration.html
+++ b/test/functional/test_site/expected/testAnchorGeneration.html
@@ -32,9 +32,14 @@ <h3 id="should-have-anchor-3">should have anchor<a class="fa fa-anchor" href="#s
         <h4 id="should-have-anchor-4">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4"></a></h4>
         <h5 id="should-have-anchor-5">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5"></a></h5>
         <h6 id="should-have-anchor-6">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6"></a></h6>
-        <panel id="should-have-anchor-7"><template slot="_header"><h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h4></template> Lorem ipsum
+        <panel id="should-have-anchor-7"><template slot="_header">
+            <h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h4>
+          </template>
+          Lorem ipsum
         </panel>
-        <panel><template slot="_header"><p>Collapsed</p></template>
+        <panel><template slot="_header">
+            <p>Collapsed</p>
+          </template>
           <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
           <h1 id="should-not-have-anchor">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor"></a></h1>
           <h2 id="should-not-have-anchor-2">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-2"></a></h2>
@@ -43,7 +48,9 @@ <h4 id="should-not-have-anchor-4">should not have anchor<a class="fa fa-anchor"
           <h5 id="should-not-have-anchor-5">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-5"></a></h5>
           <h6 id="should-not-have-anchor-6">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-6"></a></h6>
         </panel>
-        <panel expanded=""><template slot="_header"><p>Expanded</p></template>
+        <panel expanded=""><template slot="_header">
+            <p>Expanded</p>
+          </template>
           <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
           <h1 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8"></a></h1>
           <h2 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9"></a></h2>
@@ -62,9 +69,14 @@ <h3 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#
           <h4 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17"></a></h4>
           <h5 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18"></a></h5>
           <h6 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19"></a></h6>
-          <panel id="should-have-anchor-20"><template slot="_header"><h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h4></template> Lorem ipsum
+          <panel id="should-have-anchor-20"><template slot="_header">
+              <h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h4>
+            </template>
+            Lorem ipsum
           </panel>
-          <panel><template slot="_header"><p>Collapsed</p></template>
+          <panel><template slot="_header">
+              <p>Collapsed</p>
+            </template>
             <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
             <h1 id="should-not-have-anchor-7">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-7"></a></h1>
             <h2 id="should-not-have-anchor-8">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-8"></a></h2>
@@ -73,7 +85,9 @@ <h4 id="should-not-have-anchor-10">should not have anchor<a class="fa fa-anchor"
             <h5 id="should-not-have-anchor-11">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-11"></a></h5>
             <h6 id="should-not-have-anchor-12">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-12"></a></h6>
           </panel>
-          <panel expanded=""><template slot="_header"><p>Expanded</p></template>
+          <panel expanded=""><template slot="_header">
+              <p>Expanded</p>
+            </template>
             <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
             <h1 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21"></a></h1>
             <h2 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22"></a></h2>
diff --git a/test/functional/test_site/expected/testAntiFOUCStyles.html b/test/functional/test_site/expected/testAntiFOUCStyles.html
index 01ce625775..d1b24555d0 100644
--- a/test/functional/test_site/expected/testAntiFOUCStyles.html
+++ b/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -47,8 +47,8 @@
         <div class="temp-dropdown-placeholder"></div>
         <dropdown class="temp-dropdown">
           <button slot="button" type="button" class="btn dropdown-toggle">
-    Test Two
-    <span class="caret"></span></button>
+            Test Two
+            <span class="caret"></span></button>
           <li><a class="dropdown-item" href="/">Dropdown One</a></li>
           <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
         </dropdown>
diff --git a/test/functional/test_site/expected/testExternalScripts.html b/test/functional/test_site/expected/testExternalScripts.html
index 39c5461eff..7423ca8bb0 100644
--- a/test/functional/test_site/expected/testExternalScripts.html
+++ b/test/functional/test_site/expected/testExternalScripts.html
@@ -27,7 +27,8 @@
       <div id="content-wrapper">
         <p>The external script <a href="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">MathJax 2.75</a> should be included, and the following MathJax content should render:</p>
         <box>
-          When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
+          When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
+          $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
         </box>
       </div>
     </div>
diff --git a/test/functional/test_site/expected/testImportVariables._include_.html b/test/functional/test_site/expected/testImportVariables._include_.html
index 49f93149f8..c393869205 100644
--- a/test/functional/test_site/expected/testImportVariables._include_.html
+++ b/test/functional/test_site/expected/testImportVariables._include_.html
@@ -1,7 +1,8 @@
 <div></div>
 <p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
 <div></div>
-<p>Test import variables from src specified via variable: This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
+<p>Test import variables from src specified via variable:
+  This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
 <p>Test import variables that itself imports other variables:</p>
 <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
 <p>There should be something red below:</p>
diff --git a/test/functional/test_site/expected/testImportVariables.html b/test/functional/test_site/expected/testImportVariables.html
index c4d1079e6d..31adc9f177 100644
--- a/test/functional/test_site/expected/testImportVariables.html
+++ b/test/functional/test_site/expected/testImportVariables.html
@@ -28,7 +28,8 @@
         <div></div>
         <p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
         <div></div>
-        <p>Test import variables from src specified via variable: This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
+        <p>Test import variables from src specified via variable:
+          This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
         <p>Test import variables that itself imports other variables:</p>
         <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
         <p>There should be something red below:</p>
diff --git a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
index abd9590c4c..429ef1de2a 100644
--- a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
+++ b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
@@ -1 +1,3 @@
-<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header"><h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel"></a></h2></template></panel>
\ No newline at end of file
+<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header">
+    <h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel"></a></h2>
+  </template></panel>
\ No newline at end of file
diff --git a/test/functional/test_site/site.json b/test/functional/test_site/site.json
index d67f514bac..c7213b8fda 100644
--- a/test/functional/test_site/site.json
+++ b/test/functional/test_site/site.json
@@ -1,5 +1,6 @@
 {
   "baseUrl": "/test_site",
+  "jsBeautify": true,
   "faviconPath": "favicon.png",
   "titlePrefix": "",
   "pages": [
diff --git a/test/functional/test_site/sub_site/site.json b/test/functional/test_site/sub_site/site.json
index 7fa3ebccaf..ef308a1d04 100644
--- a/test/functional/test_site/sub_site/site.json
+++ b/test/functional/test_site/sub_site/site.json
@@ -1,5 +1,6 @@
 {
   "baseUrl": "/sub_site",
+  "jsBeautify": true,
   "pages": [
     {
       "src": "index.md",
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
index 17bee8e7d7..e123033df5 100644
--- a/test/functional/test_site_algolia_plugin/expected/index.html
+++ b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -43,16 +43,23 @@
         </b-modal>
         <span for="modal:trigger_id" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal:trigger_id'].show()" class="trigger">Trigger should not have `algolia-no-index` class</span>
         <p><strong>Panels that are not expanded should have algolia-no-index class</strong></p>
-        <panel class="algolia-no-index"><template slot="_header"><p>Panel</p></template> Content
+        <panel class="algolia-no-index"><template slot="_header">
+            <p>Panel</p>
+          </template>
+          Content
         </panel>
-        <panel expanded=""><template slot="_header"><p>Panel</p></template> Content
+        <panel expanded=""><template slot="_header">
+            <p>Panel</p>
+          </template>
+          Content
         </panel>
         <p><strong>Popover content should have algolia-no-index class</strong></p>
         <span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span>
-        <div data-mb-html-for="content">Content should have `algolia-no-index` class</div>
-        <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
+          <div data-mb-html-for="content">Content should have `algolia-no-index` class</div>
+          <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
+        </span>
         <span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span><span data-mb-html-for="content">Content as attribute does not require <code>algolia-no-index</code> class</span>
-        <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
+          <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
         <p><strong>Question hint and answer should have algolia-no-index class</strong></p>
         <question>
           Question should not have `algolia-no-index` class
@@ -61,42 +68,42 @@
         </question>
         <p><strong>Tabs except first tab should have algolia-no-index class</strong></p>
         <tabs>
-          <tab><template slot="_header">First Tab</template> Content
-            <br>Content<br>Content<br>Content
+          <tab><template slot="_header">First Tab</template>
+            Content<br>Content<br>Content<br>Content
           </tab>
-          <tab class="algolia-no-index"><template slot="_header">Second Tab</template> Content
-            <br>Content<br>Content<br>Content
+          <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+            Content<br>Content<br>Content<br>Content
           </tab>
         </tabs>
         <tabs>
           <tab-group><template slot="_header">First Group</template>
-            <tab class="algolia-no-index"><template slot="_header">First Tab</template> Content
-              <br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+              Content<br>Content<br>Content<br>Content
             </tab>
-            <tab class="algolia-no-index"><template slot="_header">Second Tab</template> Content
-              <br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+              Content<br>Content<br>Content<br>Content
             </tab>
           </tab-group>
           <tab-group class="algolia-no-index"><template slot="_header">Second Group</template>
-            <tab class="algolia-no-index"><template slot="_header">First Tab</template> Content
-              <br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+              Content<br>Content<br>Content<br>Content
             </tab>
-            <tab class="algolia-no-index"><template slot="_header">Second Tab</template> Content
-              <br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+              Content<br>Content<br>Content<br>Content
             </tab>
           </tab-group>
         </tabs>
         <tabs>
           <tab-group><template slot="_header">Outer One</template>
-            <tab class="algolia-no-index"><template slot="_header">First Tab</template> Content
-              <br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+              Content<br>Content<br>Content<br>Content
             </tab>
-            <tab class="algolia-no-index"><template slot="_header">Second Tab</template> Content
-              <br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+              Content<br>Content<br>Content<br>Content
             </tab>
           </tab-group>
-          <tab class="algolia-no-index"><template slot="_header">Outer Two</template> Content
-            <br>Content<br>Content<br>Content
+          <tab class="algolia-no-index"><template slot="_header">Outer Two</template>
+            Content<br>Content<br>Content<br>Content
           </tab>
         </tabs>
       </div>
diff --git a/test/functional/test_site_algolia_plugin/site.json b/test/functional/test_site_algolia_plugin/site.json
index 4f0af780da..ed2fa41f99 100644
--- a/test/functional/test_site_algolia_plugin/site.json
+++ b/test/functional/test_site_algolia_plugin/site.json
@@ -1,5 +1,6 @@
 {
   "baseUrl": "/test_site_algolia_plugin",
+  "jsBeautify": true,
   "titlePrefix": "",
   "ignore": [
     "_markbind/layouts/*",
diff --git a/test/functional/test_site_convert/expected/Home.html b/test/functional/test_site_convert/expected/Home.html
index 4d3eb80299..094d4e0593 100644
--- a/test/functional/test_site_convert/expected/Home.html
+++ b/test/functional/test_site_convert/expected/Home.html
@@ -1,55 +1,40 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
+<body >
+<div id="app">
+    <header><navbar placement="top" type="inverse" class="temp-navbar">
+  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+  <li><a href="/index.html" class="nav-link">HOME</a></li>
+  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+  <li slot="right">
+    <form class="navbar-form">
+      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2">[[Home]]</li>
+<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-</head>
+<div id="content-wrapper">
+<p>Welcome to the test-deploy wiki!</p></div>
 
-<body>
-  <div id="app">
-    <header>
-      <navbar placement="top" type="inverse" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-        <li><a href="/index.html" class="nav-link">HOME</a></li>
-        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2">[[Home]]</li>
-            <li class="mt-2">[[Page-1]]</li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <p>Welcome to the test-deploy wiki!</p>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -62,5 +47,4 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/Page-1.html b/test/functional/test_site_convert/expected/Page-1.html
index 99e58a5fa8..fdadbe87b6 100644
--- a/test/functional/test_site_convert/expected/Page-1.html
+++ b/test/functional/test_site_convert/expected/Page-1.html
@@ -1,55 +1,40 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
+<body >
+<div id="app">
+    <header><navbar placement="top" type="inverse" class="temp-navbar">
+  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+  <li><a href="/index.html" class="nav-link">HOME</a></li>
+  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+  <li slot="right">
+    <form class="navbar-form">
+      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2">[[Home]]</li>
+<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-</head>
+<div id="content-wrapper">
+<h1 id="page-1">Page 1<a class="fa fa-anchor" href="#page-1"></a></h1></div>
 
-<body>
-  <div id="app">
-    <header>
-      <navbar placement="top" type="inverse" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-        <li><a href="/index.html" class="nav-link">HOME</a></li>
-        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2">[[Home]]</li>
-            <li class="mt-2">[[Page-1]]</li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <h1 id="page-1">Page 1<a class="fa fa-anchor" href="#page-1"></a></h1>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -62,5 +47,4 @@ <h1 id="page-1">Page 1<a class="fa fa-anchor" href="#page-1"></a></h1>
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/_Footer.html b/test/functional/test_site_convert/expected/_Footer.html
index 79bea350bb..5ab3838212 100644
--- a/test/functional/test_site_convert/expected/_Footer.html
+++ b/test/functional/test_site_convert/expected/_Footer.html
@@ -1,55 +1,40 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
+<body >
+<div id="app">
+    <header><navbar placement="top" type="inverse" class="temp-navbar">
+  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+  <li><a href="/index.html" class="nav-link">HOME</a></li>
+  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+  <li slot="right">
+    <form class="navbar-form">
+      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2">[[Home]]</li>
+<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-</head>
+<div id="content-wrapper">
+<p>Custom footer.</p></div>
 
-<body>
-  <div id="app">
-    <header>
-      <navbar placement="top" type="inverse" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-        <li><a href="/index.html" class="nav-link">HOME</a></li>
-        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2">[[Home]]</li>
-            <li class="mt-2">[[Page-1]]</li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <p>Custom footer.</p>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -62,5 +47,4 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/_Sidebar.html b/test/functional/test_site_convert/expected/_Sidebar.html
index c273ae8c0b..be35b53412 100644
--- a/test/functional/test_site_convert/expected/_Sidebar.html
+++ b/test/functional/test_site_convert/expected/_Sidebar.html
@@ -1,58 +1,42 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
+<body >
+<div id="app">
+    <header><navbar placement="top" type="inverse" class="temp-navbar">
+  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+  <li><a href="/index.html" class="nav-link">HOME</a></li>
+  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+  <li slot="right">
+    <form class="navbar-form">
+      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2">[[Home]]</li>
+<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-</head>
+<div id="content-wrapper">
+<ul>
+<li>[[Home]]</li>
+<li>[[Page-1]]</li></ul></div>
 
-<body>
-  <div id="app">
-    <header>
-      <navbar placement="top" type="inverse" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-        <li><a href="/index.html" class="nav-link">HOME</a></li>
-        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2">[[Home]]</li>
-            <li class="mt-2">[[Page-1]]</li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <ul>
-          <li>[[Home]]</li>
-          <li>[[Page-1]]</li>
-        </ul>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -65,5 +49,4 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/about.html b/test/functional/test_site_convert/expected/about.html
index 5a52fc9b5f..df9ac19d3f 100644
--- a/test/functional/test_site_convert/expected/about.html
+++ b/test/functional/test_site_convert/expected/about.html
@@ -1,56 +1,41 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
+<body >
+<div id="app">
+    <header><navbar placement="top" type="inverse" class="temp-navbar">
+  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+  <li><a href="/index.html" class="nav-link">HOME</a></li>
+  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+  <li slot="right">
+    <form class="navbar-form">
+      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2">[[Home]]</li>
+<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-</head>
+<div id="content-wrapper">
+<h1 id="about">About<a class="fa fa-anchor" href="#about"></a></h1>
+<p>Welcome to your <strong>About Us</strong> page.</p></div>
 
-<body>
-  <div id="app">
-    <header>
-      <navbar placement="top" type="inverse" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-        <li><a href="/index.html" class="nav-link">HOME</a></li>
-        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2">[[Home]]</li>
-            <li class="mt-2">[[Page-1]]</li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <h1 id="about">About<a class="fa fa-anchor" href="#about"></a></h1>
-        <p>Welcome to your <strong>About Us</strong> page.</p>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -63,5 +48,4 @@ <h1 id="about">About<a class="fa fa-anchor" href="#about"></a></h1>
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/contents/topic1.html b/test/functional/test_site_convert/expected/contents/topic1.html
index 443d19c202..27be1becfc 100644
--- a/test/functional/test_site_convert/expected/contents/topic1.html
+++ b/test/functional/test_site_convert/expected/contents/topic1.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -22,54 +21,37 @@
 <body>
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a current">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a current">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
+<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+
+<div id="content-wrapper">
+<br>
+<h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
+<blockquote>
+<p>More content to be added</p></blockquote></div>
+
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <br>
-        <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
-        <blockquote>
-          <p>More content to be added</p>
-        </blockquote>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -82,5 +64,4 @@ <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/contents/topic2.html b/test/functional/test_site_convert/expected/contents/topic2.html
index 6a9af6c6f6..51f9663a31 100644
--- a/test/functional/test_site_convert/expected/contents/topic2.html
+++ b/test/functional/test_site_convert/expected/contents/topic2.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -22,52 +21,36 @@
 <body>
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a current">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a current">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
+<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+
+<div id="content-wrapper">
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <br>
-        <box>
-          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -80,5 +63,4 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/contents/topic3a.html b/test/functional/test_site_convert/expected/contents/topic3a.html
index a97b3e9b2c..4cb6f2501a 100644
--- a/test/functional/test_site_convert/expected/contents/topic3a.html
+++ b/test/functional/test_site_convert/expected/contents/topic3a.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -22,52 +21,36 @@
 <body>
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
+<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
+<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+
+<div id="content-wrapper">
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <br>
-        <box>
-          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -80,5 +63,4 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/contents/topic3b.html b/test/functional/test_site_convert/expected/contents/topic3b.html
index 923dd7657d..ed5c208000 100644
--- a/test/functional/test_site_convert/expected/contents/topic3b.html
+++ b/test/functional/test_site_convert/expected/contents/topic3b.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -22,52 +21,36 @@
 <body>
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
+<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li></ul></div></li></ul></div></nav>
+
+<div id="content-wrapper">
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <br>
-        <box>
-          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -80,5 +63,4 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_convert/expected/index.html b/test/functional/test_site_convert/expected/index.html
index 3cecd49c47..e5138c33af 100644
--- a/test/functional/test_site_convert/expected/index.html
+++ b/test/functional/test_site_convert/expected/index.html
@@ -1,55 +1,40 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Landing Page</title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
+<body >
+<div id="app">
+    <header><navbar placement="top" type="inverse" class="temp-navbar">
+  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+  <li><a href="/index.html" class="nav-link">HOME</a></li>
+  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+  <li slot="right">
+    <form class="navbar-form">
+      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2">[[Home]]</li>
+<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Landing Page</title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-</head>
+<div id="content-wrapper">
+<p>Welcome to the test-deploy wiki!</p></div>
 
-<body>
-  <div id="app">
-    <header>
-      <navbar placement="top" type="inverse" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-        <li><a href="/index.html" class="nav-link">HOME</a></li>
-        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2">[[Home]]</li>
-            <li class="mt-2">[[Page-1]]</li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <p>Welcome to the test-deploy wiki!</p>
-      </div>
-    </div>
     <footer>
-      Custom footer.
-    </footer>
-  </div>
+	Custom footer.
+</footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -62,5 +47,4 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_expressive_layout/expected/index.html b/test/functional/test_site_expressive_layout/expected/index.html
index fe31604f9f..726c1bf7c0 100644
--- a/test/functional/test_site_expressive_layout/expected/index.html
+++ b/test/functional/test_site_expressive_layout/expected/index.html
@@ -26,7 +26,12 @@
         <div></div>
         <p>Variable from layout</p>
         <p>This is an importedVar</p>
-        <panel type="success" minimized=""><template slot="_header"><p>Expanded panel</p></template><template slot="_alt"><p>Minimized panel</p></template> Math formulas
+        <panel type="success" minimized=""><template slot="_header">
+            <p>Expanded panel</p>
+          </template><template slot="_alt">
+            <p>Minimized panel</p>
+          </template>
+          Math formulas
         </panel>
         <div></div>
         <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
diff --git a/test/functional/test_site_expressive_layout/site.json b/test/functional/test_site_expressive_layout/site.json
index 79b240d49c..5b21662353 100755
--- a/test/functional/test_site_expressive_layout/site.json
+++ b/test/functional/test_site_expressive_layout/site.json
@@ -1,5 +1,6 @@
 {
   "baseUrl": "/test_site_expressive_layout",
+  "jsBeautify": true,
   "titlePrefix": "",
   "ignore": [
     "_markbind/layouts/*",
diff --git a/test/functional/test_site_special_tags/expected/index.html b/test/functional/test_site_special_tags/expected/index.html
index 543b6e6371..ee83be0f23 100644
--- a/test/functional/test_site_special_tags/expected/index.html
+++ b/test/functional/test_site_special_tags/expected/index.html
@@ -66,15 +66,20 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
 
 success!</testtag>
         <hr>
-        <p>This has the same content has the previous test, but it is <strong>not</strong> a special tag. The html comment <code>&lt;!-- --&gt;</code> should disappear in the expected output. The line <code>some text</code> should appear as per normal, and
-          not wrapped by a paragraph since a html tag precedes it without a blank line. The other lines should be parsed as markdown paragraphs, as per commonmark spec.</p>
+        <p>This has the same content has the previous test, but it is <strong>not</strong> a special tag.
+          The html comment <code>&lt;!-- --&gt;</code> should disappear in the expected output.
+          The line <code>some text</code> should appear as per normal, and not wrapped by a paragraph since
+          a html tag precedes it without a blank line.
+          The other lines should be parsed as markdown paragraphs, as per commonmark spec.</p>
         <abc>
           <these>
             some text
           </these>
 
           <p>//</p>
-          <p>/* ... */
+          <p>/*
+            ...
+            */
           </p>
         </abc>
         <hr>
diff --git a/test/functional/test_site_special_tags/site.json b/test/functional/test_site_special_tags/site.json
index 5072da6cb2..76e8b7a8db 100644
--- a/test/functional/test_site_special_tags/site.json
+++ b/test/functional/test_site_special_tags/site.json
@@ -1,4 +1,5 @@
 {
+  "jsBeautify": true,
   "ignore": [
     "_markbind/layouts/*",
     "_markbind/logs/*",
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic1.html b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
index fc043d41a9..04312d3cb7 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic1.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -22,50 +21,35 @@
 <body>
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a current">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a current">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
+<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+
+<div id="content-wrapper">
+<br>
+<h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
+<blockquote>
+<p>More content to be added</p></blockquote></div>
+
+
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <br>
-        <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
-        <blockquote>
-          <p>More content to be added</p>
-        </blockquote>
-      </div>
-    </div>
     <footer>
 
       <div class="text-center">
@@ -84,5 +68,4 @@ <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic2.html b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
index c2869ef12a..8fd4b9c771 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic2.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -22,48 +21,34 @@
 <body>
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a current">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a current">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
+<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+
+<div id="content-wrapper">
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+
+
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <br>
-        <box>
-          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
-      </div>
-    </div>
     <footer>
 
       <div class="text-center">
@@ -82,5 +67,4 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
index 03e83e9b3a..adbb2fba04 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -22,48 +21,34 @@
 <body>
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
+<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
+<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+
+<div id="content-wrapper">
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+
+
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <br>
-        <box>
-          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
-      </div>
-    </div>
     <footer>
 
       <div class="text-center">
@@ -82,5 +67,4 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
index 573d68ebc1..41e48280ed 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -22,48 +21,34 @@
 <body>
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
+<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
+<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li></ul></div></li></ul></div></nav>
+
+<div id="content-wrapper">
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+
+
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <br>
-        <box>
-          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
-      </div>
-    </div>
     <footer>
 
       <div class="text-center">
@@ -82,5 +67,4 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_templates/test_default/expected/index.html b/test/functional/test_site_templates/test_default/expected/index.html
index 22d35f8e5f..4b659f6a1e 100644
--- a/test/functional/test_site_templates/test_default/expected/index.html
+++ b/test/functional/test_site_templates/test_default/expected/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -23,30 +22,22 @@
 <body data-spy="scroll" data-target="#page-nav" data-offset="100">
   <div id="app">
     <header>
-      <navbar type="dark" class="temp-navbar">
-        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
-        </dropdown>
-        <li slot="right">
-          <form class="navbar-form">
-            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
-          </form>
-        </li>
-      </navbar>
-    </header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a current">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
+  <navbar type="dark" class="temp-navbar">
+    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/index.html" class="site-nav__a current">Home 🏠</a></li>
+<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
  <i class="dropdown-btn-icon rotate-icon">
 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
               <div class="dropdown-container dropdown-container-open">
@@ -193,16 +184,15 @@ <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
             <a class="nav-link py-1" href="#heading-2">Heading 2&#x200E;</a>
             <a class="nav-link py-1" href="#heading-3">Heading 3&#x200E;</a>
 
-          </nav>
-        </div>
-      </nav>
-    </div>
-    <footer>
 
-      <div class="text-center">
-        <small>[Generated by <a href="https://markbind.org/">MarkBind 2.13.1</a>]</small></div>
-    </footer>
-  </div>
+</nav>
+</div>
+</nav>
+</div>
+    <footer>
+  
+  <div class="text-center">
+    <small>[Generated by <a href="https://markbind.org/">MarkBind 2.13.1</a>]</small></div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -215,5 +205,4 @@ <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_templates/test_minimal/expected/index.html b/test/functional/test_site_templates/test_minimal/expected/index.html
index 60ccb2fd3f..b5c196cc82 100644
--- a/test/functional/test_site_templates/test_minimal/expected/index.html
+++ b/test/functional/test_site_templates/test_minimal/expected/index.html
@@ -1,42 +1,35 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Hello World</title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
+<body >
+<div id="app">
+    <header></header><div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"></div></nav>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello World</title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-</head>
+<div id="content-wrapper">
+<h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
+<p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p></div>
 
-<body>
-  <div id="app">
-    <header></header>
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll"></div>
-      </nav>
-      <div id="content-wrapper">
-        <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
-        <p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
-      </div>
-    </div>
-    <footer>
 
-      <div class="text-center">
-        <small>[Generated by <a href="https://markbind.org/">MarkBind 2.13.1</a>]</small></div>
-    </footer>
-  </div>
+        </div>
+    <footer>
+  
+  <div class="text-center">
+    <small>[Generated by <a href="https://markbind.org/">MarkBind 2.13.1</a>]</small></div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -49,5 +42,4 @@ <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#w
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>

From cbb14569c721e3a2ce49e49c93ca07eaaee3de3e Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Wed, 11 Mar 2020 00:11:14 +0800
Subject: [PATCH 03/11] Update user guide

---
 docs/userGuide/siteConfiguration.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/userGuide/siteConfiguration.md b/docs/userGuide/siteConfiguration.md
index bbda149c56..579fded23d 100644
--- a/docs/userGuide/siteConfiguration.md
+++ b/docs/userGuide/siteConfiguration.md
@@ -202,6 +202,11 @@ The example above uses tags as an example of configuring plugin settings, refer
 
 **Specifies that the website should use MarkBind's search functionality.** Default: `true`. See [User Guide: Making the Site Searchable](makingTheSiteSearchable.html) for more details.
 
+#### **`jsBeautify`**
+
+**Toggles-on [js-beautify](https://github.com/beautify-web/js-beautify) for html files generated by MarkBind.** By default, MarkBind turns off `js-beautify` to improve the performance of the MarkBind `build` process. 
+However, toggling-on `js-beautify` allows the user to edit the post-build HTML files in a friendly manner (through proper indentation of the code, for example). 
+
 #### **`timeZone`**
 
 **Time zone of the [time stamp](reusingContents.html#built-in-variable-timestamp).** Default: `"UTC"`. 

From ce5c5140e406f8e3ee63e6c5ba86eae5b856086c Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Fri, 20 Mar 2020 20:30:24 +0800
Subject: [PATCH 04/11] Update js-beautify; refactor and remove redundancies

---
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 src/Page.js                                   |  50 ++--
 src/Site.js                                   |   4 +-
 .../test_site/expected/bugs/index.html        |  43 ++--
 test/functional/test_site/expected/index.html | 140 ++++++-----
 .../needsrenderedplugin._include_.html        |   4 +-
 .../NonFunctionalRequirements._include_.html  |  15 +-
 .../requirements/UserStories._include_.html   |  28 +--
 .../expected/sub_site/index._include_.html    |   8 +-
 .../test_site/expected/sub_site/index.html    |  41 ++--
 .../sub_site/testReuse._include_.html         |  36 ++-
 .../test_site/expected/testAfterSetup.html    |  56 ++---
 .../expected/testAnchorGeneration.html        | 173 ++++++--------
 .../expected/testAntiFOUCStyles.html          |  95 ++++----
 .../test_site/expected/testCodeBlocks.html    |  41 ++--
 .../expected/testEmptyFrontmatter.html        |  50 ++--
 .../expected/testExternalScripts.html         |  60 ++---
 .../testImportVariables._include_.html        |   4 +-
 .../expected/testImportVariables.html         |  77 +++---
 .../expected/testIncludePluginsRendered.html  |  59 ++---
 .../test_site/expected/testLayouts.html       |  93 +++-----
 .../expected/testLayoutsOverride.html         |  93 +++-----
 .../testPanels/NestedPanel._include_.html     |   4 +-
 .../PanelNormalSource._include_.html          |   2 +-
 .../PanelSourceContainsSegment._include_.html |   5 +-
 .../testPanels/boilerTestPanel._include_.html |   2 +-
 .../testPanels/notInside._include_.html       |   2 +-
 .../testPanelsWithImportedVariables.html      |  62 +++--
 .../test_site/expected/testPlantUML.html      |  41 ++--
 .../test_site/expected/testThumbnails.html    | 218 +++++++----------
 .../expected/testTooltipSpacing.html          |  55 ++---
 .../test_site/expected/test_md_fragment.html  |  52 ++--
 .../expected/index.html                       | 223 ++++++++----------
 .../expected/index.html                       |  75 +++---
 .../expected/index.html                       |  66 +++---
 36 files changed, 855 insertions(+), 1130 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b70158f6a2..601a5a64fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5254,9 +5254,9 @@
       }
     },
     "js-beautify": {
-      "version": "1.10.1-rc2",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.1-rc2.tgz",
-      "integrity": "sha512-FjuOxdWIbpXKE6ydkg/uYmVgbv84tXpFhViCyATxAxtI8XNRDrgYD7YiJ6leaa02S19YVcRzHFpruxGi5thN7A==",
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.3.tgz",
+      "integrity": "sha512-wfk/IAWobz1TfApSdivH5PJ0miIHgDoYb1ugSqHcODPmaYu46rYe5FVuIEkhjg8IQiv6rDNPyhsqbsohI/C2vQ==",
       "requires": {
         "config-chain": "^1.1.12",
         "editorconfig": "^0.15.3",
diff --git a/package.json b/package.json
index 1461d649db..afc81daf22 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "highlight.js": "^9.14.2",
     "htmlparser2": "^3.10.1",
     "ignore": "^5.1.4",
-    "js-beautify": "^1.10.1-rc2",
+    "js-beautify": "^1.10.3",
     "live-server": "^1.2.1",
     "lodash": "^4.17.15",
     "markdown-it": "^8.4.2",
diff --git a/src/Page.js b/src/Page.js
index cb8ebe2af4..3b8cbc4979 100644
--- a/src/Page.js
+++ b/src/Page.js
@@ -62,7 +62,7 @@ class Page {
     this.content = pageConfig.content || '';
     this.faviconUrl = pageConfig.faviconUrl;
     this.frontmatterOverride = pageConfig.frontmatter || {};
-    this.jsBeautify = pageConfig.jsBeautify;
+    this.htmlBeautify = pageConfig.htmlBeautify;
     this.layout = pageConfig.layout;
     this.layoutsAssetPath = pageConfig.layoutsAssetPath;
     this.rootPath = pageConfig.rootPath;
@@ -658,23 +658,14 @@ class Page {
       const pageNavTitleHtml = this.generatePageNavTitleHtml();
       const pageNavHeadingHTML = this.generatePageNavHeadingHtml();
       this.pageSectionsHtml[`#${PAGE_NAV_ID}`]
-        = this.jsBeautify
-          ? htmlBeautify(`<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
-            + '<div class="border-left-grey nav-inner position-sticky slim-scroll">\n'
-            + `${pageNavTitleHtml}\n`
-            + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
-            + `${pageNavHeadingHTML}\n`
-            + '</nav>\n'
-            + '</div>\n'
-            + '</nav>\n', Page.htmlBeautifyOptions)
-          : `<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
-            + '<div class="border-left-grey nav-inner position-sticky slim-scroll">\n'
-            + `${pageNavTitleHtml}\n`
-            + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
-            + `${pageNavHeadingHTML}\n`
-            + '</nav>\n'
-            + '</div>\n'
-            + '</nav>\n';
+        = `<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
+          + '<div class="border-left-grey nav-inner position-sticky slim-scroll">\n'
+          + `${pageNavTitleHtml}\n`
+          + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
+          + `${pageNavHeadingHTML}\n`
+          + '</nav>\n'
+          + '</div>\n'
+          + '</nav>\n';
     }
   }
 
@@ -765,12 +756,9 @@ class Page {
     if (pageSection.length === 0) {
       return;
     }
-    this.pageSectionsHtml[section]
-      = this.jsBeautify
-        ? htmlBeautify($.html(section), Page.htmlBeautifyOptions).trim()
-        : $.html(section);
+    this.pageSectionsHtml[section] = $.html(section);
     pageSection.remove();
-    this.content = this.jsBeautify ? htmlBeautify($.html(), Page.htmlBeautifyOptions) : $.html();
+    this.content = $.html();
   }
 
   collectAllPageSections() {
@@ -815,7 +803,7 @@ class Page {
         .then(result => markbinder.processDynamicResources(this.sourcePath, result))
         .then(result => MarkBind.unwrapIncludeSrc(result))
         .then((result) => {
-          this.content = this.jsBeautify ? htmlBeautify(result, Page.htmlBeautifyOptions) : result;
+          this.content = result;
 
           const { relative } = urlUtils.getParentSiteAbsoluteAndRelativePaths(this.sourcePath, this.rootPath,
                                                                               this.baseUrlMap);
@@ -834,10 +822,9 @@ class Page {
           this.buildPageNav();
 
           const renderedTemplate = this.template.render(this.prepareTemplateData());
-          const outputTemplateHTML
-            = this.jsBeautify
-              ? htmlBeautify(renderedTemplate, Page.htmlBeautifyOptions)
-              : renderedTemplate;
+          const outputTemplateHTML = this.htmlBeautify
+            ? htmlBeautify(renderedTemplate, Page.htmlBeautifyOptions)
+            : renderedTemplate;
 
           return fs.outputFileAsync(this.resultPath, outputTemplateHTML);
         })
@@ -1086,10 +1073,9 @@ class Page {
             baseUrl,
             hostBaseUrl,
           });
-          const outputContentHTML
-            = this.jsBeautify
-              ? htmlBeautify(content, Page.htmlBeautifyOptions)
-              : content;
+          const outputContentHTML = this.htmlBeautify
+            ? htmlBeautify(content, Page.htmlBeautifyOptions)
+            : content;
           return fs.outputFileAsync(resultPath, outputContentHTML);
         })
         .then(() => {
diff --git a/src/Site.js b/src/Site.js
index 444ce5f5e1..8f91dc26f3 100644
--- a/src/Site.js
+++ b/src/Site.js
@@ -237,7 +237,7 @@ class Site {
       faviconUrl: config.faviconUrl,
       frontmatter: config.frontmatter,
       globalOverride: this.siteConfig.globalOverride || {},
-      jsBeautify: this.siteConfig.jsBeautify,
+      htmlBeautify: this.siteConfig.htmlBeautify,
       pageTemplate: this.pageTemplate,
       plugins: this.plugins || {},
       rootPath: this.rootPath,
@@ -944,7 +944,7 @@ class Site {
     injectMarkdownItSpecialTags(tagsToIgnore);
     Page.htmlBeautifyOptions = {
       indent_size: 2,
-      content_unformatted: ['pre', ...tagsToIgnore],
+      content_unformatted: ['pre', 'textarea', ...tagsToIgnore],
     };
   }
 
diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
index 0afdc4476b..3c8366869c 100644
--- a/test/functional/test_site/expected/bugs/index.html
+++ b/test/functional/test_site/expected/bugs/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -41,14 +40,10 @@
           <p>Repro:</p>
           <p>Steps to Reproduce</p>
         </div>
-      </div>
-    </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -60,23 +55,17 @@
   const enableSearch = true
 </script>
 <script src="../markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index cd757e3972..10f4eb2c8f 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <!-- Start of top level head file content insertion -->
   <script src="/test_site/headFiles/customScriptTop.js"></script>
@@ -250,24 +249,17 @@ <h1 id="heading-with-hidden-keyword">Heading with hidden keyword<a class="fa fa-
               Div with multiple tags
             </div>
             <p><strong>Div with hidden tag (Hidden)</strong></p>
-
-            <div>
-              <p><strong>Div with tag in included file</strong></p>
-              <div tags="tag-included-file">
-                Div with tag in included file
-              </div>
-            </div>
-            <p><strong>Div with tag matching general tag</strong></p>
-            <div tags="tag-exp-shown">
-              Div with tag matching general tag
-            </div>
-            <p><strong>Div with tag matching general tag and specific tag (Hidden)</strong></p>
-
-            <p><strong>Div with tag matching front matter tag overridden by matching site tag</strong></p>
-            <div tags="tag-site-override-shown">
-              Div with tag matching front matter tag overridden by matching site tag
-            </div>
-            <p><strong>Div with tag matching general front matter tag not overridden by matching specific site tag (Hidden)</strong></p>
+            
+<div>
+<p><strong>Div with tag in included file</strong></p>
+<div tags="tag-included-file">
+Div with tag in included file
+</div></div>
+<p><strong>Div with tag matching general tag</strong></p>
+<div tags="tag-exp-shown">
+Div with tag matching general tag
+</div>
+<p><strong>Div with tag matching general tag and specific tag (Hidden)</strong></p>
 
             <p><strong>Div with tag matching general front matter tag overridden by matching specific site tag</strong></p>
             <div tags="tag-site-override-shown">
@@ -495,9 +487,13 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
             <p><strong>Test missing variable with default</strong></p>
             <p>Missing Variable</p>
           </div>
-          <p><strong>Included variables should not leak into other files</strong></p>
-          <div>
-            <p>Should be blank:</p>
+        </popover>
+      
+        <popover id="pop:footnote3">
+          <div slot="content">
+            <p>Inlines notes are easier to write, since
+you don't have to pick an identifier and move down to type the
+note.</p>
           </div>
           <p><strong>Panel with shorthand heading syntax</strong></p>
           <panel>
@@ -633,13 +629,6 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
             </div>
           </popover>
 
-          <popover id="pop:footnote2">
-            <div slot="content">
-              <p>Here's one with multiple blocks.</p>
-              <p>Subsequent paragraphs are indented to show that they
-                belong to the previous footnote.</p>
-            </div>
-          </popover>
 
           <popover id="pop:footnote3">
             <div slot="content">
@@ -694,17 +683,58 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
               <a class="nav-link py-1" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed&#x200E;</a>
             </nav>
 
-          </nav>
-        </div>
-      </nav>
-    </div>
+        <nav id="page-nav" class="navbar navbar-light bg-transparent">
+<div class="border-left-grey nav-inner position-sticky slim-scroll">
+<a class="navbar-brand page-nav-title" href="#">Testing Page Navigation</a>
+<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">
+<a class="nav-link py-1" href="#heading-with-multiple-keywords">Heading with multiple keywords&#x200E;</a>
+<a class="nav-link py-1" href="#heading-with-keyword-in-panel">Heading with keyword in panel&#x200E;</a>
+<a class="nav-link py-1" href="#panel-with-heading">Panel with heading&#x200E;</a>
+<a class="nav-link py-1" href="#panel-without-heading-with-keyword">Panel without heading with keyword&#x200E;</a>
+<a class="nav-link py-1" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading&#x200E;</a>
+<a class="nav-link py-1" href="#panel-with-heading-with-keyword">Panel with heading with keyword&#x200E;</a>
+<a class="nav-link py-1" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading&#x200E;</a>
+<a class="nav-link py-1" href="#heading-with-included-keyword">Heading with included keyword&#x200E;</a>
+<a class="nav-link py-1" href="#included-heading">Included Heading&#x200E;</a>
+<a class="nav-link py-1" href="#heading-with-nested-keyword">Heading with nested keyword&#x200E;</a>
+<a class="nav-link py-1" href="#heading-with-hidden-keyword">Heading with hidden keyword&#x200E;</a>
+<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+<a class="nav-link py-1" href="#establishing-requirements">Establishing Requirements&#x200E;</a>
+<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+<a class="nav-link py-1" href="#brainstorming">Brainstorming&#x200E;</a>
+<a class="nav-link py-1" href="#user-surveys">User surveys&#x200E;</a>
+<a class="nav-link py-1" href="#focus-groups">Focus groups&#x200E;</a>
+</nav>
+</nav>
+<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+<a class="nav-link py-1" href="#feature-list">Feature list&#x200E;</a>
+<a class="nav-link py-1" href="#panel-without-src-header">Panel without src header&#x200E;</a>
+<a class="nav-link py-1" href="#panel-with-normal-src-header">Panel with normal src header&#x200E;</a>
+<a class="nav-link py-1" href="#panel-with-src-from-a-page-segment-header">Panel with src from a page segment header&#x200E;</a>
+<a class="nav-link py-1" href="#boilerplate-referencing">Boilerplate referencing&#x200E;</a>
+<a class="nav-link py-1" href="#referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate&#x200E;</a>
+<a class="nav-link py-1" href="#outer-nested-panel">Outer nested panel&#x200E;</a>
+<a class="nav-link py-1" href="#outer-nested-panel-without-src">Outer nested panel without src&#x200E;</a>
+<a class="nav-link py-1" href="#inner-panel-header-without-src">Inner panel header without src&#x200E;</a>
+<a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header&#x200E;</a>
+<a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header&#x200E;</a>
+<a class="nav-link py-1" href="#panel-inside-modal">Panel inside modal&#x200E;</a>
+<a class="nav-link py-1" href="#unexpanded-panel-header">Unexpanded panel header&#x200E;</a>
+</nav>
+<a class="nav-link py-1" href="#markbind-plugin-pre-render">Markbind Plugin Pre-render&#x200E;</a>
+<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+<a class="nav-link py-1" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed&#x200E;</a>
+</nav>
+
+</nav>
+</div>
+</nav>
+</div>
     <footer>
-      <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed"></a></h1>
-      <div class="text-center">
-        This is a dynamic height footer that supports markdown <span>😄</span>!
-      </div>
-    </footer>
-  </div>
+<h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed"></a></h1>
+  <div class="text-center">
+    This is a dynamic height footer that supports markdown <span>😄</span>!
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -716,23 +746,17 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/needsrenderedplugin._include_.html b/test/functional/test_site/expected/needsrenderedplugin._include_.html
index d0f1f344d4..6dd6e7459b 100644
--- a/test/functional/test_site/expected/needsrenderedplugin._include_.html
+++ b/test/functional/test_site/expected/needsrenderedplugin._include_.html
@@ -1,3 +1 @@
-<p>
-  <panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel>
-</p>
\ No newline at end of file
+<p><panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel></p>
diff --git a/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html b/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
index 5e31c012fe..4ec55287e6 100644
--- a/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
+++ b/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
@@ -1,11 +1,6 @@
 <seg id="def-nfr" title="Non Functional Requirements">
-  <div>
-    <p>In contrast to <strong>Functional Requirements</strong> which specify what the system should do,
-      <strong>Non-Functional Requirements</strong> specify the constraints under which system is developed and operated.</p>
-  </div>
-  <p>
-    <seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
-      requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
-      of understanding what a software product should do.</seg>
-  </p>
-</seg>
\ No newline at end of file
+<div><p>In contrast to <strong>Functional Requirements</strong> which specify what the system should do,
+<strong>Non-Functional Requirements</strong> specify the constraints under which system is developed and operated.</p></div>
+<p><seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
+requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+of understanding what a software product should do.</seg></p></seg>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/requirements/UserStories._include_.html b/test/functional/test_site/expected/requirements/UserStories._include_.html
index 09327439ce..27899c7044 100644
--- a/test/functional/test_site/expected/requirements/UserStories._include_.html
+++ b/test/functional/test_site/expected/requirements/UserStories._include_.html
@@ -1,21 +1,17 @@
 <p>User stories are brief (typically, 1-3 sentences) descriptions of what the system can do for the users,
-  written in the customers’ language. Often, user stories are written by the customers themselves.</p>
+written in the customers’ language. Often, user stories are written by the customers themselves.</p>
 <p>A commonly used format for writing user stories is:<br>
-  <strong><code>As a</code></strong> <code>&lt;use type/role&gt;</code> <strong><code>I can</code></strong> <code>&lt;function&gt;</code> <strong><code>so that</code></strong> <code>&lt;benefit&gt;</code></p>
+<strong><code>As a</code></strong> <code>&lt;use type/role&gt;</code> <strong><code>I can</code></strong> <code>&lt;function&gt;</code> <strong><code>so that</code></strong> <code>&lt;benefit&gt;</code></p>
 <p>Here are some examples of user stories for the IVLE system:</p>
-<pre><code class="hljs bat"><span>* As a student, I can download files uploaded by lecturers, so that I can get my own <span class="hljs-built_in">copy</span> of the files.</span><span>* As a lecturer, I can create discussion forums, so that students can discuss things online.</span><span>* As a tutor, I can <span class="hljs-built_in">print</span> attendance sheets, so that I can take attendance during the class.</span></code></pre>
-<p>The <code>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets.
-  User stories are mainly used for early estimation and scheduling purposes.</p>
+<pre><code class="hljs bat"><span>* As a student, I can download files uploaded by lecturers, so that I can get my own <span class="hljs-built_in">copy</span> of the files.</span><span>* As a lecturer, I can create discussion forums, so that students can discuss things online.</span><span>* As a tutor, I can <span class="hljs-built_in">print</span> attendance sheets, so that I can take attendance during the class.</span></code></pre><p>The <code>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets.
+User stories are mainly used for early estimation and scheduling purposes.</p>
 <p>According to <ref xp-website="">this<ref></ref>, the biggest difference between user stories and traditional requirements
-    specifications is in the level of detail. User stories should only provide enough detail to make a reasonably low risk
-    estimate of how long the story will take to implement. When the time comes to implement the story,
-    the developers will meet with the customer face-to-face to work out a more detailed description of the requirements.</ref>
-</p>
+specifications is in the level of detail. User stories should only provide enough detail to make a reasonably low risk
+estimate of how long the story will take to implement. When the time comes to implement the story,
+the developers will meet with the customer face-to-face  to work out a more detailed description of the requirements.</ref></p>
 <p>User stories are often written on index cards or sticky notes, and arranged on walls or tables to facilitate
-  planning and discussion.</p>
-<p>
-  <seg xp-website="" sup=""><a href="http://www.extremeprogramming.org/rules/userstories.html">http://www.extremeprogramming.org/rules/userstories.html</a>
-    This is the main website for eXtreme Programming (XP), an approach to software development currently popular
-    among practitioners. User stories are commonly used among XP practitioners to capture requirements.
-  </seg>
-</p>
\ No newline at end of file
+planning and discussion.</p>
+<p><seg xp-website="" sup=""><a href="http://www.extremeprogramming.org/rules/userstories.html">http://www.extremeprogramming.org/rules/userstories.html</a>
+This is the main website for eXtreme Programming (XP), an approach to software development currently popular
+among practitioners. User stories are commonly used among XP practitioners to capture requirements.
+</seg></p>
diff --git a/test/functional/test_site/expected/sub_site/index._include_.html b/test/functional/test_site/expected/sub_site/index._include_.html
index d8882f7f54..53ebaf3762 100644
--- a/test/functional/test_site/expected/sub_site/index._include_.html
+++ b/test/functional/test_site/expected/sub_site/index._include_.html
@@ -1,9 +1,9 @@
 <p>This is a page from another Markbind site.</p>
 <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
 <p>It is a list of features (or functionalities) grouped according to some criteria such as priority
-  (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
-  (e.g. order-related, invoice-related, etc.).
-  Here is a sample feature list from Minesweeper (only a brief description has been provided to save space).</p>
+(e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
+(e.g. order-related, invoice-related, etc.).
+Here is a sample feature list from Minesweeper (only a brief description has been provided to save space).</p>
 <ol>
   <li>Basic play – Single player play.</li>
   <li>Difficulty levels – Additional Medium and Advanced levels.</li>
@@ -11,4 +11,4 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
   <li>Timer – Additional fixed time restriction on the player.</li>
 </ol>
 <div id="image">
-  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
\ No newline at end of file
+  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
diff --git a/test/functional/test_site/expected/sub_site/index.html b/test/functional/test_site/expected/sub_site/index.html
index 4176d0d3f1..77246ae10f 100644
--- a/test/functional/test_site/expected/sub_site/index.html
+++ b/test/functional/test_site/expected/sub_site/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -42,11 +41,9 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
       </div>
     </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -58,23 +55,17 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
   const enableSearch = true
 </script>
 <script src="../markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/sub_site/testReuse._include_.html b/test/functional/test_site/expected/sub_site/testReuse._include_.html
index 263cd85a41..9f1edaa77d 100644
--- a/test/functional/test_site/expected/sub_site/testReuse._include_.html
+++ b/test/functional/test_site/expected/sub_site/testReuse._include_.html
@@ -1,28 +1,26 @@
 <p>This is a page from another Markbind site.
-  The purpose of this page is to ensure that reuse works as expected.
-  All the following images should display correctly.</p>
+The purpose of this page is to ensure that reuse works as expected.
+All the following images should display correctly.</p>
 <p>Some variables:</p>
 <div></div>
 <p>IMG tags:
-  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-  <img src="https://dummyimage.com/600x400/000/fff"></p>
+<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+<img src="https://dummyimage.com/600x400/000/fff"></p>
 <p>PIC tags:
-  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-  <pic src="https://dummyimage.com/600x400/000/fff"></pic>
-</p>
+<pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+<pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+<pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+<pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+<pic src="https://dummyimage.com/600x400/000/fff"></pic></p>
 <p>Anchor:
-  <a href="https://dummyimage.com/600x400/000/fff">External Image</a>
-  <a href="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">Link to picture</a>
-  <a id="namedAnchor">Named Anchor</a>
-  <a>Anchor with no attributes</a></p>
+<a href="https://dummyimage.com/600x400/000/fff">External Image</a>
+<a href="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">Link to picture</a>
+<a id="namedAnchor">Named Anchor</a>
+<a>Anchor with no attributes</a></p>
 <p>Within DIV tag:</p>
 <div id="imageTest">
   <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-</div>
\ No newline at end of file
+  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic></div>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testAfterSetup.html b/test/functional/test_site/expected/testAfterSetup.html
index dcac1f8164..950e6d742b 100644
--- a/test/functional/test_site/expected/testAfterSetup.html
+++ b/test/functional/test_site/expected/testAfterSetup.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="head-top">
   <meta charset="utf-8">
@@ -24,19 +23,18 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <box id="alert-box">
-          This Vue element should trigger a alert dialog when clicked on.
-        </box>
-        <p><span id="mouseover-span">This span should toggle the colour of the above box when hovered upon.</span></p>
-      </div>
-    </div>
+        <div id="content-wrapper">
+<box id="alert-box">
+    This Vue element should trigger a alert dialog when clicked on.
+</box>
+<p><span id="mouseover-span">This span should toggle the colour of the above box when hovered upon.</span></p></div>
+
+
+        </div>
     <footer>
-      <div class="text-center">
-        testAfterSetup footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    testAfterSetup footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -48,23 +46,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/testAfterSetup/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testAnchorGeneration.html b/test/functional/test_site/expected/testAnchorGeneration.html
index cc00a30672..98f99da63c 100644
--- a/test/functional/test_site/expected/testAnchorGeneration.html
+++ b/test/functional/test_site/expected/testAnchorGeneration.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,87 +23,69 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <h1 id="root-file">Root file<a class="fa fa-anchor" href="#root-file"></a></h1>
-        <h1 id="should-have-anchor">should have anchor<a class="fa fa-anchor" href="#should-have-anchor"></a></h1>
-        <h2 id="should-have-anchor-2">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-2"></a></h2>
-        <h3 id="should-have-anchor-3">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-3"></a></h3>
-        <h4 id="should-have-anchor-4">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4"></a></h4>
-        <h5 id="should-have-anchor-5">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5"></a></h5>
-        <h6 id="should-have-anchor-6">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6"></a></h6>
-        <panel id="should-have-anchor-7"><template slot="_header">
-            <h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h4>
-          </template>
-          Lorem ipsum
-        </panel>
-        <panel><template slot="_header">
-            <p>Collapsed</p>
-          </template>
-          <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
-          <h1 id="should-not-have-anchor">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor"></a></h1>
-          <h2 id="should-not-have-anchor-2">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-2"></a></h2>
-          <h3 id="should-not-have-anchor-3">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-3"></a></h3>
-          <h4 id="should-not-have-anchor-4">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-4"></a></h4>
-          <h5 id="should-not-have-anchor-5">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-5"></a></h5>
-          <h6 id="should-not-have-anchor-6">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-6"></a></h6>
-        </panel>
-        <panel expanded=""><template slot="_header">
-            <p>Expanded</p>
-          </template>
-          <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
-          <h1 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8"></a></h1>
-          <h2 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9"></a></h2>
-          <h3 id="should-have-anchor-10">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-10"></a></h3>
-          <h4 id="should-have-anchor-11">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-11"></a></h4>
-          <h5 id="should-have-anchor-12">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-12"></a></h5>
-          <h6 id="should-have-anchor-13">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-13"></a></h6>
-        </panel>
-        <hr>
-        <div>
-          <h1 id="included-file">Included File<a class="fa fa-anchor" href="#included-file"></a></h1>
-          <br>
-          <h1 id="should-have-anchor-14">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-14"></a></h1>
-          <h2 id="should-have-anchor-15">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-15"></a></h2>
-          <h3 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-16"></a></h3>
-          <h4 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17"></a></h4>
-          <h5 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18"></a></h5>
-          <h6 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19"></a></h6>
-          <panel id="should-have-anchor-20"><template slot="_header">
-              <h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h4>
-            </template>
-            Lorem ipsum
-          </panel>
-          <panel><template slot="_header">
-              <p>Collapsed</p>
-            </template>
-            <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
-            <h1 id="should-not-have-anchor-7">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-7"></a></h1>
-            <h2 id="should-not-have-anchor-8">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-8"></a></h2>
-            <h3 id="should-not-have-anchor-9">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-9"></a></h3>
-            <h4 id="should-not-have-anchor-10">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-10"></a></h4>
-            <h5 id="should-not-have-anchor-11">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-11"></a></h5>
-            <h6 id="should-not-have-anchor-12">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-12"></a></h6>
-          </panel>
-          <panel expanded=""><template slot="_header">
-              <p>Expanded</p>
-            </template>
-            <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
-            <h1 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21"></a></h1>
-            <h2 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22"></a></h2>
-            <h3 id="should-have-anchor-23">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-23"></a></h3>
-            <h4 id="should-have-anchor-24">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-24"></a></h4>
-            <h5 id="should-have-anchor-25">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-25"></a></h5>
-            <h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-26"></a></h6>
-          </panel>
+        <div id="content-wrapper">
+<h1 id="root-file">Root file<a class="fa fa-anchor" href="#root-file"></a></h1>
+<h1 id="should-have-anchor">should have anchor<a class="fa fa-anchor" href="#should-have-anchor"></a></h1>
+<h2 id="should-have-anchor-2">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-2"></a></h2>
+<h3 id="should-have-anchor-3">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-3"></a></h3>
+<h4 id="should-have-anchor-4">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4"></a></h4>
+<h5 id="should-have-anchor-5">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5"></a></h5>
+<h6 id="should-have-anchor-6">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6"></a></h6>
+<panel id="should-have-anchor-7"><template slot="_header"><h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h4></template>
+Lorem ipsum
+</panel>
+<panel><template slot="_header"><p>Collapsed</p></template>
+<p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
+<h1 id="should-not-have-anchor">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor"></a></h1>
+<h2 id="should-not-have-anchor-2">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-2"></a></h2>
+<h3 id="should-not-have-anchor-3">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-3"></a></h3>
+<h4 id="should-not-have-anchor-4">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-4"></a></h4>
+<h5 id="should-not-have-anchor-5">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-5"></a></h5>
+<h6 id="should-not-have-anchor-6">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-6"></a></h6></panel>
+<panel expanded=""><template slot="_header"><p>Expanded</p></template>
+<p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
+<h1 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8"></a></h1>
+<h2 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9"></a></h2>
+<h3 id="should-have-anchor-10">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-10"></a></h3>
+<h4 id="should-have-anchor-11">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-11"></a></h4>
+<h5 id="should-have-anchor-12">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-12"></a></h5>
+<h6 id="should-have-anchor-13">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-13"></a></h6></panel>
+<hr>
+<div>
+<h1 id="included-file">Included File<a class="fa fa-anchor" href="#included-file"></a></h1>
+<br>
+<h1 id="should-have-anchor-14">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-14"></a></h1>
+<h2 id="should-have-anchor-15">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-15"></a></h2>
+<h3 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-16"></a></h3>
+<h4 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17"></a></h4>
+<h5 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18"></a></h5>
+<h6 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19"></a></h6>
+<panel id="should-have-anchor-20"><template slot="_header"><h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h4></template>
+Lorem ipsum
+</panel>
+<panel><template slot="_header"><p>Collapsed</p></template>
+<p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
+<h1 id="should-not-have-anchor-7">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-7"></a></h1>
+<h2 id="should-not-have-anchor-8">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-8"></a></h2>
+<h3 id="should-not-have-anchor-9">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-9"></a></h3>
+<h4 id="should-not-have-anchor-10">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-10"></a></h4>
+<h5 id="should-not-have-anchor-11">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-11"></a></h5>
+<h6 id="should-not-have-anchor-12">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-12"></a></h6></panel>
+<panel expanded=""><template slot="_header"><p>Expanded</p></template>
+<p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
+<h1 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21"></a></h1>
+<h2 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22"></a></h2>
+<h3 id="should-have-anchor-23">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-23"></a></h3>
+<h4 id="should-have-anchor-24">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-24"></a></h4>
+<h5 id="should-have-anchor-25">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-25"></a></h5>
+<h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-26"></a></h6></panel></div></div>
+
+
         </div>
-      </div>
-    </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -116,23 +97,17 @@ <h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testAntiFOUCStyles.html b/test/functional/test_site/expected/testAntiFOUCStyles.html
index d1b24555d0..ee180e6499 100644
--- a/test/functional/test_site/expected/testAntiFOUCStyles.html
+++ b/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,46 +23,38 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
+        <div id="content-wrapper">
+
+<navbar type="dark" class="temp-navbar">
+  <li><a href="/" class="nav-link">One</a></li>
+  <li><a href="/" class="nav-link">Two</a></li>
+  <div class="nav-link temp-dropdown-placeholder">Dropdown</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Dropdown</template>
+    <li><a class="dropdown-item" href="/">Dropdown One</a></li>
+    <li><a class="dropdown-item" href="/">Dropdown Two</a></li></dropdown></navbar>
+
+<p><strong>Test dropdown in body with text and class attributes</strong></p>
+<div class="test-class temp-dropdown-placeholder">Test One</div><dropdown class="test-class temp-dropdown"><template slot="_header">Test One</template>
+  <li><a class="dropdown-item" href="/">Dropdown One</a></li>
+  <li><a class="dropdown-item" href="/">Dropdown Two</a></li></dropdown>
 
-        <navbar type="dark" class="temp-navbar">
-          <li><a href="/" class="nav-link">One</a></li>
-          <li><a href="/" class="nav-link">Two</a></li>
-          <div class="nav-link temp-dropdown-placeholder">Dropdown</div>
-          <dropdown class="nav-link temp-dropdown"><template slot="_header">Dropdown</template>
-            <li><a class="dropdown-item" href="/">Dropdown One</a></li>
-            <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
-          </dropdown>
-        </navbar>
+<p><strong>Test dropdown in body without text and class attributes</strong></p>
+<div class="temp-dropdown-placeholder"></div><dropdown class="temp-dropdown">
+  <button slot="button" type="button" class="btn dropdown-toggle">
+    Test Two
+    <span class="caret"></span></button>
+  <li><a class="dropdown-item" href="/">Dropdown One</a></li>
+  <li><a class="dropdown-item" href="/">Dropdown Two</a></li></dropdown>
 
-        <p><strong>Test dropdown in body with text and class attributes</strong></p>
-        <div class="test-class temp-dropdown-placeholder">Test One</div>
-        <dropdown class="test-class temp-dropdown"><template slot="_header">Test One</template>
-          <li><a class="dropdown-item" href="/">Dropdown One</a></li>
-          <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
-        </dropdown>
+<p><strong>Filler text</strong></p>
+<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
+<p>Some text</p></div>
 
-        <p><strong>Test dropdown in body without text and class attributes</strong></p>
-        <div class="temp-dropdown-placeholder"></div>
-        <dropdown class="temp-dropdown">
-          <button slot="button" type="button" class="btn dropdown-toggle">
-            Test Two
-            <span class="caret"></span></button>
-          <li><a class="dropdown-item" href="/">Dropdown One</a></li>
-          <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
-        </dropdown>
 
-        <p><strong>Filler text</strong></p>
-        <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
-        <p>Some text</p>
-      </div>
-    </div>
+        </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -75,23 +66,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testCodeBlocks.html b/test/functional/test_site/expected/testCodeBlocks.html
index d6ca3bb6e6..cd7d3059cd 100644
--- a/test/functional/test_site/expected/testCodeBlocks.html
+++ b/test/functional/test_site/expected/testCodeBlocks.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -55,11 +54,9 @@
       </div>
     </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -71,23 +68,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testEmptyFrontmatter.html b/test/functional/test_site/expected/testEmptyFrontmatter.html
index 38e25a3f32..79e0b208b6 100644
--- a/test/functional/test_site/expected/testEmptyFrontmatter.html
+++ b/test/functional/test_site/expected/testEmptyFrontmatter.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,16 +23,15 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <p>A page with an empty frontmatter should still build.</p>
-      </div>
-    </div>
+        <div id="content-wrapper">
+<p>A page with an empty frontmatter should still build.</p></div>
+
+
+        </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -45,23 +43,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testExternalScripts.html b/test/functional/test_site/expected/testExternalScripts.html
index 7423ca8bb0..5204bf4b6d 100644
--- a/test/functional/test_site/expected/testExternalScripts.html
+++ b/test/functional/test_site/expected/testExternalScripts.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,20 +23,19 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <p>The external script <a href="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">MathJax 2.75</a> should be included, and the following MathJax content should render:</p>
-        <box>
-          When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
-          $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
-        </box>
-      </div>
-    </div>
+        <div id="content-wrapper">
+<p>The external script <a href="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">MathJax 2.75</a> should be included, and the following MathJax content should render:</p>
+<box>
+When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
+$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
+</box></div>
+
+
+        </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -49,24 +47,18 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testImportVariables._include_.html b/test/functional/test_site/expected/testImportVariables._include_.html
index c393869205..a3eb4356e3 100644
--- a/test/functional/test_site/expected/testImportVariables._include_.html
+++ b/test/functional/test_site/expected/testImportVariables._include_.html
@@ -2,7 +2,7 @@
 <p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
 <div></div>
 <p>Test import variables from src specified via variable:
-  This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
+This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
 <p>Test import variables that itself imports other variables:</p>
 <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
 <p>There should be something red below:</p>
@@ -11,4 +11,4 @@ <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a cl
 <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
 <p>There should be something blue below:</p>
 <div style="color:blue">This is a deeply imported variable</div>
-Something should have appeared above in blue.
\ No newline at end of file
+Something should have appeared above in blue.
diff --git a/test/functional/test_site/expected/testImportVariables.html b/test/functional/test_site/expected/testImportVariables.html
index 31adc9f177..3d95998a5c 100644
--- a/test/functional/test_site/expected/testImportVariables.html
+++ b/test/functional/test_site/expected/testImportVariables.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,29 +23,29 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <div></div>
-        <p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
-        <div></div>
-        <p>Test import variables from src specified via variable:
-          This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
-        <p>Test import variables that itself imports other variables:</p>
-        <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
-        <p>There should be something red below:</p>
-        <div style="color:red">This is a page variable from <a href="http://variablestoimport.md">variablestoimport.md</a></div>
-        Something should have appeared above in red.
-        <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
-        <p>There should be something blue below:</p>
-        <div style="color:blue">This is a deeply imported variable</div>
-        Something should have appeared above in blue.
-      </div>
-    </div>
+        <div id="content-wrapper">
+<div></div>
+<p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
+<div></div>
+<p>Test import variables from src specified via variable:
+This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
+<p>Test import variables that itself imports other variables:</p>
+<h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
+<p>There should be something red below:</p>
+<div style="color:red">This is a page variable from <a href="http://variablestoimport.md">variablestoimport.md</a></div>
+Something should have appeared above in red.
+<h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
+<p>There should be something blue below:</p>
+<div style="color:blue">This is a deeply imported variable</div>
+Something should have appeared above in blue.
+</div>
+
+
+        </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -58,23 +57,17 @@ <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testIncludePluginsRendered.html b/test/functional/test_site/expected/testIncludePluginsRendered.html
index 3874d6679a..bb916fb9b1 100644
--- a/test/functional/test_site/expected/testIncludePluginsRendered.html
+++ b/test/functional/test_site/expected/testIncludePluginsRendered.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,22 +23,18 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <p>The contents of these two panels should be exactly the same.</p>
-        <p>
-          <panel src="/test_site/needsrenderedplugin._include_.html"></panel>
-        </p>
-        <panel>
-          <panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel>
-        </panel>
-      </div>
-    </div>
+        <div id="content-wrapper">
+<p>The contents of these two panels should be exactly the same.</p>
+<p><panel src="/test_site/needsrenderedplugin._include_.html"></panel></p>
+<panel>
+<panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel></panel></div>
+
+
+        </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -51,23 +46,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testLayouts.html b/test/functional/test_site/expected/testLayouts.html
index 5cc0e193f5..f3a3a6dbc0 100644
--- a/test/functional/test_site/expected/testLayouts.html
+++ b/test/functional/test_site/expected/testLayouts.html
@@ -1,47 +1,34 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Hello World</title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="STYLESHEET_LINK"><link rel="stylesheet" href="markbind/layouts/testLayout/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"><script src="/test_site/headFiles/overwriteLayoutScript.js"></script><link rel="icon" href="/test_site/favicon.png"></head>
+<body >
+<div id="app">
+    <div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2">[Layout Nav]</li></ul></div></nav>
+<div id="content-wrapper">
+<p><strong>Uses a front matter layout</strong></p></div>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello World</title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
-  <link rel="stylesheet" href="markbind/layouts/testLayout/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-  <script src="/test_site/headFiles/overwriteLayoutScript.js"></script>
-  <link rel="icon" href="/test_site/favicon.png">
-</head>
 
-<body>
-  <div id="app">
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2">[Layout Nav]</li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <p><strong>Uses a front matter layout</strong></p>
-      </div>
-    </div>
     <footer>
-      <div class="text-center">
-        Layout footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Layout footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -53,23 +40,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/testLayout/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testLayoutsOverride.html b/test/functional/test_site/expected/testLayoutsOverride.html
index dbe6d0addc..f829f81a28 100644
--- a/test/functional/test_site/expected/testLayoutsOverride.html
+++ b/test/functional/test_site/expected/testLayoutsOverride.html
@@ -1,47 +1,34 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Hello World</title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="STYLESHEET_LINK"><link rel="stylesheet" href="markbind/layouts/testLayout/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"><script src="/test_site/headFiles/overwriteLayoutScript.js"></script><link rel="icon" href="/test_site/favicon.png"></head>
+<body >
+<div id="app">
+    <div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2">[Layout Nav]</li></ul></div></nav>
+<div id="content-wrapper">
+<p><strong>Uses a site.json layout, overriding front matter</strong></p></div>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello World</title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
-  <link rel="stylesheet" href="markbind/layouts/testLayout/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-  <script src="/test_site/headFiles/overwriteLayoutScript.js"></script>
-  <link rel="icon" href="/test_site/favicon.png">
-</head>
 
-<body>
-  <div id="app">
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2">[Layout Nav]</li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <p><strong>Uses a site.json layout, overriding front matter</strong></p>
-      </div>
-    </div>
     <footer>
-      <div class="text-center">
-        Layout footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Layout footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -53,23 +40,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/testLayout/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
index 429ef1de2a..abd9590c4c 100644
--- a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
+++ b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
@@ -1,3 +1 @@
-<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header">
-    <h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel"></a></h2>
-  </template></panel>
\ No newline at end of file
+<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header"><h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel"></a></h2></template></panel>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html b/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
index e80b7a53c8..9fe2c260d9 100644
--- a/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
+++ b/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
@@ -1 +1 @@
-<h3 id="panel-normal-source-content-headings">Panel normal source content headings<a class="fa fa-anchor" href="#panel-normal-source-content-headings"></a></h3>
\ No newline at end of file
+<h3 id="panel-normal-source-content-headings">Panel normal source content headings<a class="fa fa-anchor" href="#panel-normal-source-content-headings"></a></h3>
diff --git a/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html b/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
index 3f76bbdf60..7c21ac9246 100644
--- a/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
+++ b/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
@@ -1,4 +1,3 @@
 <div id="segment">
-  <h3 id="panel-source-segment-content-headings">Panel source segment content headings<a class="fa fa-anchor" href="#panel-source-segment-content-headings"></a></h3>
-</div>
-<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data<a class="fa fa-anchor" href="#this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data"></a></h3>
\ No newline at end of file
+<h3 id="panel-source-segment-content-headings">Panel source segment content headings<a class="fa fa-anchor" href="#panel-source-segment-content-headings"></a></h3></div>
+<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data<a class="fa fa-anchor" href="#this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data"></a></h3>
diff --git a/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html b/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
index cd49919927..a7dd99ef39 100644
--- a/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
+++ b/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
@@ -1 +1 @@
-<h3 id="boilerplate-test-for-panel-heading">boilerplate test for panel heading<a class="fa fa-anchor" href="#boilerplate-test-for-panel-heading"></a></h3>
\ No newline at end of file
+<h3 id="boilerplate-test-for-panel-heading">boilerplate test for panel heading<a class="fa fa-anchor" href="#boilerplate-test-for-panel-heading"></a></h3>
diff --git a/test/functional/test_site/expected/testPanels/notInside._include_.html b/test/functional/test_site/expected/testPanels/notInside._include_.html
index bacd089bd9..2eaf7663a6 100644
--- a/test/functional/test_site/expected/testPanels/notInside._include_.html
+++ b/test/functional/test_site/expected/testPanels/notInside._include_.html
@@ -1 +1 @@
-<h3 id="heading-in-panel-boilerplate">heading in panel boilerplate<a class="fa fa-anchor" href="#heading-in-panel-boilerplate"></a></h3>
\ No newline at end of file
+<h3 id="heading-in-panel-boilerplate">heading in panel boilerplate<a class="fa fa-anchor" href="#heading-in-panel-boilerplate"></a></h3>
diff --git a/test/functional/test_site/expected/testPanelsWithImportedVariables.html b/test/functional/test_site/expected/testPanelsWithImportedVariables.html
index 2abceeb82c..8b6cbdc627 100644
--- a/test/functional/test_site/expected/testPanelsWithImportedVariables.html
+++ b/test/functional/test_site/expected/testPanelsWithImportedVariables.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,22 +23,21 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <p>Refer to this comment: <a href="https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640">https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640</a></p>
-        <div></div>
-        Title
-        <p><strong>Below panel is working</strong>
-          <panel src="/test_site/testImportVariables._include_.html"></panel>
-        </p>
-        <p><strong>Below should be a panel, but is now an error. Uncomment it to see the error.</strong></p>
-      </div>
-    </div>
+        <div id="content-wrapper">
+<p>Refer to this comment: <a href="https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640">https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640</a></p>
+<div></div>
+Title
+<p><strong>Below panel is working</strong>
+<panel src="/test_site/testImportVariables._include_.html"></panel></p>
+<p><strong>Below should be a panel, but is now an error. Uncomment it to see the error.</strong></p>
+</div>
+
+
+        </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -51,23 +49,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testPlantUML.html b/test/functional/test_site/expected/testPlantUML.html
index ab3ae27fe3..ab2f5a59c7 100644
--- a/test/functional/test_site/expected/testPlantUML.html
+++ b/test/functional/test_site/expected/testPlantUML.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -56,11 +55,9 @@
       </div>
     </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -72,23 +69,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testThumbnails.html b/test/functional/test_site/expected/testThumbnails.html
index ea7ec9eb53..80a3cf34ee 100644
--- a/test/functional/test_site/expected/testThumbnails.html
+++ b/test/functional/test_site/expected/testThumbnails.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,118 +23,83 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <p><strong>Thumbnail test</strong></p>
-        <p><strong>Images</strong></p>
-        <p><strong>Square thumb, size = 100 (default)</strong>
-          <thumbnail src="http://placehold.it/800x600"></thumbnail>
-        </p>
-        <p><strong>Square thumb with alt=&quot;Test&quot;</strong>
-          <thumbnail alt="Test" src="/test_site/asdf"></thumbnail>
-        </p>
-        <p><strong>Square thumb, size = 200</strong>
-          <thumbnail src="http://placehold.it/800x600" size="200"></thumbnail>
-        </p>
-        <p><strong>Circle thumbs, size = 100</strong>
-          <thumbnail src="http://placehold.it/800x600" circle=""></thumbnail>
-          <thumbnail src="http://placehold.it/100x300" circle=""></thumbnail>
-        </p>
-        <p><strong>An actual image</strong>
-          <thumbnail circle="" size="300" src="/test_site/images/deer.jpg"></thumbnail>
-          <pic src="/test_site/images/deer.jpg" height="300"></pic>
-        </p>
-        <hr>
-        <p><strong>Broken link, still takes up the space it's supposed to</strong></p>
-        <p>
-          <thumbnail src="/broken_link" border=""></thumbnail>
-          <thumbnail src="http://placehold.it/300x100"></thumbnail>
-        </p>
-        <hr>
-        <p><strong>Borders</strong></p>
-        <div class="table-responsive">
-          <table class="markbind-table table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Thumbnail</th>
-                <th>Attribute</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <thumbnail src="http://placehold.it/300x100"></thumbnail>
-                </td>
-                <td></td>
-                <td>no border</td>
-              </tr>
-              <tr>
-                <td>
-                  <thumbnail border="3px solid red" src="http://placehold.it/300x100"></thumbnail>
-                </td>
-                <td><code>border='3px solid red'</code></td>
-                <td>3 pixel thick solid red line</td>
-              </tr>
-              <tr>
-                <td>
-                  <thumbnail border="4px dotted blue" src="http://placehold.it/300x100"></thumbnail>
-                </td>
-                <td><code>4px dotted blue</code></td>
-                <td>4 pixel thick dotted blue line</td>
-              </tr>
-            </tbody>
-          </table>
+        <div id="content-wrapper">
+<p><strong>Thumbnail test</strong></p>
+<p><strong>Images</strong></p>
+<p><strong>Square thumb, size = 100 (default)</strong>
+<thumbnail src="http://placehold.it/800x600"></thumbnail></p>
+<p><strong>Square thumb with alt=&quot;Test&quot;</strong>
+<thumbnail alt="Test" src="/test_site/asdf"></thumbnail></p>
+<p><strong>Square thumb, size = 200</strong>
+<thumbnail src="http://placehold.it/800x600" size="200"></thumbnail></p>
+<p><strong>Circle thumbs, size = 100</strong>
+<thumbnail src="http://placehold.it/800x600" circle=""></thumbnail>
+<thumbnail src="http://placehold.it/100x300" circle=""></thumbnail></p>
+<p><strong>An actual image</strong>
+<thumbnail circle="" size="300" src="/test_site/images/deer.jpg"></thumbnail>
+<pic src="/test_site/images/deer.jpg" height="300"></pic></p>
+<hr>
+<p><strong>Broken link, still takes up the space it's supposed to</strong></p>
+<p><thumbnail src="/broken_link" border=""></thumbnail>
+<thumbnail src="http://placehold.it/300x100"></thumbnail></p>
+<hr>
+<p><strong>Borders</strong></p>
+<div class="table-responsive"><table class="markbind-table table table-bordered table-striped"><thead>
+<tr>
+<th>Thumbnail</th>
+<th>Attribute</th>
+<th>Description</th></tr></thead>
+<tbody>
+<tr>
+<td><thumbnail src="http://placehold.it/300x100"></thumbnail></td>
+<td></td>
+<td>no border</td></tr>
+<tr>
+<td><thumbnail border="3px solid red" src="http://placehold.it/300x100"></thumbnail></td>
+<td><code>border='3px solid red'</code></td>
+<td>3 pixel thick solid red line</td></tr>
+<tr>
+<td><thumbnail border="4px dotted blue" src="http://placehold.it/300x100"></thumbnail></td>
+<td><code>4px dotted blue</code></td>
+<td>4 pixel thick dotted blue line</td></tr></tbody></table></div><hr>
+<p><strong>Background</strong></p>
+<p><strong>Valid CSS properties</strong>
+<thumbnail background="lightblue" circle=""></thumbnail>
+<thumbnail background="#aaf" circle=""></thumbnail>
+<thumbnail background="rgba(120, 120, 200, 0.4)" circle=""></thumbnail></p>
+<p><strong>Invalid CSS properties</strong>
+<thumbnail background="asdf" border="1px solid black" circle=""></thumbnail></p>
+<p><strong>Empty</strong>
+<thumbnail background="" border="1px solid black" circle=""></thumbnail></p>
+<hr>
+<p><strong>Text/Emojis/Icons</strong></p>
+<p><strong>Text</strong>
+<thumbnail text="test" border="1px solid black" circle="">test</thumbnail></p>
+<p><strong>Markdown</strong>
+<thumbnail text="_test_" border="1px solid black" circle=""><em>test</em></thumbnail>
+<thumbnail text="**test**" border="1px solid black" circle=""><strong>test</strong></thumbnail></p>
+<p><strong>Emojis</strong>
+<thumbnail text=":x:" border="1px solid black" circle="">❌</thumbnail>
+<thumbnail text=":eggplant:" border="1px solid black" circle="">🍆</thumbnail></p>
+<p><strong>Icons</strong>
+<thumbnail text=":fab-github:" border="1px solid black" circle=""><span aria-hidden="true" class="fab fa-github"></span></thumbnail>
+<thumbnail text=":glyphicon-book:" background="#666" font-color="#eee" circle=""><span aria-hidden="true" class="glyphicon glyphicon-book"></span></thumbnail></p>
+<hr>
+<p><strong>font-size/font-color</strong></p>
+<p><strong>20px font-size</strong>
+<thumbnail text="test" border="1px solid black" font-size="20" circle="">test</thumbnail></p>
+<p><strong>40px font-size</strong>
+<thumbnail text="test" border="1px solid black" font-size="40" circle="">test</thumbnail></p>
+<p><strong>font-color</strong>
+<thumbnail text="blue" border="1px solid black" font-color="#669" circle="">blue</thumbnail>
+<thumbnail text="maroon" border="1px solid black" font-color="maroon" font-size="25" circle="">maroon</thumbnail></p></div>
+
+
         </div>
-        <hr>
-        <p><strong>Background</strong></p>
-        <p><strong>Valid CSS properties</strong>
-          <thumbnail background="lightblue" circle=""></thumbnail>
-          <thumbnail background="#aaf" circle=""></thumbnail>
-          <thumbnail background="rgba(120, 120, 200, 0.4)" circle=""></thumbnail>
-        </p>
-        <p><strong>Invalid CSS properties</strong>
-          <thumbnail background="asdf" border="1px solid black" circle=""></thumbnail>
-        </p>
-        <p><strong>Empty</strong>
-          <thumbnail background="" border="1px solid black" circle=""></thumbnail>
-        </p>
-        <hr>
-        <p><strong>Text/Emojis/Icons</strong></p>
-        <p><strong>Text</strong>
-          <thumbnail text="test" border="1px solid black" circle="">test</thumbnail>
-        </p>
-        <p><strong>Markdown</strong>
-          <thumbnail text="_test_" border="1px solid black" circle=""><em>test</em></thumbnail>
-          <thumbnail text="**test**" border="1px solid black" circle=""><strong>test</strong></thumbnail>
-        </p>
-        <p><strong>Emojis</strong>
-          <thumbnail text=":x:" border="1px solid black" circle="">❌</thumbnail>
-          <thumbnail text=":eggplant:" border="1px solid black" circle="">🍆</thumbnail>
-        </p>
-        <p><strong>Icons</strong>
-          <thumbnail text=":fab-github:" border="1px solid black" circle=""><span aria-hidden="true" class="fab fa-github"></span></thumbnail>
-          <thumbnail text=":glyphicon-book:" background="#666" font-color="#eee" circle=""><span aria-hidden="true" class="glyphicon glyphicon-book"></span></thumbnail>
-        </p>
-        <hr>
-        <p><strong>font-size/font-color</strong></p>
-        <p><strong>20px font-size</strong>
-          <thumbnail text="test" border="1px solid black" font-size="20" circle="">test</thumbnail>
-        </p>
-        <p><strong>40px font-size</strong>
-          <thumbnail text="test" border="1px solid black" font-size="40" circle="">test</thumbnail>
-        </p>
-        <p><strong>font-color</strong>
-          <thumbnail text="blue" border="1px solid black" font-color="#669" circle="">blue</thumbnail>
-          <thumbnail text="maroon" border="1px solid black" font-color="maroon" font-size="25" circle="">maroon</thumbnail>
-        </p>
-      </div>
-    </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -147,23 +111,17 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/testTooltipSpacing.html b/test/functional/test_site/expected/testTooltipSpacing.html
index 2a2091df61..a917a29180 100644
--- a/test/functional/test_site/expected/testTooltipSpacing.html
+++ b/test/functional/test_site/expected/testTooltipSpacing.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,19 +23,17 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="fa fa-anchor" href="#569-stray-space-after-tooltip"></a></h1>
-        <pre><code class="hljs"><span>&lt;tooltip&gt;tooltip&lt;/tooltip&gt;, test</span><span>&#x200B;</span><span>&lt;trigger&gt;trigger&lt;/trigger&gt;, test</span></code></pre>
-        <p><span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger">tooltip</span>, test</p>
-        <p><span v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['undefined'].show()" class="trigger">trigger</span>, test</p>
-      </div>
-    </div>
+        <div id="content-wrapper">
+<h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="fa fa-anchor" href="#569-stray-space-after-tooltip"></a></h1>
+<pre><code class="hljs"><span>&lt;tooltip&gt;tooltip&lt;/tooltip&gt;, test</span><span>&#x200B;</span><span>&lt;trigger&gt;trigger&lt;/trigger&gt;, test</span></code></pre><p><span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger">tooltip</span>, test</p>
+<p><span v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['undefined'].show()" class="trigger">trigger</span>, test</p></div>
+
+
+        </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -48,23 +45,17 @@ <h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="f
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site/expected/test_md_fragment.html b/test/functional/test_site/expected/test_md_fragment.html
index 5ff5a96b80..2b796deee3 100644
--- a/test/functional/test_site/expected/test_md_fragment.html
+++ b/test/functional/test_site/expected/test_md_fragment.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -24,17 +23,16 @@
 <body>
   <div id="app">
     <div id="flex-body">
-      <div id="content-wrapper">
-        <h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"></a></h1>
-        <p>The <strong>quick</strong> brown fox jumps <em>over</em> the lazy dog.</p>
-      </div>
-    </div>
+        <div id="content-wrapper">
+<h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"></a></h1>
+<p>The <strong>quick</strong> brown fox jumps <em>over</em> the lazy dog.</p></div>
+
+
+        </div>
     <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    Default footer
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -46,23 +44,17 @@ <h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"><
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
-<script>
-  alert("hello")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
+    <script src="SCRIPT_LINK"></script>
+    <script>alert("hello")</script>
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+    
+      gtag('config', 'TRACKING-ID');
+    </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
index e123033df5..a1259ebcd6 100644
--- a/test/functional/test_site_algolia_plugin/expected/index.html
+++ b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -1,119 +1,95 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Hello World</title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
+<body >
+<div id="app">
+    <div id="flex-body">
+        <nav id="site-nav" class="navbar navbar-light bg-transparent">
+<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
+<li class="mt-2"><a href="/test_site_algolia_plugin/index.html" class="site-nav__a current">Home <span aria-hidden="true" class="glyphicon glyphicon-home"></span></a></li></ul></div></nav>
+<div id="content-wrapper">
+<p><strong>Test Algolia plugin adds algolia-no-index classes</strong></p>
+<p><strong>Dropdowns should have algolia-no-index class</strong></p>
+<div class="temp-dropdown-placeholder">Dropdown</div><dropdown class="temp-dropdown algolia-no-index"><template slot="_header">Dropdown</template>
+  <li><a class="dropdown-item" href="/">One</a></li>
+  <li><a class="dropdown-item" href="/">Two</a></li></dropdown>
+<p><strong>Modal content should have algolia-no-index class</strong></p>
+<b-modal id="modal:trigger_id" ok-only="" size="" modal-class="mb-zoom" ref="modal:trigger_id"><template slot="modal-title">Modal</template>
+  Content should have `algolia-no-index` class
+</b-modal>
+<span for="modal:trigger_id" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal:trigger_id'].show()" class="trigger">Trigger should not have `algolia-no-index` class</span>
+<p><strong>Panels that are not expanded should have algolia-no-index class</strong></p>
+<panel class="algolia-no-index"><template slot="_header"><p>Panel</p></template>
+  Content
+</panel>
+<panel expanded=""><template slot="_header"><p>Panel</p></template>
+  Content
+</panel>
+<p><strong>Popover content should have algolia-no-index class</strong></p>
+<span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span>
+  <div data-mb-html-for="content">Content should have `algolia-no-index` class</div>
+  <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
+<span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span><span data-mb-html-for="content">Content as attribute does not require <code>algolia-no-index</code> class</span>
+  <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
+<p><strong>Question hint and answer should have algolia-no-index class</strong></p>
+<question>
+  Question should not have `algolia-no-index` class
+  <div slot="hint" class="algolia-no-index">Hint should have `algolia-no-index` class</div>
+  <div slot="answer" class="algolia-no-index">Answer should have `algolia-no-index` class</div></question>
+<p><strong>Tabs except first tab should have algolia-no-index class</strong></p>
+<tabs>
+  <tab><template slot="_header">First Tab</template>
+    Content<br>Content<br>Content<br>Content
+  </tab>
+  <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+    Content<br>Content<br>Content<br>Content
+  </tab></tabs>
+<tabs>
+  <tab-group><template slot="_header">First Group</template>
+    <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+      Content<br>Content<br>Content<br>Content
+    </tab>
+    <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+      Content<br>Content<br>Content<br>Content
+    </tab></tab-group>
+  <tab-group class="algolia-no-index"><template slot="_header">Second Group</template>
+    <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+      Content<br>Content<br>Content<br>Content
+    </tab>
+    <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+      Content<br>Content<br>Content<br>Content
+    </tab></tab-group></tabs>
+<tabs>
+  <tab-group><template slot="_header">Outer One</template>
+    <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+      Content<br>Content<br>Content<br>Content
+    </tab>
+    <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+      Content<br>Content<br>Content<br>Content
+    </tab></tab-group>
+  <tab class="algolia-no-index"><template slot="_header">Outer Two</template>
+    Content<br>Content<br>Content<br>Content
+  </tab></tabs></div>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello World</title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
-</head>
 
-<body>
-  <div id="app">
-    <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/test_site_algolia_plugin/index.html" class="site-nav__a current">Home <span aria-hidden="true" class="glyphicon glyphicon-home"></span></a></li>
-          </ul>
         </div>
-      </nav>
-      <div id="content-wrapper">
-        <p><strong>Test Algolia plugin adds algolia-no-index classes</strong></p>
-        <p><strong>Dropdowns should have algolia-no-index class</strong></p>
-        <div class="temp-dropdown-placeholder">Dropdown</div>
-        <dropdown class="temp-dropdown algolia-no-index"><template slot="_header">Dropdown</template>
-          <li><a class="dropdown-item" href="/">One</a></li>
-          <li><a class="dropdown-item" href="/">Two</a></li>
-        </dropdown>
-        <p><strong>Modal content should have algolia-no-index class</strong></p>
-        <b-modal id="modal:trigger_id" hide-footer="" size="" modal-class="mb-zoom" ref="modal:trigger_id"><template slot="modal-title">Modal</template> Content should have `algolia-no-index` class
-        </b-modal>
-        <span for="modal:trigger_id" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal:trigger_id'].show()" class="trigger">Trigger should not have `algolia-no-index` class</span>
-        <p><strong>Panels that are not expanded should have algolia-no-index class</strong></p>
-        <panel class="algolia-no-index"><template slot="_header">
-            <p>Panel</p>
-          </template>
-          Content
-        </panel>
-        <panel expanded=""><template slot="_header">
-            <p>Panel</p>
-          </template>
-          Content
-        </panel>
-        <p><strong>Popover content should have algolia-no-index class</strong></p>
-        <span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span>
-          <div data-mb-html-for="content">Content should have `algolia-no-index` class</div>
-          <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
-        </span>
-        <span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span><span data-mb-html-for="content">Content as attribute does not require <code>algolia-no-index</code> class</span>
-          <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
-        <p><strong>Question hint and answer should have algolia-no-index class</strong></p>
-        <question>
-          Question should not have `algolia-no-index` class
-          <div slot="hint" class="algolia-no-index">Hint should have `algolia-no-index` class</div>
-          <div slot="answer" class="algolia-no-index">Answer should have `algolia-no-index` class</div>
-        </question>
-        <p><strong>Tabs except first tab should have algolia-no-index class</strong></p>
-        <tabs>
-          <tab><template slot="_header">First Tab</template>
-            Content<br>Content<br>Content<br>Content
-          </tab>
-          <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
-            Content<br>Content<br>Content<br>Content
-          </tab>
-        </tabs>
-        <tabs>
-          <tab-group><template slot="_header">First Group</template>
-            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
-              Content<br>Content<br>Content<br>Content
-            </tab>
-            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
-              Content<br>Content<br>Content<br>Content
-            </tab>
-          </tab-group>
-          <tab-group class="algolia-no-index"><template slot="_header">Second Group</template>
-            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
-              Content<br>Content<br>Content<br>Content
-            </tab>
-            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
-              Content<br>Content<br>Content<br>Content
-            </tab>
-          </tab-group>
-        </tabs>
-        <tabs>
-          <tab-group><template slot="_header">Outer One</template>
-            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
-              Content<br>Content<br>Content<br>Content
-            </tab>
-            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
-              Content<br>Content<br>Content<br>Content
-            </tab>
-          </tab-group>
-          <tab class="algolia-no-index"><template slot="_header">Outer Two</template>
-            Content<br>Content<br>Content<br>Content
-          </tab>
-        </tabs>
-      </div>
-    </div>
     <footer>
-      <div class="text-center">
-        This is a dynamic height footer that supports markdown <span>😄</span>!
-      </div>
-    </footer>
-  </div>
+  <div class="text-center">
+    This is a dynamic height footer that supports markdown <span>😄</span>!
+  </div></footer></div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -125,19 +101,18 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-<script>
-  function initAlgolia() {
-    docsearch({
-      apiKey: "25626fae796133dc1e734c6bcaaeac3c",
-      indexName: "docsearch",
-      inputSelector: "#algolia-search-input",
-      algoliaOptions: {},
-      debug: false,
-    });
-  }
-  MarkBind.afterSetup(initAlgolia);
-</script>
+    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+    function initAlgolia() {
+      docsearch({
+        apiKey: "25626fae796133dc1e734c6bcaaeac3c",
+        indexName: "docsearch",
+        inputSelector: "#algolia-search-input",
+        algoliaOptions: {},
+        debug: false,
+      });
+    }
+    MarkBind.afterSetup(initAlgolia);
+  </script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_expressive_layout/expected/index.html b/test/functional/test_site_expressive_layout/expected/index.html
index 726c1bf7c0..71159042a7 100644
--- a/test/functional/test_site_expressive_layout/expected/index.html
+++ b/test/functional/test_site_expressive_layout/expected/index.html
@@ -1,49 +1,41 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="generator" content="MarkBind 2.12.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Landing Page</title>
+    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+    <link rel="stylesheet" href="markbind/css/octicons.css">
+    <link rel="stylesheet" href="markbind/css/github.min.css">
+    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"></head>
+<body >
+<div id="app">
+    <div id="flex-body">
+        <div id="content-wrapper">
+<div></div>
+<div></div>
+<p>Variable from layout</p>
+<p>This is an importedVar</p>
+<panel type="success" minimized=""><template slot="_header"><p>Expanded panel</p></template><template slot="_alt"><p>Minimized panel</p></template>
+  Math formulas
+</panel>
+<div></div>
+<h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
+<p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
+<p>Variable from page</p>
+<p>Bottom Content</p>
+<div>
+<div></div>
+<p>This content can be imported to the bottom of the page</p></div></div>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.13.1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Landing Page</title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/github.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-</head>
 
-<body>
-  <div id="app">
-    <div id="flex-body">
-      <div id="content-wrapper">
-        <div></div>
-        <div></div>
-        <p>Variable from layout</p>
-        <p>This is an importedVar</p>
-        <panel type="success" minimized=""><template slot="_header">
-            <p>Expanded panel</p>
-          </template><template slot="_alt">
-            <p>Minimized panel</p>
-          </template>
-          Math formulas
-        </panel>
-        <div></div>
-        <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
-        <p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
-        <p>Variable from page</p>
-        <p>Bottom Content</p>
-        <div>
-          <div></div>
-          <p>This content can be imported to the bottom of the page</p>
         </div>
-      </div>
-    </div>
     <footer>
 
       <div class="text-center">
@@ -62,5 +54,4 @@ <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#w
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/test/functional/test_site_special_tags/expected/index.html b/test/functional/test_site_special_tags/expected/index.html
index ee83be0f23..864479c2d4 100644
--- a/test/functional/test_site_special_tags/expected/index.html
+++ b/test/functional/test_site_special_tags/expected/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
 
   <meta charset="utf-8">
@@ -28,29 +27,23 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
         <script>
           let x = 1;
 
-          x += 1;
-          alert(x);
-        </script>
-        <hr>
-        <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;style&gt;</code> tag.</p>
-        <style>
-          .bigger-text {
-            font-size: 10em;
-          }
-        </style>
-        <hr>
-        <p>There should be text between this and the next <code>&lt;hr&gt;</code> tag, since it is a special tag. All text should appear in the browser window as a single line, save for the comment which the browser still interprets. (but will be in the
-          expected output)
-        </p>
-        <mustache>
-raw
+x += 1;
+alert(x);
+</script>
+<hr>
+<p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;style&gt;</code> tag.</p>
+<style>
 
-!success!success This should be enclosed in success string success!success!
+.bigger-text {
+  font-size: 10em;
+}
 
-!success This should also be enclosed in success strings success!success!success!
-endraw
-</mustache>
-        <testtag>!success
+</style>
+<hr>
+<p>There should be text between this and the next <code>&lt;hr&gt;</code> tag, since it is a special tag.
+All text should appear in the browser window as a single line,
+save for the comment which the browser still interprets. (but will be in the expected output)</p>
+<testtag>!success
 
 <these>
 some text
@@ -65,16 +58,16 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
 */
 
 success!</testtag>
-        <hr>
-        <p>This has the same content has the previous test, but it is <strong>not</strong> a special tag.
-          The html comment <code>&lt;!-- --&gt;</code> should disappear in the expected output.
-          The line <code>some text</code> should appear as per normal, and not wrapped by a paragraph since
-          a html tag precedes it without a blank line.
-          The other lines should be parsed as markdown paragraphs, as per commonmark spec.</p>
-        <abc>
-          <these>
-            some text
-          </these>
+<hr>
+<p>This has the same content has the previous test, but it is <strong>not</strong> a special tag.
+The html comment <code>&lt;!-- --&gt;</code> should disappear in the expected output.
+The line <code>some text</code> should appear as per normal, and not wrapped by a paragraph since
+a html tag precedes it without a blank line.
+The other lines should be parsed as markdown paragraphs, as per commonmark spec.</p>
+<abc>
+<these>
+some text
+</these>
 
           <p>//</p>
           <p>/*
@@ -101,12 +94,10 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
 <p>if (x &lt;= 5) {
 alert(x);
 }</p>
-<p>success!</testtag>
+<p>success!</testtag></div>
+<hr></div>
         </div>
-        <hr>
-      </div>
     </div>
-  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -119,5 +110,4 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-
-</html>
\ No newline at end of file
+</html>

From 464591941be5dba3ac0988ea2a55ad27ef8a3c9a Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Mon, 23 Mar 2020 13:55:51 +0800
Subject: [PATCH 05/11] Update test site beautification and docs

---
 docs/userGuide/siteConfiguration.md           |   6 +-
 .../test_site/expected/bugs/index.html        |  45 ++--
 test/functional/test_site/expected/index.html | 198 +++++++++------
 .../needsrenderedplugin._include_.html        |   4 +-
 .../NonFunctionalRequirements._include_.html  |  15 +-
 .../requirements/UserStories._include_.html   |  28 ++-
 .../expected/sub_site/index._include_.html    |   6 +-
 .../test_site/expected/sub_site/index.html    |  41 ++--
 .../sub_site/testReuse._include_.html         |  36 +--
 .../test_site/expected/testAfterSetup.html    |  54 +++--
 .../expected/testAnchorGeneration.html        | 173 ++++++++------
 .../expected/testAntiFOUCStyles.html          |  93 ++++---
 .../test_site/expected/testCodeBlocks.html    |  41 ++--
 .../expected/testEmptyFrontmatter.html        |  48 ++--
 .../expected/testExternalScripts.html         |  58 +++--
 .../testImportVariables._include_.html        |   4 +-
 .../expected/testImportVariables.html         |  75 +++---
 .../expected/testIncludePluginsRendered.html  |  57 +++--
 .../test_site/expected/testLayouts.html       |  95 +++++---
 .../expected/testLayoutsOverride.html         |  95 +++++---
 .../testPanels/NestedPanel._include_.html     |   4 +-
 .../PanelNormalSource._include_.html          |   2 +-
 .../PanelSourceContainsSegment._include_.html |   5 +-
 .../testPanels/boilerTestPanel._include_.html |   2 +-
 .../testPanels/notInside._include_.html       |   2 +-
 .../testPanelsWithImportedVariables.html      |  60 +++--
 .../test_site/expected/testPlantUML.html      |  41 ++--
 .../test_site/expected/testThumbnails.html    | 218 ++++++++++-------
 .../expected/testTooltipSpacing.html          |  53 ++--
 .../test_site/expected/test_md_fragment.html  |  50 ++--
 test/functional/test_site/site.json           |   2 +-
 test/functional/test_site/sub_site/site.json  |   2 +-
 .../expected/index.html                       | 226 ++++++++++--------
 .../test_site_algolia_plugin/site.json        |   2 +-
 .../expected/index.html                       |  77 +++---
 .../test_site_expressive_layout/site.json     |   2 +-
 .../expected/index.html                       |  65 ++---
 .../test_site_special_tags/site.json          |   2 +-
 38 files changed, 1178 insertions(+), 809 deletions(-)

diff --git a/docs/userGuide/siteConfiguration.md b/docs/userGuide/siteConfiguration.md
index 579fded23d..9985297273 100644
--- a/docs/userGuide/siteConfiguration.md
+++ b/docs/userGuide/siteConfiguration.md
@@ -202,10 +202,10 @@ The example above uses tags as an example of configuring plugin settings, refer
 
 **Specifies that the website should use MarkBind's search functionality.** Default: `true`. See [User Guide: Making the Site Searchable](makingTheSiteSearchable.html) for more details.
 
-#### **`jsBeautify`**
+#### **`htmlBeautify`**
 
-**Toggles-on [js-beautify](https://github.com/beautify-web/js-beautify) for html files generated by MarkBind.** By default, MarkBind turns off `js-beautify` to improve the performance of the MarkBind `build` process. 
-However, toggling-on `js-beautify` allows the user to edit the post-build HTML files in a friendly manner (through proper indentation of the code, for example). 
+**Toggles-on html beautification done by [js-beautify](https://github.com/beautify-web/js-beautify) for html files generated by MarkBind.** By default, MarkBind turns this option off to improve the performance of the MarkBind `build` process. 
+However, toggling-on this option allows the user to edit the post-build HTML files in a friendly manner (through proper indentation of the code, for example). 
 
 #### **`timeZone`**
 
diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
index 3c8366869c..0b5719d8b9 100644
--- a/test/functional/test_site/expected/bugs/index.html
+++ b/test/functional/test_site/expected/bugs/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -40,10 +41,16 @@
           <p>Repro:</p>
           <p>Steps to Reproduce</p>
         </div>
+      </div>
+
+
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -55,17 +62,23 @@
   const enableSearch = true
 </script>
 <script src="../markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index 10f4eb2c8f..30b51bde69 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <!-- Start of top level head file content insertion -->
   <script src="/test_site/headFiles/customScriptTop.js"></script>
@@ -487,13 +488,44 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
             <p><strong>Test missing variable with default</strong></p>
             <p>Missing Variable</p>
           </div>
-        </popover>
-      
-        <popover id="pop:footnote3">
-          <div slot="content">
-            <p>Inlines notes are easier to write, since
-you don't have to pick an identifier and move down to type the
-note.</p>
+          <p><strong>Trimmed include</strong></p>
+          <p><strong><span>Fragment with leading spaces and newline</span></strong></p>
+          <p><strong>Trimmed include fragment</strong></p>
+          <p><strong>Before | <span>Fragment with leading spaces and newline</span> | After</strong></p>
+          <p><strong>Include with custom variables</strong></p>
+          <div>
+            <p><strong>Test included variable as include attribute</strong></p>
+            <p>Included variable as include attribute</p>
+            <p><strong>Test included variable</strong></p>
+            <p>Included variable</p>
+            <p><strong>Test included variable with markdown</strong></p>
+            <p><strong><strong>Included variable with markdown</strong></strong></p>
+            <p><strong>Test included variable as attribute</strong></p>
+            <p style="color: blue">Test</p>
+            <p><strong>Test included variable as html element</strong></p>
+            <p><span>Included variable within html element</span></p>
+            <p><strong>Test included variable overridden by <a href="http://variables.md">variables.md</a></strong></p>
+            <p>Global Variable Overriding Included Variable</p>
+            <p><strong>Test included variables in included file</strong></p>
+            <div>
+              <p>Included variable in outer included file</p>
+              <p>Included variable overriding inner variable</p>
+            </div>
+            <p><strong>Inner included variables should not leak into other files</strong></p>
+            <div>
+              <p>Should be blank:</p>
+            </div>
+            <p><strong>Test included variable with global variable</strong></p>
+            <p>Included variable with Global Variable</p>
+            <p><strong>Test included variable overridden by set</strong></p>
+            <p>Inner variable overridden by set
+              Global variable overridden by set</p>
+            <p><strong>Test missing variable with default</strong></p>
+            <p>Missing Variable</p>
+          </div>
+          <p><strong>Included variables should not leak into other files</strong></p>
+          <div>
+            <p>Should be blank:</p>
           </div>
           <p><strong>Panel with shorthand heading syntax</strong></p>
           <panel>
@@ -629,6 +661,23 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
             </div>
           </popover>
 
+          <popover id="pop:footnote2">
+            <div slot="content">
+              <p>Here's one with multiple blocks.</p>
+              <p>Subsequent paragraphs are indented to show that they
+                belong to the previous footnote.</p>
+            </div>
+          </popover>
+
+          <popover id="pop:footnote3">
+            <div slot="content">
+              <p>Inlines notes are easier to write, since
+                you don't have to pick an identifier and move down to type the
+                note.</p>
+            </div>
+          </popover>
+        </section>
+      </div>
 
           <popover id="pop:footnote3">
             <div slot="content">
@@ -683,58 +732,61 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
               <a class="nav-link py-1" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed&#x200E;</a>
             </nav>
 
-        <nav id="page-nav" class="navbar navbar-light bg-transparent">
-<div class="border-left-grey nav-inner position-sticky slim-scroll">
-<a class="navbar-brand page-nav-title" href="#">Testing Page Navigation</a>
-<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">
-<a class="nav-link py-1" href="#heading-with-multiple-keywords">Heading with multiple keywords&#x200E;</a>
-<a class="nav-link py-1" href="#heading-with-keyword-in-panel">Heading with keyword in panel&#x200E;</a>
-<a class="nav-link py-1" href="#panel-with-heading">Panel with heading&#x200E;</a>
-<a class="nav-link py-1" href="#panel-without-heading-with-keyword">Panel without heading with keyword&#x200E;</a>
-<a class="nav-link py-1" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading&#x200E;</a>
-<a class="nav-link py-1" href="#panel-with-heading-with-keyword">Panel with heading with keyword&#x200E;</a>
-<a class="nav-link py-1" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading&#x200E;</a>
-<a class="nav-link py-1" href="#heading-with-included-keyword">Heading with included keyword&#x200E;</a>
-<a class="nav-link py-1" href="#included-heading">Included Heading&#x200E;</a>
-<a class="nav-link py-1" href="#heading-with-nested-keyword">Heading with nested keyword&#x200E;</a>
-<a class="nav-link py-1" href="#heading-with-hidden-keyword">Heading with hidden keyword&#x200E;</a>
-<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
-<a class="nav-link py-1" href="#establishing-requirements">Establishing Requirements&#x200E;</a>
-<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
-<a class="nav-link py-1" href="#brainstorming">Brainstorming&#x200E;</a>
-<a class="nav-link py-1" href="#user-surveys">User surveys&#x200E;</a>
-<a class="nav-link py-1" href="#focus-groups">Focus groups&#x200E;</a>
-</nav>
-</nav>
-<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
-<a class="nav-link py-1" href="#feature-list">Feature list&#x200E;</a>
-<a class="nav-link py-1" href="#panel-without-src-header">Panel without src header&#x200E;</a>
-<a class="nav-link py-1" href="#panel-with-normal-src-header">Panel with normal src header&#x200E;</a>
-<a class="nav-link py-1" href="#panel-with-src-from-a-page-segment-header">Panel with src from a page segment header&#x200E;</a>
-<a class="nav-link py-1" href="#boilerplate-referencing">Boilerplate referencing&#x200E;</a>
-<a class="nav-link py-1" href="#referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate&#x200E;</a>
-<a class="nav-link py-1" href="#outer-nested-panel">Outer nested panel&#x200E;</a>
-<a class="nav-link py-1" href="#outer-nested-panel-without-src">Outer nested panel without src&#x200E;</a>
-<a class="nav-link py-1" href="#inner-panel-header-without-src">Inner panel header without src&#x200E;</a>
-<a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header&#x200E;</a>
-<a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header&#x200E;</a>
-<a class="nav-link py-1" href="#panel-inside-modal">Panel inside modal&#x200E;</a>
-<a class="nav-link py-1" href="#unexpanded-panel-header">Unexpanded panel header&#x200E;</a>
-</nav>
-<a class="nav-link py-1" href="#markbind-plugin-pre-render">Markbind Plugin Pre-render&#x200E;</a>
-<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
-<a class="nav-link py-1" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed&#x200E;</a>
-</nav>
 
-</nav>
-</div>
-</nav>
-</div>
+      <nav id="page-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-left-grey nav-inner position-sticky slim-scroll">
+          <a class="navbar-brand page-nav-title" href="#">Testing Page Navigation</a>
+          <nav class="nav nav-pills flex-column my-0 small no-flex-wrap">
+            <a class="nav-link py-1" href="#heading-with-multiple-keywords">Heading with multiple keywords&#x200E;</a>
+            <a class="nav-link py-1" href="#heading-with-keyword-in-panel">Heading with keyword in panel&#x200E;</a>
+            <a class="nav-link py-1" href="#panel-with-heading">Panel with heading&#x200E;</a>
+            <a class="nav-link py-1" href="#panel-without-heading-with-keyword">Panel without heading with keyword&#x200E;</a>
+            <a class="nav-link py-1" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading&#x200E;</a>
+            <a class="nav-link py-1" href="#panel-with-heading-with-keyword">Panel with heading with keyword&#x200E;</a>
+            <a class="nav-link py-1" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading&#x200E;</a>
+            <a class="nav-link py-1" href="#heading-with-included-keyword">Heading with included keyword&#x200E;</a>
+            <a class="nav-link py-1" href="#included-heading">Included Heading&#x200E;</a>
+            <a class="nav-link py-1" href="#heading-with-nested-keyword">Heading with nested keyword&#x200E;</a>
+            <a class="nav-link py-1" href="#heading-with-hidden-keyword">Heading with hidden keyword&#x200E;</a>
+            <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+              <a class="nav-link py-1" href="#establishing-requirements">Establishing Requirements&#x200E;</a>
+              <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+                <a class="nav-link py-1" href="#brainstorming">Brainstorming&#x200E;</a>
+                <a class="nav-link py-1" href="#user-surveys">User surveys&#x200E;</a>
+                <a class="nav-link py-1" href="#focus-groups">Focus groups&#x200E;</a>
+              </nav>
+            </nav>
+            <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+              <a class="nav-link py-1" href="#feature-list">Feature list&#x200E;</a>
+              <a class="nav-link py-1" href="#panel-without-src-header">Panel without src header&#x200E;</a>
+              <a class="nav-link py-1" href="#panel-with-normal-src-header">Panel with normal src header&#x200E;</a>
+              <a class="nav-link py-1" href="#panel-with-src-from-a-page-segment-header">Panel with src from a page segment header&#x200E;</a>
+              <a class="nav-link py-1" href="#boilerplate-referencing">Boilerplate referencing&#x200E;</a>
+              <a class="nav-link py-1" href="#referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate&#x200E;</a>
+              <a class="nav-link py-1" href="#outer-nested-panel">Outer nested panel&#x200E;</a>
+              <a class="nav-link py-1" href="#outer-nested-panel-without-src">Outer nested panel without src&#x200E;</a>
+              <a class="nav-link py-1" href="#inner-panel-header-without-src">Inner panel header without src&#x200E;</a>
+              <a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header&#x200E;</a>
+              <a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header&#x200E;</a>
+              <a class="nav-link py-1" href="#panel-inside-modal">Panel inside modal&#x200E;</a>
+              <a class="nav-link py-1" href="#unexpanded-panel-header">Unexpanded panel header&#x200E;</a>
+            </nav>
+            <a class="nav-link py-1" href="#markbind-plugin-pre-render">Markbind Plugin Pre-render&#x200E;</a>
+            <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+              <a class="nav-link py-1" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed&#x200E;</a>
+            </nav>
+
+          </nav>
+        </div>
+      </nav>
+    </div>
     <footer>
-<h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed"></a></h1>
-  <div class="text-center">
-    This is a dynamic height footer that supports markdown <span>😄</span>!
-  </div></footer></div>
+      <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed"></a></h1>
+      <div class="text-center">
+        This is a dynamic height footer that supports markdown <span>😄</span>!
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -746,17 +798,23 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/needsrenderedplugin._include_.html b/test/functional/test_site/expected/needsrenderedplugin._include_.html
index 6dd6e7459b..d0f1f344d4 100644
--- a/test/functional/test_site/expected/needsrenderedplugin._include_.html
+++ b/test/functional/test_site/expected/needsrenderedplugin._include_.html
@@ -1 +1,3 @@
-<p><panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel></p>
+<p>
+  <panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel>
+</p>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html b/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
index 4ec55287e6..5e31c012fe 100644
--- a/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
+++ b/test/functional/test_site/expected/requirements/NonFunctionalRequirements._include_.html
@@ -1,6 +1,11 @@
 <seg id="def-nfr" title="Non Functional Requirements">
-<div><p>In contrast to <strong>Functional Requirements</strong> which specify what the system should do,
-<strong>Non-Functional Requirements</strong> specify the constraints under which system is developed and operated.</p></div>
-<p><seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
-requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
-of understanding what a software product should do.</seg></p></seg>
\ No newline at end of file
+  <div>
+    <p>In contrast to <strong>Functional Requirements</strong> which specify what the system should do,
+      <strong>Non-Functional Requirements</strong> specify the constraints under which system is developed and operated.</p>
+  </div>
+  <p>
+    <seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
+      requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+      of understanding what a software product should do.</seg>
+  </p>
+</seg>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/requirements/UserStories._include_.html b/test/functional/test_site/expected/requirements/UserStories._include_.html
index 27899c7044..09327439ce 100644
--- a/test/functional/test_site/expected/requirements/UserStories._include_.html
+++ b/test/functional/test_site/expected/requirements/UserStories._include_.html
@@ -1,17 +1,21 @@
 <p>User stories are brief (typically, 1-3 sentences) descriptions of what the system can do for the users,
-written in the customers’ language. Often, user stories are written by the customers themselves.</p>
+  written in the customers’ language. Often, user stories are written by the customers themselves.</p>
 <p>A commonly used format for writing user stories is:<br>
-<strong><code>As a</code></strong> <code>&lt;use type/role&gt;</code> <strong><code>I can</code></strong> <code>&lt;function&gt;</code> <strong><code>so that</code></strong> <code>&lt;benefit&gt;</code></p>
+  <strong><code>As a</code></strong> <code>&lt;use type/role&gt;</code> <strong><code>I can</code></strong> <code>&lt;function&gt;</code> <strong><code>so that</code></strong> <code>&lt;benefit&gt;</code></p>
 <p>Here are some examples of user stories for the IVLE system:</p>
-<pre><code class="hljs bat"><span>* As a student, I can download files uploaded by lecturers, so that I can get my own <span class="hljs-built_in">copy</span> of the files.</span><span>* As a lecturer, I can create discussion forums, so that students can discuss things online.</span><span>* As a tutor, I can <span class="hljs-built_in">print</span> attendance sheets, so that I can take attendance during the class.</span></code></pre><p>The <code>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets.
-User stories are mainly used for early estimation and scheduling purposes.</p>
+<pre><code class="hljs bat"><span>* As a student, I can download files uploaded by lecturers, so that I can get my own <span class="hljs-built_in">copy</span> of the files.</span><span>* As a lecturer, I can create discussion forums, so that students can discuss things online.</span><span>* As a tutor, I can <span class="hljs-built_in">print</span> attendance sheets, so that I can take attendance during the class.</span></code></pre>
+<p>The <code>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets.
+  User stories are mainly used for early estimation and scheduling purposes.</p>
 <p>According to <ref xp-website="">this<ref></ref>, the biggest difference between user stories and traditional requirements
-specifications is in the level of detail. User stories should only provide enough detail to make a reasonably low risk
-estimate of how long the story will take to implement. When the time comes to implement the story,
-the developers will meet with the customer face-to-face  to work out a more detailed description of the requirements.</ref></p>
+    specifications is in the level of detail. User stories should only provide enough detail to make a reasonably low risk
+    estimate of how long the story will take to implement. When the time comes to implement the story,
+    the developers will meet with the customer face-to-face to work out a more detailed description of the requirements.</ref>
+</p>
 <p>User stories are often written on index cards or sticky notes, and arranged on walls or tables to facilitate
-planning and discussion.</p>
-<p><seg xp-website="" sup=""><a href="http://www.extremeprogramming.org/rules/userstories.html">http://www.extremeprogramming.org/rules/userstories.html</a>
-This is the main website for eXtreme Programming (XP), an approach to software development currently popular
-among practitioners. User stories are commonly used among XP practitioners to capture requirements.
-</seg></p>
+  planning and discussion.</p>
+<p>
+  <seg xp-website="" sup=""><a href="http://www.extremeprogramming.org/rules/userstories.html">http://www.extremeprogramming.org/rules/userstories.html</a>
+    This is the main website for eXtreme Programming (XP), an approach to software development currently popular
+    among practitioners. User stories are commonly used among XP practitioners to capture requirements.
+  </seg>
+</p>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/sub_site/index._include_.html b/test/functional/test_site/expected/sub_site/index._include_.html
index 53ebaf3762..b3701fc392 100644
--- a/test/functional/test_site/expected/sub_site/index._include_.html
+++ b/test/functional/test_site/expected/sub_site/index._include_.html
@@ -1,9 +1,9 @@
 <p>This is a page from another Markbind site.</p>
 <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
 <p>It is a list of features (or functionalities) grouped according to some criteria such as priority
-(e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
-(e.g. order-related, invoice-related, etc.).
-Here is a sample feature list from Minesweeper (only a brief description has been provided to save space).</p>
+  (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
+  (e.g. order-related, invoice-related, etc.).
+  Here is a sample feature list from Minesweeper (only a brief description has been provided to save space).</p>
 <ol>
   <li>Basic play – Single player play.</li>
   <li>Difficulty levels – Additional Medium and Advanced levels.</li>
diff --git a/test/functional/test_site/expected/sub_site/index.html b/test/functional/test_site/expected/sub_site/index.html
index 77246ae10f..4176d0d3f1 100644
--- a/test/functional/test_site/expected/sub_site/index.html
+++ b/test/functional/test_site/expected/sub_site/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -41,9 +42,11 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
       </div>
     </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -55,17 +58,23 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
   const enableSearch = true
 </script>
 <script src="../markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/sub_site/testReuse._include_.html b/test/functional/test_site/expected/sub_site/testReuse._include_.html
index 9f1edaa77d..263cd85a41 100644
--- a/test/functional/test_site/expected/sub_site/testReuse._include_.html
+++ b/test/functional/test_site/expected/sub_site/testReuse._include_.html
@@ -1,26 +1,28 @@
 <p>This is a page from another Markbind site.
-The purpose of this page is to ensure that reuse works as expected.
-All the following images should display correctly.</p>
+  The purpose of this page is to ensure that reuse works as expected.
+  All the following images should display correctly.</p>
 <p>Some variables:</p>
 <div></div>
 <p>IMG tags:
-<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-<img src="https://dummyimage.com/600x400/000/fff"></p>
+  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+  <img src="https://dummyimage.com/600x400/000/fff"></p>
 <p>PIC tags:
-<pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-<pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-<pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-<pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
-<pic src="https://dummyimage.com/600x400/000/fff"></pic></p>
+  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+  <pic src="https://dummyimage.com/600x400/000/fff"></pic>
+</p>
 <p>Anchor:
-<a href="https://dummyimage.com/600x400/000/fff">External Image</a>
-<a href="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">Link to picture</a>
-<a id="namedAnchor">Named Anchor</a>
-<a>Anchor with no attributes</a></p>
+  <a href="https://dummyimage.com/600x400/000/fff">External Image</a>
+  <a href="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">Link to picture</a>
+  <a id="namedAnchor">Named Anchor</a>
+  <a>Anchor with no attributes</a></p>
 <p>Within DIV tag:</p>
 <div id="imageTest">
   <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
-  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic></div>
\ No newline at end of file
+  <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
+</div>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testAfterSetup.html b/test/functional/test_site/expected/testAfterSetup.html
index 950e6d742b..8d53a28531 100644
--- a/test/functional/test_site/expected/testAfterSetup.html
+++ b/test/functional/test_site/expected/testAfterSetup.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="head-top">
   <meta charset="utf-8">
@@ -23,18 +24,21 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<box id="alert-box">
-    This Vue element should trigger a alert dialog when clicked on.
-</box>
-<p><span id="mouseover-span">This span should toggle the colour of the above box when hovered upon.</span></p></div>
+      <div id="content-wrapper">
+        <box id="alert-box">
+          This Vue element should trigger a alert dialog when clicked on.
+        </box>
+        <p><span id="mouseover-span">This span should toggle the colour of the above box when hovered upon.</span></p>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    testAfterSetup footer
-  </div></footer></div>
+      <div class="text-center">
+        testAfterSetup footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -46,17 +50,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/testAfterSetup/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testAnchorGeneration.html b/test/functional/test_site/expected/testAnchorGeneration.html
index 98f99da63c..484ef2a857 100644
--- a/test/functional/test_site/expected/testAnchorGeneration.html
+++ b/test/functional/test_site/expected/testAnchorGeneration.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,69 +24,89 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<h1 id="root-file">Root file<a class="fa fa-anchor" href="#root-file"></a></h1>
-<h1 id="should-have-anchor">should have anchor<a class="fa fa-anchor" href="#should-have-anchor"></a></h1>
-<h2 id="should-have-anchor-2">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-2"></a></h2>
-<h3 id="should-have-anchor-3">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-3"></a></h3>
-<h4 id="should-have-anchor-4">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4"></a></h4>
-<h5 id="should-have-anchor-5">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5"></a></h5>
-<h6 id="should-have-anchor-6">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6"></a></h6>
-<panel id="should-have-anchor-7"><template slot="_header"><h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h4></template>
-Lorem ipsum
-</panel>
-<panel><template slot="_header"><p>Collapsed</p></template>
-<p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
-<h1 id="should-not-have-anchor">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor"></a></h1>
-<h2 id="should-not-have-anchor-2">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-2"></a></h2>
-<h3 id="should-not-have-anchor-3">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-3"></a></h3>
-<h4 id="should-not-have-anchor-4">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-4"></a></h4>
-<h5 id="should-not-have-anchor-5">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-5"></a></h5>
-<h6 id="should-not-have-anchor-6">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-6"></a></h6></panel>
-<panel expanded=""><template slot="_header"><p>Expanded</p></template>
-<p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
-<h1 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8"></a></h1>
-<h2 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9"></a></h2>
-<h3 id="should-have-anchor-10">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-10"></a></h3>
-<h4 id="should-have-anchor-11">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-11"></a></h4>
-<h5 id="should-have-anchor-12">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-12"></a></h5>
-<h6 id="should-have-anchor-13">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-13"></a></h6></panel>
-<hr>
-<div>
-<h1 id="included-file">Included File<a class="fa fa-anchor" href="#included-file"></a></h1>
-<br>
-<h1 id="should-have-anchor-14">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-14"></a></h1>
-<h2 id="should-have-anchor-15">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-15"></a></h2>
-<h3 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-16"></a></h3>
-<h4 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17"></a></h4>
-<h5 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18"></a></h5>
-<h6 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19"></a></h6>
-<panel id="should-have-anchor-20"><template slot="_header"><h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h4></template>
-Lorem ipsum
-</panel>
-<panel><template slot="_header"><p>Collapsed</p></template>
-<p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
-<h1 id="should-not-have-anchor-7">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-7"></a></h1>
-<h2 id="should-not-have-anchor-8">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-8"></a></h2>
-<h3 id="should-not-have-anchor-9">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-9"></a></h3>
-<h4 id="should-not-have-anchor-10">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-10"></a></h4>
-<h5 id="should-not-have-anchor-11">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-11"></a></h5>
-<h6 id="should-not-have-anchor-12">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-12"></a></h6></panel>
-<panel expanded=""><template slot="_header"><p>Expanded</p></template>
-<p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
-<h1 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21"></a></h1>
-<h2 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22"></a></h2>
-<h3 id="should-have-anchor-23">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-23"></a></h3>
-<h4 id="should-have-anchor-24">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-24"></a></h4>
-<h5 id="should-have-anchor-25">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-25"></a></h5>
-<h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-26"></a></h6></panel></div></div>
+      <div id="content-wrapper">
+        <h1 id="root-file">Root file<a class="fa fa-anchor" href="#root-file"></a></h1>
+        <h1 id="should-have-anchor">should have anchor<a class="fa fa-anchor" href="#should-have-anchor"></a></h1>
+        <h2 id="should-have-anchor-2">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-2"></a></h2>
+        <h3 id="should-have-anchor-3">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-3"></a></h3>
+        <h4 id="should-have-anchor-4">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4"></a></h4>
+        <h5 id="should-have-anchor-5">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5"></a></h5>
+        <h6 id="should-have-anchor-6">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6"></a></h6>
+        <panel id="should-have-anchor-7"><template slot="_header">
+            <h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h4>
+          </template>
+          Lorem ipsum
+        </panel>
+        <panel><template slot="_header">
+            <p>Collapsed</p>
+          </template>
+          <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
+          <h1 id="should-not-have-anchor">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor"></a></h1>
+          <h2 id="should-not-have-anchor-2">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-2"></a></h2>
+          <h3 id="should-not-have-anchor-3">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-3"></a></h3>
+          <h4 id="should-not-have-anchor-4">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-4"></a></h4>
+          <h5 id="should-not-have-anchor-5">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-5"></a></h5>
+          <h6 id="should-not-have-anchor-6">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-6"></a></h6>
+        </panel>
+        <panel expanded=""><template slot="_header">
+            <p>Expanded</p>
+          </template>
+          <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
+          <h1 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8"></a></h1>
+          <h2 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9"></a></h2>
+          <h3 id="should-have-anchor-10">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-10"></a></h3>
+          <h4 id="should-have-anchor-11">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-11"></a></h4>
+          <h5 id="should-have-anchor-12">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-12"></a></h5>
+          <h6 id="should-have-anchor-13">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-13"></a></h6>
+        </panel>
+        <hr>
+        <div>
+          <h1 id="included-file">Included File<a class="fa fa-anchor" href="#included-file"></a></h1>
+          <br>
+          <h1 id="should-have-anchor-14">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-14"></a></h1>
+          <h2 id="should-have-anchor-15">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-15"></a></h2>
+          <h3 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-16"></a></h3>
+          <h4 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17"></a></h4>
+          <h5 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18"></a></h5>
+          <h6 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19"></a></h6>
+          <panel id="should-have-anchor-20"><template slot="_header">
+              <h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h4>
+            </template>
+            Lorem ipsum
+          </panel>
+          <panel><template slot="_header">
+              <p>Collapsed</p>
+            </template>
+            <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
+            <h1 id="should-not-have-anchor-7">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-7"></a></h1>
+            <h2 id="should-not-have-anchor-8">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-8"></a></h2>
+            <h3 id="should-not-have-anchor-9">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-9"></a></h3>
+            <h4 id="should-not-have-anchor-10">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-10"></a></h4>
+            <h5 id="should-not-have-anchor-11">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-11"></a></h5>
+            <h6 id="should-not-have-anchor-12">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-12"></a></h6>
+          </panel>
+          <panel expanded=""><template slot="_header">
+              <p>Expanded</p>
+            </template>
+            <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
+            <h1 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21"></a></h1>
+            <h2 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22"></a></h2>
+            <h3 id="should-have-anchor-23">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-23"></a></h3>
+            <h4 id="should-have-anchor-24">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-24"></a></h4>
+            <h5 id="should-have-anchor-25">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-25"></a></h5>
+            <h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-26"></a></h6>
+          </panel>
+        </div>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -97,17 +118,23 @@ <h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testAntiFOUCStyles.html b/test/functional/test_site/expected/testAntiFOUCStyles.html
index ee180e6499..c18c1a5121 100644
--- a/test/functional/test_site/expected/testAntiFOUCStyles.html
+++ b/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,38 +24,48 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
+      <div id="content-wrapper">
 
-<navbar type="dark" class="temp-navbar">
-  <li><a href="/" class="nav-link">One</a></li>
-  <li><a href="/" class="nav-link">Two</a></li>
-  <div class="nav-link temp-dropdown-placeholder">Dropdown</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Dropdown</template>
-    <li><a class="dropdown-item" href="/">Dropdown One</a></li>
-    <li><a class="dropdown-item" href="/">Dropdown Two</a></li></dropdown></navbar>
+        <navbar type="dark" class="temp-navbar">
+          <li><a href="/" class="nav-link">One</a></li>
+          <li><a href="/" class="nav-link">Two</a></li>
+          <div class="nav-link temp-dropdown-placeholder">Dropdown</div>
+          <dropdown class="nav-link temp-dropdown"><template slot="_header">Dropdown</template>
+            <li><a class="dropdown-item" href="/">Dropdown One</a></li>
+            <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
+          </dropdown>
+        </navbar>
 
-<p><strong>Test dropdown in body with text and class attributes</strong></p>
-<div class="test-class temp-dropdown-placeholder">Test One</div><dropdown class="test-class temp-dropdown"><template slot="_header">Test One</template>
-  <li><a class="dropdown-item" href="/">Dropdown One</a></li>
-  <li><a class="dropdown-item" href="/">Dropdown Two</a></li></dropdown>
+        <p><strong>Test dropdown in body with text and class attributes</strong></p>
+        <div class="test-class temp-dropdown-placeholder">Test One</div>
+        <dropdown class="test-class temp-dropdown"><template slot="_header">Test One</template>
+          <li><a class="dropdown-item" href="/">Dropdown One</a></li>
+          <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
+        </dropdown>
 
-<p><strong>Test dropdown in body without text and class attributes</strong></p>
-<div class="temp-dropdown-placeholder"></div><dropdown class="temp-dropdown">
-  <button slot="button" type="button" class="btn dropdown-toggle">
-    Test Two
-    <span class="caret"></span></button>
-  <li><a class="dropdown-item" href="/">Dropdown One</a></li>
-  <li><a class="dropdown-item" href="/">Dropdown Two</a></li></dropdown>
+        <p><strong>Test dropdown in body without text and class attributes</strong></p>
+        <div class="temp-dropdown-placeholder"></div>
+        <dropdown class="temp-dropdown">
+          <button slot="button" type="button" class="btn dropdown-toggle">
+            Test Two
+            <span class="caret"></span></button>
+          <li><a class="dropdown-item" href="/">Dropdown One</a></li>
+          <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
+        </dropdown>
 
-<p><strong>Filler text</strong></p>
-<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
-<p>Some text</p></div>
+        <p><strong>Filler text</strong></p>
+        <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
+        <p>Some text</p>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -66,17 +77,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testCodeBlocks.html b/test/functional/test_site/expected/testCodeBlocks.html
index cd7d3059cd..d6ca3bb6e6 100644
--- a/test/functional/test_site/expected/testCodeBlocks.html
+++ b/test/functional/test_site/expected/testCodeBlocks.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -54,9 +55,11 @@
       </div>
     </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -68,17 +71,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testEmptyFrontmatter.html b/test/functional/test_site/expected/testEmptyFrontmatter.html
index 79e0b208b6..89f9b50d18 100644
--- a/test/functional/test_site/expected/testEmptyFrontmatter.html
+++ b/test/functional/test_site/expected/testEmptyFrontmatter.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,15 +24,18 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<p>A page with an empty frontmatter should still build.</p></div>
+      <div id="content-wrapper">
+        <p>A page with an empty frontmatter should still build.</p>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -43,17 +47,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testExternalScripts.html b/test/functional/test_site/expected/testExternalScripts.html
index 5204bf4b6d..73f35732c5 100644
--- a/test/functional/test_site/expected/testExternalScripts.html
+++ b/test/functional/test_site/expected/testExternalScripts.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,19 +24,22 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<p>The external script <a href="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">MathJax 2.75</a> should be included, and the following MathJax content should render:</p>
-<box>
-When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
-$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
-</box></div>
+      <div id="content-wrapper">
+        <p>The external script <a href="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">MathJax 2.75</a> should be included, and the following MathJax content should render:</p>
+        <box>
+          When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
+          $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
+        </box>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -47,18 +51,24 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testImportVariables._include_.html b/test/functional/test_site/expected/testImportVariables._include_.html
index a3eb4356e3..c393869205 100644
--- a/test/functional/test_site/expected/testImportVariables._include_.html
+++ b/test/functional/test_site/expected/testImportVariables._include_.html
@@ -2,7 +2,7 @@
 <p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
 <div></div>
 <p>Test import variables from src specified via variable:
-This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
+  This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
 <p>Test import variables that itself imports other variables:</p>
 <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
 <p>There should be something red below:</p>
@@ -11,4 +11,4 @@ <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a cl
 <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
 <p>There should be something blue below:</p>
 <div style="color:blue">This is a deeply imported variable</div>
-Something should have appeared above in blue.
+Something should have appeared above in blue.
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testImportVariables.html b/test/functional/test_site/expected/testImportVariables.html
index 3d95998a5c..1a676e0a78 100644
--- a/test/functional/test_site/expected/testImportVariables.html
+++ b/test/functional/test_site/expected/testImportVariables.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,29 +24,31 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<div></div>
-<p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
-<div></div>
-<p>Test import variables from src specified via variable:
-This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
-<p>Test import variables that itself imports other variables:</p>
-<h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
-<p>There should be something red below:</p>
-<div style="color:red">This is a page variable from <a href="http://variablestoimport.md">variablestoimport.md</a></div>
-Something should have appeared above in red.
-<h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
-<p>There should be something blue below:</p>
-<div style="color:blue">This is a deeply imported variable</div>
-Something should have appeared above in blue.
-</div>
+      <div id="content-wrapper">
+        <div></div>
+        <p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
+        <div></div>
+        <p>Test import variables from src specified via variable:
+          This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
+        <p>Test import variables that itself imports other variables:</p>
+        <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
+        <p>There should be something red below:</p>
+        <div style="color:red">This is a page variable from <a href="http://variablestoimport.md">variablestoimport.md</a></div>
+        Something should have appeared above in red.
+        <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
+        <p>There should be something blue below:</p>
+        <div style="color:blue">This is a deeply imported variable</div>
+        Something should have appeared above in blue.
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -57,17 +60,23 @@ <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testIncludePluginsRendered.html b/test/functional/test_site/expected/testIncludePluginsRendered.html
index bb916fb9b1..b1486d38c5 100644
--- a/test/functional/test_site/expected/testIncludePluginsRendered.html
+++ b/test/functional/test_site/expected/testIncludePluginsRendered.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,18 +24,24 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<p>The contents of these two panels should be exactly the same.</p>
-<p><panel src="/test_site/needsrenderedplugin._include_.html"></panel></p>
-<panel>
-<panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel></panel></div>
+      <div id="content-wrapper">
+        <p>The contents of these two panels should be exactly the same.</p>
+        <p>
+          <panel src="/test_site/needsrenderedplugin._include_.html"></panel>
+        </p>
+        <panel>
+          <panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel>
+        </panel>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -46,17 +53,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testLayouts.html b/test/functional/test_site/expected/testLayouts.html
index f3a3a6dbc0..8e9ce42bc4 100644
--- a/test/functional/test_site/expected/testLayouts.html
+++ b/test/functional/test_site/expected/testLayouts.html
@@ -1,34 +1,49 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Hello World</title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="STYLESHEET_LINK"><link rel="stylesheet" href="markbind/layouts/testLayout/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"><script src="/test_site/headFiles/overwriteLayoutScript.js"></script><link rel="icon" href="/test_site/favicon.png"></head>
-<body >
-<div id="app">
-    <div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2">[Layout Nav]</li></ul></div></nav>
-<div id="content-wrapper">
-<p><strong>Uses a front matter layout</strong></p></div>
 
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hello World</title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="markbind/layouts/testLayout/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+  <script src="/test_site/headFiles/overwriteLayoutScript.js"></script>
+  <link rel="icon" href="/test_site/favicon.png">
+</head>
 
+<body>
+  <div id="app">
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2">[Layout Nav]</li>
+          </ul>
         </div>
+      </nav>
+      <div id="content-wrapper">
+        <p><strong>Uses a front matter layout</strong></p>
+      </div>
+
+
+    </div>
     <footer>
-  <div class="text-center">
-    Layout footer
-  </div></footer></div>
+      <div class="text-center">
+        Layout footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -40,17 +55,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/testLayout/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testLayoutsOverride.html b/test/functional/test_site/expected/testLayoutsOverride.html
index f829f81a28..945ce4df30 100644
--- a/test/functional/test_site/expected/testLayoutsOverride.html
+++ b/test/functional/test_site/expected/testLayoutsOverride.html
@@ -1,34 +1,49 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Hello World</title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="STYLESHEET_LINK"><link rel="stylesheet" href="markbind/layouts/testLayout/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"><script src="/test_site/headFiles/overwriteLayoutScript.js"></script><link rel="icon" href="/test_site/favicon.png"></head>
-<body >
-<div id="app">
-    <div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2">[Layout Nav]</li></ul></div></nav>
-<div id="content-wrapper">
-<p><strong>Uses a site.json layout, overriding front matter</strong></p></div>
 
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hello World</title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="markbind/layouts/testLayout/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+  <script src="/test_site/headFiles/overwriteLayoutScript.js"></script>
+  <link rel="icon" href="/test_site/favicon.png">
+</head>
 
+<body>
+  <div id="app">
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2">[Layout Nav]</li>
+          </ul>
         </div>
+      </nav>
+      <div id="content-wrapper">
+        <p><strong>Uses a site.json layout, overriding front matter</strong></p>
+      </div>
+
+
+    </div>
     <footer>
-  <div class="text-center">
-    Layout footer
-  </div></footer></div>
+      <div class="text-center">
+        Layout footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -40,17 +55,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/testLayout/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
index abd9590c4c..429ef1de2a 100644
--- a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
+++ b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
@@ -1 +1,3 @@
-<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header"><h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel"></a></h2></template></panel>
\ No newline at end of file
+<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header">
+    <h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel"></a></h2>
+  </template></panel>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html b/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
index 9fe2c260d9..e80b7a53c8 100644
--- a/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
+++ b/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
@@ -1 +1 @@
-<h3 id="panel-normal-source-content-headings">Panel normal source content headings<a class="fa fa-anchor" href="#panel-normal-source-content-headings"></a></h3>
+<h3 id="panel-normal-source-content-headings">Panel normal source content headings<a class="fa fa-anchor" href="#panel-normal-source-content-headings"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html b/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
index 7c21ac9246..3f76bbdf60 100644
--- a/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
+++ b/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
@@ -1,3 +1,4 @@
 <div id="segment">
-<h3 id="panel-source-segment-content-headings">Panel source segment content headings<a class="fa fa-anchor" href="#panel-source-segment-content-headings"></a></h3></div>
-<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data<a class="fa fa-anchor" href="#this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data"></a></h3>
+  <h3 id="panel-source-segment-content-headings">Panel source segment content headings<a class="fa fa-anchor" href="#panel-source-segment-content-headings"></a></h3>
+</div>
+<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data<a class="fa fa-anchor" href="#this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html b/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
index a7dd99ef39..cd49919927 100644
--- a/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
+++ b/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
@@ -1 +1 @@
-<h3 id="boilerplate-test-for-panel-heading">boilerplate test for panel heading<a class="fa fa-anchor" href="#boilerplate-test-for-panel-heading"></a></h3>
+<h3 id="boilerplate-test-for-panel-heading">boilerplate test for panel heading<a class="fa fa-anchor" href="#boilerplate-test-for-panel-heading"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/notInside._include_.html b/test/functional/test_site/expected/testPanels/notInside._include_.html
index 2eaf7663a6..bacd089bd9 100644
--- a/test/functional/test_site/expected/testPanels/notInside._include_.html
+++ b/test/functional/test_site/expected/testPanels/notInside._include_.html
@@ -1 +1 @@
-<h3 id="heading-in-panel-boilerplate">heading in panel boilerplate<a class="fa fa-anchor" href="#heading-in-panel-boilerplate"></a></h3>
+<h3 id="heading-in-panel-boilerplate">heading in panel boilerplate<a class="fa fa-anchor" href="#heading-in-panel-boilerplate"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanelsWithImportedVariables.html b/test/functional/test_site/expected/testPanelsWithImportedVariables.html
index 8b6cbdc627..f89d516b21 100644
--- a/test/functional/test_site/expected/testPanelsWithImportedVariables.html
+++ b/test/functional/test_site/expected/testPanelsWithImportedVariables.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,21 +24,24 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<p>Refer to this comment: <a href="https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640">https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640</a></p>
-<div></div>
-Title
-<p><strong>Below panel is working</strong>
-<panel src="/test_site/testImportVariables._include_.html"></panel></p>
-<p><strong>Below should be a panel, but is now an error. Uncomment it to see the error.</strong></p>
-</div>
+      <div id="content-wrapper">
+        <p>Refer to this comment: <a href="https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640">https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640</a></p>
+        <div></div>
+        Title
+        <p><strong>Below panel is working</strong>
+          <panel src="/test_site/testImportVariables._include_.html"></panel>
+        </p>
+        <p><strong>Below should be a panel, but is now an error. Uncomment it to see the error.</strong></p>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -49,17 +53,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPlantUML.html b/test/functional/test_site/expected/testPlantUML.html
index ab2f5a59c7..ab3ae27fe3 100644
--- a/test/functional/test_site/expected/testPlantUML.html
+++ b/test/functional/test_site/expected/testPlantUML.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -55,9 +56,11 @@
       </div>
     </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -69,17 +72,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testThumbnails.html b/test/functional/test_site/expected/testThumbnails.html
index 80a3cf34ee..aba4858b6e 100644
--- a/test/functional/test_site/expected/testThumbnails.html
+++ b/test/functional/test_site/expected/testThumbnails.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,83 +24,120 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<p><strong>Thumbnail test</strong></p>
-<p><strong>Images</strong></p>
-<p><strong>Square thumb, size = 100 (default)</strong>
-<thumbnail src="http://placehold.it/800x600"></thumbnail></p>
-<p><strong>Square thumb with alt=&quot;Test&quot;</strong>
-<thumbnail alt="Test" src="/test_site/asdf"></thumbnail></p>
-<p><strong>Square thumb, size = 200</strong>
-<thumbnail src="http://placehold.it/800x600" size="200"></thumbnail></p>
-<p><strong>Circle thumbs, size = 100</strong>
-<thumbnail src="http://placehold.it/800x600" circle=""></thumbnail>
-<thumbnail src="http://placehold.it/100x300" circle=""></thumbnail></p>
-<p><strong>An actual image</strong>
-<thumbnail circle="" size="300" src="/test_site/images/deer.jpg"></thumbnail>
-<pic src="/test_site/images/deer.jpg" height="300"></pic></p>
-<hr>
-<p><strong>Broken link, still takes up the space it's supposed to</strong></p>
-<p><thumbnail src="/broken_link" border=""></thumbnail>
-<thumbnail src="http://placehold.it/300x100"></thumbnail></p>
-<hr>
-<p><strong>Borders</strong></p>
-<div class="table-responsive"><table class="markbind-table table table-bordered table-striped"><thead>
-<tr>
-<th>Thumbnail</th>
-<th>Attribute</th>
-<th>Description</th></tr></thead>
-<tbody>
-<tr>
-<td><thumbnail src="http://placehold.it/300x100"></thumbnail></td>
-<td></td>
-<td>no border</td></tr>
-<tr>
-<td><thumbnail border="3px solid red" src="http://placehold.it/300x100"></thumbnail></td>
-<td><code>border='3px solid red'</code></td>
-<td>3 pixel thick solid red line</td></tr>
-<tr>
-<td><thumbnail border="4px dotted blue" src="http://placehold.it/300x100"></thumbnail></td>
-<td><code>4px dotted blue</code></td>
-<td>4 pixel thick dotted blue line</td></tr></tbody></table></div><hr>
-<p><strong>Background</strong></p>
-<p><strong>Valid CSS properties</strong>
-<thumbnail background="lightblue" circle=""></thumbnail>
-<thumbnail background="#aaf" circle=""></thumbnail>
-<thumbnail background="rgba(120, 120, 200, 0.4)" circle=""></thumbnail></p>
-<p><strong>Invalid CSS properties</strong>
-<thumbnail background="asdf" border="1px solid black" circle=""></thumbnail></p>
-<p><strong>Empty</strong>
-<thumbnail background="" border="1px solid black" circle=""></thumbnail></p>
-<hr>
-<p><strong>Text/Emojis/Icons</strong></p>
-<p><strong>Text</strong>
-<thumbnail text="test" border="1px solid black" circle="">test</thumbnail></p>
-<p><strong>Markdown</strong>
-<thumbnail text="_test_" border="1px solid black" circle=""><em>test</em></thumbnail>
-<thumbnail text="**test**" border="1px solid black" circle=""><strong>test</strong></thumbnail></p>
-<p><strong>Emojis</strong>
-<thumbnail text=":x:" border="1px solid black" circle="">❌</thumbnail>
-<thumbnail text=":eggplant:" border="1px solid black" circle="">🍆</thumbnail></p>
-<p><strong>Icons</strong>
-<thumbnail text=":fab-github:" border="1px solid black" circle=""><span aria-hidden="true" class="fab fa-github"></span></thumbnail>
-<thumbnail text=":glyphicon-book:" background="#666" font-color="#eee" circle=""><span aria-hidden="true" class="glyphicon glyphicon-book"></span></thumbnail></p>
-<hr>
-<p><strong>font-size/font-color</strong></p>
-<p><strong>20px font-size</strong>
-<thumbnail text="test" border="1px solid black" font-size="20" circle="">test</thumbnail></p>
-<p><strong>40px font-size</strong>
-<thumbnail text="test" border="1px solid black" font-size="40" circle="">test</thumbnail></p>
-<p><strong>font-color</strong>
-<thumbnail text="blue" border="1px solid black" font-color="#669" circle="">blue</thumbnail>
-<thumbnail text="maroon" border="1px solid black" font-color="maroon" font-size="25" circle="">maroon</thumbnail></p></div>
+      <div id="content-wrapper">
+        <p><strong>Thumbnail test</strong></p>
+        <p><strong>Images</strong></p>
+        <p><strong>Square thumb, size = 100 (default)</strong>
+          <thumbnail src="http://placehold.it/800x600"></thumbnail>
+        </p>
+        <p><strong>Square thumb with alt=&quot;Test&quot;</strong>
+          <thumbnail alt="Test" src="/test_site/asdf"></thumbnail>
+        </p>
+        <p><strong>Square thumb, size = 200</strong>
+          <thumbnail src="http://placehold.it/800x600" size="200"></thumbnail>
+        </p>
+        <p><strong>Circle thumbs, size = 100</strong>
+          <thumbnail src="http://placehold.it/800x600" circle=""></thumbnail>
+          <thumbnail src="http://placehold.it/100x300" circle=""></thumbnail>
+        </p>
+        <p><strong>An actual image</strong>
+          <thumbnail circle="" size="300" src="/test_site/images/deer.jpg"></thumbnail>
+          <pic src="/test_site/images/deer.jpg" height="300"></pic>
+        </p>
+        <hr>
+        <p><strong>Broken link, still takes up the space it's supposed to</strong></p>
+        <p>
+          <thumbnail src="/broken_link" border=""></thumbnail>
+          <thumbnail src="http://placehold.it/300x100"></thumbnail>
+        </p>
+        <hr>
+        <p><strong>Borders</strong></p>
+        <div class="table-responsive">
+          <table class="markbind-table table table-bordered table-striped">
+            <thead>
+              <tr>
+                <th>Thumbnail</th>
+                <th>Attribute</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <thumbnail src="http://placehold.it/300x100"></thumbnail>
+                </td>
+                <td></td>
+                <td>no border</td>
+              </tr>
+              <tr>
+                <td>
+                  <thumbnail border="3px solid red" src="http://placehold.it/300x100"></thumbnail>
+                </td>
+                <td><code>border='3px solid red'</code></td>
+                <td>3 pixel thick solid red line</td>
+              </tr>
+              <tr>
+                <td>
+                  <thumbnail border="4px dotted blue" src="http://placehold.it/300x100"></thumbnail>
+                </td>
+                <td><code>4px dotted blue</code></td>
+                <td>4 pixel thick dotted blue line</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <hr>
+        <p><strong>Background</strong></p>
+        <p><strong>Valid CSS properties</strong>
+          <thumbnail background="lightblue" circle=""></thumbnail>
+          <thumbnail background="#aaf" circle=""></thumbnail>
+          <thumbnail background="rgba(120, 120, 200, 0.4)" circle=""></thumbnail>
+        </p>
+        <p><strong>Invalid CSS properties</strong>
+          <thumbnail background="asdf" border="1px solid black" circle=""></thumbnail>
+        </p>
+        <p><strong>Empty</strong>
+          <thumbnail background="" border="1px solid black" circle=""></thumbnail>
+        </p>
+        <hr>
+        <p><strong>Text/Emojis/Icons</strong></p>
+        <p><strong>Text</strong>
+          <thumbnail text="test" border="1px solid black" circle="">test</thumbnail>
+        </p>
+        <p><strong>Markdown</strong>
+          <thumbnail text="_test_" border="1px solid black" circle=""><em>test</em></thumbnail>
+          <thumbnail text="**test**" border="1px solid black" circle=""><strong>test</strong></thumbnail>
+        </p>
+        <p><strong>Emojis</strong>
+          <thumbnail text=":x:" border="1px solid black" circle="">❌</thumbnail>
+          <thumbnail text=":eggplant:" border="1px solid black" circle="">🍆</thumbnail>
+        </p>
+        <p><strong>Icons</strong>
+          <thumbnail text=":fab-github:" border="1px solid black" circle=""><span aria-hidden="true" class="fab fa-github"></span></thumbnail>
+          <thumbnail text=":glyphicon-book:" background="#666" font-color="#eee" circle=""><span aria-hidden="true" class="glyphicon glyphicon-book"></span></thumbnail>
+        </p>
+        <hr>
+        <p><strong>font-size/font-color</strong></p>
+        <p><strong>20px font-size</strong>
+          <thumbnail text="test" border="1px solid black" font-size="20" circle="">test</thumbnail>
+        </p>
+        <p><strong>40px font-size</strong>
+          <thumbnail text="test" border="1px solid black" font-size="40" circle="">test</thumbnail>
+        </p>
+        <p><strong>font-color</strong>
+          <thumbnail text="blue" border="1px solid black" font-color="#669" circle="">blue</thumbnail>
+          <thumbnail text="maroon" border="1px solid black" font-color="maroon" font-size="25" circle="">maroon</thumbnail>
+        </p>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -111,17 +149,23 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testTooltipSpacing.html b/test/functional/test_site/expected/testTooltipSpacing.html
index a917a29180..781866ad93 100644
--- a/test/functional/test_site/expected/testTooltipSpacing.html
+++ b/test/functional/test_site/expected/testTooltipSpacing.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,17 +24,21 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="fa fa-anchor" href="#569-stray-space-after-tooltip"></a></h1>
-<pre><code class="hljs"><span>&lt;tooltip&gt;tooltip&lt;/tooltip&gt;, test</span><span>&#x200B;</span><span>&lt;trigger&gt;trigger&lt;/trigger&gt;, test</span></code></pre><p><span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger">tooltip</span>, test</p>
-<p><span v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['undefined'].show()" class="trigger">trigger</span>, test</p></div>
+      <div id="content-wrapper">
+        <h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="fa fa-anchor" href="#569-stray-space-after-tooltip"></a></h1>
+        <pre><code class="hljs"><span>&lt;tooltip&gt;tooltip&lt;/tooltip&gt;, test</span><span>&#x200B;</span><span>&lt;trigger&gt;trigger&lt;/trigger&gt;, test</span></code></pre>
+        <p><span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger">tooltip</span>, test</p>
+        <p><span v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['undefined'].show()" class="trigger">trigger</span>, test</p>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -45,17 +50,23 @@ <h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="f
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/test_md_fragment.html b/test/functional/test_site/expected/test_md_fragment.html
index 2b796deee3..dd91092e7f 100644
--- a/test/functional/test_site/expected/test_md_fragment.html
+++ b/test/functional/test_site/expected/test_md_fragment.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="default-head-top">
   <meta charset="utf-8">
@@ -23,16 +24,19 @@
 <body>
   <div id="app">
     <div id="flex-body">
-        <div id="content-wrapper">
-<h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"></a></h1>
-<p>The <strong>quick</strong> brown fox jumps <em>over</em> the lazy dog.</p></div>
+      <div id="content-wrapper">
+        <h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"></a></h1>
+        <p>The <strong>quick</strong> brown fox jumps <em>over</em> the lazy dog.</p>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
-  <div class="text-center">
-    Default footer
-  </div></footer></div>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -44,17 +48,23 @@ <h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"><
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="SCRIPT_LINK"></script>
-    <script>alert("hello")</script>
-    
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-    
-      gtag('config', 'TRACKING-ID');
-    </script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site/site.json b/test/functional/test_site/site.json
index c7213b8fda..3f0610ea8e 100644
--- a/test/functional/test_site/site.json
+++ b/test/functional/test_site/site.json
@@ -1,6 +1,6 @@
 {
   "baseUrl": "/test_site",
-  "jsBeautify": true,
+  "htmlBeautify": true,
   "faviconPath": "favicon.png",
   "titlePrefix": "",
   "pages": [
diff --git a/test/functional/test_site/sub_site/site.json b/test/functional/test_site/sub_site/site.json
index ef308a1d04..ddc4845f56 100644
--- a/test/functional/test_site/sub_site/site.json
+++ b/test/functional/test_site/sub_site/site.json
@@ -1,6 +1,6 @@
 {
   "baseUrl": "/sub_site",
-  "jsBeautify": true,
+  "htmlBeautify": true,
   "pages": [
     {
       "src": "index.md",
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
index a1259ebcd6..7d43dcdbc0 100644
--- a/test/functional/test_site_algolia_plugin/expected/index.html
+++ b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -1,95 +1,122 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Hello World</title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
-<body >
-<div id="app">
-    <div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/test_site_algolia_plugin/index.html" class="site-nav__a current">Home <span aria-hidden="true" class="glyphicon glyphicon-home"></span></a></li></ul></div></nav>
-<div id="content-wrapper">
-<p><strong>Test Algolia plugin adds algolia-no-index classes</strong></p>
-<p><strong>Dropdowns should have algolia-no-index class</strong></p>
-<div class="temp-dropdown-placeholder">Dropdown</div><dropdown class="temp-dropdown algolia-no-index"><template slot="_header">Dropdown</template>
-  <li><a class="dropdown-item" href="/">One</a></li>
-  <li><a class="dropdown-item" href="/">Two</a></li></dropdown>
-<p><strong>Modal content should have algolia-no-index class</strong></p>
-<b-modal id="modal:trigger_id" ok-only="" size="" modal-class="mb-zoom" ref="modal:trigger_id"><template slot="modal-title">Modal</template>
-  Content should have `algolia-no-index` class
-</b-modal>
-<span for="modal:trigger_id" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal:trigger_id'].show()" class="trigger">Trigger should not have `algolia-no-index` class</span>
-<p><strong>Panels that are not expanded should have algolia-no-index class</strong></p>
-<panel class="algolia-no-index"><template slot="_header"><p>Panel</p></template>
-  Content
-</panel>
-<panel expanded=""><template slot="_header"><p>Panel</p></template>
-  Content
-</panel>
-<p><strong>Popover content should have algolia-no-index class</strong></p>
-<span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span>
-  <div data-mb-html-for="content">Content should have `algolia-no-index` class</div>
-  <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
-<span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span><span data-mb-html-for="content">Content as attribute does not require <code>algolia-no-index</code> class</span>
-  <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
-<p><strong>Question hint and answer should have algolia-no-index class</strong></p>
-<question>
-  Question should not have `algolia-no-index` class
-  <div slot="hint" class="algolia-no-index">Hint should have `algolia-no-index` class</div>
-  <div slot="answer" class="algolia-no-index">Answer should have `algolia-no-index` class</div></question>
-<p><strong>Tabs except first tab should have algolia-no-index class</strong></p>
-<tabs>
-  <tab><template slot="_header">First Tab</template>
-    Content<br>Content<br>Content<br>Content
-  </tab>
-  <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
-    Content<br>Content<br>Content<br>Content
-  </tab></tabs>
-<tabs>
-  <tab-group><template slot="_header">First Group</template>
-    <tab class="algolia-no-index"><template slot="_header">First Tab</template>
-      Content<br>Content<br>Content<br>Content
-    </tab>
-    <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
-      Content<br>Content<br>Content<br>Content
-    </tab></tab-group>
-  <tab-group class="algolia-no-index"><template slot="_header">Second Group</template>
-    <tab class="algolia-no-index"><template slot="_header">First Tab</template>
-      Content<br>Content<br>Content<br>Content
-    </tab>
-    <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
-      Content<br>Content<br>Content<br>Content
-    </tab></tab-group></tabs>
-<tabs>
-  <tab-group><template slot="_header">Outer One</template>
-    <tab class="algolia-no-index"><template slot="_header">First Tab</template>
-      Content<br>Content<br>Content<br>Content
-    </tab>
-    <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
-      Content<br>Content<br>Content<br>Content
-    </tab></tab-group>
-  <tab class="algolia-no-index"><template slot="_header">Outer Two</template>
-    Content<br>Content<br>Content<br>Content
-  </tab></tabs></div>
 
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hello World</title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+</head>
 
+<body>
+  <div id="app">
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/test_site_algolia_plugin/index.html" class="site-nav__a current">Home <span aria-hidden="true" class="glyphicon glyphicon-home"></span></a></li>
+          </ul>
         </div>
+      </nav>
+      <div id="content-wrapper">
+        <p><strong>Test Algolia plugin adds algolia-no-index classes</strong></p>
+        <p><strong>Dropdowns should have algolia-no-index class</strong></p>
+        <div class="temp-dropdown-placeholder">Dropdown</div>
+        <dropdown class="temp-dropdown algolia-no-index"><template slot="_header">Dropdown</template>
+          <li><a class="dropdown-item" href="/">One</a></li>
+          <li><a class="dropdown-item" href="/">Two</a></li>
+        </dropdown>
+        <p><strong>Modal content should have algolia-no-index class</strong></p>
+        <b-modal id="modal:trigger_id" ok-only="" size="" modal-class="mb-zoom" ref="modal:trigger_id"><template slot="modal-title">Modal</template>
+          Content should have `algolia-no-index` class
+        </b-modal>
+        <span for="modal:trigger_id" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal:trigger_id'].show()" class="trigger">Trigger should not have `algolia-no-index` class</span>
+        <p><strong>Panels that are not expanded should have algolia-no-index class</strong></p>
+        <panel class="algolia-no-index"><template slot="_header">
+            <p>Panel</p>
+          </template>
+          Content
+        </panel>
+        <panel expanded=""><template slot="_header">
+            <p>Panel</p>
+          </template>
+          Content
+        </panel>
+        <p><strong>Popover content should have algolia-no-index class</strong></p>
+        <span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span>
+          <div data-mb-html-for="content">Content should have `algolia-no-index` class</div>
+          <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
+        </span>
+        <span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger"><span data-mb-html-for="header">Title</span><span data-mb-html-for="content">Content as attribute does not require <code>algolia-no-index</code> class</span>
+          <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
+        <p><strong>Question hint and answer should have algolia-no-index class</strong></p>
+        <question>
+          Question should not have `algolia-no-index` class
+          <div slot="hint" class="algolia-no-index">Hint should have `algolia-no-index` class</div>
+          <div slot="answer" class="algolia-no-index">Answer should have `algolia-no-index` class</div>
+        </question>
+        <p><strong>Tabs except first tab should have algolia-no-index class</strong></p>
+        <tabs>
+          <tab><template slot="_header">First Tab</template>
+            Content<br>Content<br>Content<br>Content
+          </tab>
+          <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+            Content<br>Content<br>Content<br>Content
+          </tab>
+        </tabs>
+        <tabs>
+          <tab-group><template slot="_header">First Group</template>
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+              Content<br>Content<br>Content<br>Content
+            </tab>
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+              Content<br>Content<br>Content<br>Content
+            </tab>
+          </tab-group>
+          <tab-group class="algolia-no-index"><template slot="_header">Second Group</template>
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+              Content<br>Content<br>Content<br>Content
+            </tab>
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+              Content<br>Content<br>Content<br>Content
+            </tab>
+          </tab-group>
+        </tabs>
+        <tabs>
+          <tab-group><template slot="_header">Outer One</template>
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template>
+              Content<br>Content<br>Content<br>Content
+            </tab>
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template>
+              Content<br>Content<br>Content<br>Content
+            </tab>
+          </tab-group>
+          <tab class="algolia-no-index"><template slot="_header">Outer Two</template>
+            Content<br>Content<br>Content<br>Content
+          </tab>
+        </tabs>
+      </div>
+
+
+    </div>
     <footer>
-  <div class="text-center">
-    This is a dynamic height footer that supports markdown <span>😄</span>!
-  </div></footer></div>
+      <div class="text-center">
+        This is a dynamic height footer that supports markdown <span>😄</span>!
+      </div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -101,18 +128,19 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-    <script>
-    function initAlgolia() {
-      docsearch({
-        apiKey: "25626fae796133dc1e734c6bcaaeac3c",
-        indexName: "docsearch",
-        inputSelector: "#algolia-search-input",
-        algoliaOptions: {},
-        debug: false,
-      });
-    }
-    MarkBind.afterSetup(initAlgolia);
-  </script>
+<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script>
+  function initAlgolia() {
+    docsearch({
+      apiKey: "25626fae796133dc1e734c6bcaaeac3c",
+      indexName: "docsearch",
+      inputSelector: "#algolia-search-input",
+      algoliaOptions: {},
+      debug: false,
+    });
+  }
+  MarkBind.afterSetup(initAlgolia);
+</script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_algolia_plugin/site.json b/test/functional/test_site_algolia_plugin/site.json
index ed2fa41f99..5ac3f5ad24 100644
--- a/test/functional/test_site_algolia_plugin/site.json
+++ b/test/functional/test_site_algolia_plugin/site.json
@@ -1,6 +1,6 @@
 {
   "baseUrl": "/test_site_algolia_plugin",
-  "jsBeautify": true,
+  "htmlBeautify": true,
   "titlePrefix": "",
   "ignore": [
     "_markbind/layouts/*",
diff --git a/test/functional/test_site_expressive_layout/expected/index.html b/test/functional/test_site_expressive_layout/expected/index.html
index 71159042a7..17e3bf1979 100644
--- a/test/functional/test_site_expressive_layout/expected/index.html
+++ b/test/functional/test_site_expressive_layout/expected/index.html
@@ -1,41 +1,51 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Landing Page</title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"></head>
-<body >
-<div id="app">
-    <div id="flex-body">
-        <div id="content-wrapper">
-<div></div>
-<div></div>
-<p>Variable from layout</p>
-<p>This is an importedVar</p>
-<panel type="success" minimized=""><template slot="_header"><p>Expanded panel</p></template><template slot="_alt"><p>Minimized panel</p></template>
-  Math formulas
-</panel>
-<div></div>
-<h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
-<p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
-<p>Variable from page</p>
-<p>Bottom Content</p>
-<div>
-<div></div>
-<p>This content can be imported to the bottom of the page</p></div></div>
 
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Landing Page</title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+</head>
 
+<body>
+  <div id="app">
+    <div id="flex-body">
+      <div id="content-wrapper">
+        <div></div>
+        <div></div>
+        <p>Variable from layout</p>
+        <p>This is an importedVar</p>
+        <panel type="success" minimized=""><template slot="_header">
+            <p>Expanded panel</p>
+          </template><template slot="_alt">
+            <p>Minimized panel</p>
+          </template>
+          Math formulas
+        </panel>
+        <div></div>
+        <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
+        <p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
+        <p>Variable from page</p>
+        <p>Bottom Content</p>
+        <div>
+          <div></div>
+          <p>This content can be imported to the bottom of the page</p>
         </div>
+      </div>
+
+
+    </div>
     <footer>
 
       <div class="text-center">
@@ -54,4 +64,5 @@ <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#w
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_expressive_layout/site.json b/test/functional/test_site_expressive_layout/site.json
index 5b21662353..4ace31252b 100755
--- a/test/functional/test_site_expressive_layout/site.json
+++ b/test/functional/test_site_expressive_layout/site.json
@@ -1,6 +1,6 @@
 {
   "baseUrl": "/test_site_expressive_layout",
-  "jsBeautify": true,
+  "htmlBeautify": true,
   "titlePrefix": "",
   "ignore": [
     "_markbind/layouts/*",
diff --git a/test/functional/test_site_special_tags/expected/index.html b/test/functional/test_site_special_tags/expected/index.html
index 864479c2d4..c6cc380788 100644
--- a/test/functional/test_site_special_tags/expected/index.html
+++ b/test/functional/test_site_special_tags/expected/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -23,27 +24,26 @@
       <div id="content-wrapper">
         <h1 id="functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags">Functional test for htmlparser2 and markdown-it patches for special tags<a class="fa fa-anchor" href="#functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags"></a></h1>
         <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with the commonmark spec<a class="fa fa-anchor" href="#so-far-as-to-comply-with-the-commonmark-spec"></a></h2>
-        <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;script&gt;</code> tag.<br> There should be an alert with the value of 2 as well.</p>
+        <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;script&gt;</code> tag.<br>
+          There should be an alert with the value of 2 as well.</p>
         <script>
           let x = 1;
 
-x += 1;
-alert(x);
-</script>
-<hr>
-<p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;style&gt;</code> tag.</p>
-<style>
-
-.bigger-text {
-  font-size: 10em;
-}
-
-</style>
-<hr>
-<p>There should be text between this and the next <code>&lt;hr&gt;</code> tag, since it is a special tag.
-All text should appear in the browser window as a single line,
-save for the comment which the browser still interprets. (but will be in the expected output)</p>
-<testtag>!success
+          x += 1;
+          alert(x);
+        </script>
+        <hr>
+        <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;style&gt;</code> tag.</p>
+        <style>
+          .bigger-text {
+            font-size: 10em;
+          }
+        </style>
+        <hr>
+        <p>There should be text between this and the next <code>&lt;hr&gt;</code> tag, since it is a special tag.
+          All text should appear in the browser window as a single line,
+          save for the comment which the browser still interprets. (but will be in the expected output)</p>
+        <testtag>!success
 
 <these>
 some text
@@ -58,16 +58,16 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
 */
 
 success!</testtag>
-<hr>
-<p>This has the same content has the previous test, but it is <strong>not</strong> a special tag.
-The html comment <code>&lt;!-- --&gt;</code> should disappear in the expected output.
-The line <code>some text</code> should appear as per normal, and not wrapped by a paragraph since
-a html tag precedes it without a blank line.
-The other lines should be parsed as markdown paragraphs, as per commonmark spec.</p>
-<abc>
-<these>
-some text
-</these>
+        <hr>
+        <p>This has the same content has the previous test, but it is <strong>not</strong> a special tag.
+          The html comment <code>&lt;!-- --&gt;</code> should disappear in the expected output.
+          The line <code>some text</code> should appear as per normal, and not wrapped by a paragraph since
+          a html tag precedes it without a blank line.
+          The other lines should be parsed as markdown paragraphs, as per commonmark spec.</p>
+        <abc>
+          <these>
+            some text
+          </these>
 
           <p>//</p>
           <p>/*
@@ -94,10 +94,12 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
 <p>if (x &lt;= 5) {
 alert(x);
 }</p>
-<p>success!</testtag></div>
-<hr></div>
+<p>success!</testtag>
         </div>
+        <hr>
+      </div>
     </div>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -110,4 +112,5 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_special_tags/site.json b/test/functional/test_site_special_tags/site.json
index 76e8b7a8db..c66f0a2f94 100644
--- a/test/functional/test_site_special_tags/site.json
+++ b/test/functional/test_site_special_tags/site.json
@@ -1,5 +1,5 @@
 {
-  "jsBeautify": true,
+  "htmlBeautify": true,
   "ignore": [
     "_markbind/layouts/*",
     "_markbind/logs/*",

From b66571d59e30b28e3880c0b623e0ebc0d612da94 Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Mon, 23 Mar 2020 13:56:10 +0800
Subject: [PATCH 06/11] Update docs

---
 docs/userGuide/siteConfiguration.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/userGuide/siteConfiguration.md b/docs/userGuide/siteConfiguration.md
index 9985297273..7b041bbfae 100644
--- a/docs/userGuide/siteConfiguration.md
+++ b/docs/userGuide/siteConfiguration.md
@@ -206,6 +206,13 @@ The example above uses tags as an example of configuring plugin settings, refer
 
 **Toggles-on html beautification done by [js-beautify](https://github.com/beautify-web/js-beautify) for html files generated by MarkBind.** By default, MarkBind turns this option off to improve the performance of the MarkBind `build` process. 
 However, toggling-on this option allows the user to edit the post-build HTML files in a friendly manner (through proper indentation of the code, for example). 
+<br>
+To toggle on the option, add the following to `site.json` - 
+```js
+...
+"htmlBeautify": true,
+...
+```
 
 #### **`timeZone`**
 

From 90a822054e49b50a8d81174aac881e6d6675424f Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Mon, 23 Mar 2020 14:37:41 +0800
Subject: [PATCH 07/11] Update functional tests

---
 test/functional/test_site/expected/index.html | 63 +++----------------
 .../expected/index.html                       | 10 ++-
 2 files changed, 19 insertions(+), 54 deletions(-)

diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index 30b51bde69..06836d9e75 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -262,6 +262,12 @@ <h1 id="heading-with-hidden-keyword">Heading with hidden keyword<a class="fa fa-
 </div>
 <p><strong>Div with tag matching general tag and specific tag (Hidden)</strong></p>
 
+            <p><strong>Div with tag matching front matter tag overridden by matching site tag</strong></p>
+            <div tags="tag-site-override-shown">
+              Div with tag matching front matter tag overridden by matching site tag
+            </div>
+            <p><strong>Div with tag matching general front matter tag not overridden by matching specific site tag (Hidden)</strong></p>
+
             <p><strong>Div with tag matching general front matter tag overridden by matching specific site tag</strong></p>
             <div tags="tag-site-override-shown">
               Div with tag matching general front matter tag overridden by matching specific site tag
@@ -310,7 +316,9 @@ <h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within
             <p>Like static include, pages within the site should be able to use files located in folders within boilerplate.</p>
             <p>Also, the boilerplate file name (e.g. <code>inside.md</code>) and the file that it is supposed to act as (<code>notInside.md</code>) can be different.</p>
             <p>This file should behaves as if it is in the <code>requirements</code> folder:</p>
-            <panel src="/test_site/requirements/NonFunctionalRequirements._include_.html"><template slot="_header"><p>Tested with the folllowing include</p></template>
+            <panel src="/test_site/requirements/NonFunctionalRequirements._include_.html"><template slot="_header">
+                <p>Tested with the folllowing include</p>
+              </template>
               <p></p>
             </panel>
           </div>
@@ -679,58 +687,6 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
         </section>
       </div>
 
-          <popover id="pop:footnote3">
-            <div slot="content">
-              <p>Inlines notes are easier to write, since
-                you don't have to pick an identifier and move down to type the
-                note.</p>
-            </div>
-          </popover>
-        </section>
-      </div>
-      <nav id="page-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-left-grey nav-inner position-sticky slim-scroll">
-          <a class="navbar-brand page-nav-title" href="#">Testing Page Navigation</a>
-          <nav class="nav nav-pills flex-column my-0 small no-flex-wrap">
-            <a class="nav-link py-1" href="#heading-with-multiple-keywords">Heading with multiple keywords&#x200E;</a>
-            <a class="nav-link py-1" href="#heading-with-keyword-in-panel">Heading with keyword in panel&#x200E;</a>
-            <a class="nav-link py-1" href="#panel-with-heading">Panel with heading&#x200E;</a>
-            <a class="nav-link py-1" href="#panel-without-heading-with-keyword">Panel without heading with keyword&#x200E;</a>
-            <a class="nav-link py-1" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading&#x200E;</a>
-            <a class="nav-link py-1" href="#panel-with-heading-with-keyword">Panel with heading with keyword&#x200E;</a>
-            <a class="nav-link py-1" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading&#x200E;</a>
-            <a class="nav-link py-1" href="#heading-with-included-keyword">Heading with included keyword&#x200E;</a>
-            <a class="nav-link py-1" href="#included-heading">Included Heading&#x200E;</a>
-            <a class="nav-link py-1" href="#heading-with-nested-keyword">Heading with nested keyword&#x200E;</a>
-            <a class="nav-link py-1" href="#heading-with-hidden-keyword">Heading with hidden keyword&#x200E;</a>
-            <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
-              <a class="nav-link py-1" href="#establishing-requirements">Establishing Requirements&#x200E;</a>
-              <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
-                <a class="nav-link py-1" href="#brainstorming">Brainstorming&#x200E;</a>
-                <a class="nav-link py-1" href="#user-surveys">User surveys&#x200E;</a>
-                <a class="nav-link py-1" href="#focus-groups">Focus groups&#x200E;</a>
-              </nav>
-            </nav>
-            <a class="nav-link py-1" href="#path-within-the-boilerplate-folder-is-separately-specified">Path within the boilerplate folder is separately specified&#x200E;</a>
-            <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
-              <a class="nav-link py-1" href="#feature-list">Feature list&#x200E;</a>
-              <a class="nav-link py-1" href="#panel-without-src-header">Panel without src header&#x200E;</a>
-              <a class="nav-link py-1" href="#panel-with-normal-src-header">Panel with normal src header&#x200E;</a>
-              <a class="nav-link py-1" href="#panel-with-src-from-a-page-segment-header">Panel with src from a page segment header&#x200E;</a>
-              <a class="nav-link py-1" href="#boilerplate-referencing">Boilerplate referencing&#x200E;</a>
-              <a class="nav-link py-1" href="#referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate&#x200E;</a>
-              <a class="nav-link py-1" href="#outer-nested-panel">Outer nested panel&#x200E;</a>
-              <a class="nav-link py-1" href="#outer-nested-panel-without-src">Outer nested panel without src&#x200E;</a>
-              <a class="nav-link py-1" href="#inner-panel-header-without-src">Inner panel header without src&#x200E;</a>
-              <a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header&#x200E;</a>
-              <a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header&#x200E;</a>
-              <a class="nav-link py-1" href="#panel-inside-modal">Panel inside modal&#x200E;</a>
-              <a class="nav-link py-1" href="#unexpanded-panel-header">Unexpanded panel header&#x200E;</a>
-            </nav>
-            <a class="nav-link py-1" href="#markbind-plugin-pre-render">Markbind Plugin Pre-render&#x200E;</a>
-            <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
-              <a class="nav-link py-1" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed&#x200E;</a>
-            </nav>
 
 
       <nav id="page-nav" class="navbar navbar-light bg-transparent">
@@ -756,6 +712,7 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
                 <a class="nav-link py-1" href="#focus-groups">Focus groups&#x200E;</a>
               </nav>
             </nav>
+            <a class="nav-link py-1" href="#path-within-the-boilerplate-folder-is-separately-specified">Path within the boilerplate folder is separately specified&#x200E;</a>
             <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
               <a class="nav-link py-1" href="#feature-list">Feature list&#x200E;</a>
               <a class="nav-link py-1" href="#panel-without-src-header">Panel without src header&#x200E;</a>
diff --git a/test/functional/test_site_special_tags/expected/index.html b/test/functional/test_site_special_tags/expected/index.html
index c6cc380788..00cd5ea7df 100644
--- a/test/functional/test_site_special_tags/expected/index.html
+++ b/test/functional/test_site_special_tags/expected/index.html
@@ -25,7 +25,7 @@
         <h1 id="functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags">Functional test for htmlparser2 and markdown-it patches for special tags<a class="fa fa-anchor" href="#functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags"></a></h1>
         <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with the commonmark spec<a class="fa fa-anchor" href="#so-far-as-to-comply-with-the-commonmark-spec"></a></h2>
         <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;script&gt;</code> tag.<br>
-          There should be an alert with the value of 2 as well.</p>
+          There should be an alert with the value of 2 as well.<br></p>
         <script>
           let x = 1;
 
@@ -43,6 +43,14 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
         <p>There should be text between this and the next <code>&lt;hr&gt;</code> tag, since it is a special tag.
           All text should appear in the browser window as a single line,
           save for the comment which the browser still interprets. (but will be in the expected output)</p>
+        <mustache>
+raw
+
+!success!success This should be enclosed in success string success!success!
+
+!success This should also be enclosed in success strings success!success!success!
+endraw
+</mustache>
         <testtag>!success
 
 <these>

From cf529b6a383f76658ce5994f2353cd2618171e8c Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Mon, 23 Mar 2020 16:24:59 +0800
Subject: [PATCH 08/11] Resolve conflicts

---
 .../test_site/expected/bugs/index.html        |  1 +
 test/functional/test_site/expected/index.html | 39 ++-----------------
 .../sub_site/nested_sub_site/index.html       |  2 +
 .../test_site/expected/testCodeBlocks.html    |  2 +
 .../expected/index.html                       |  2 +-
 .../expected/index.html                       | 13 ++++---
 6 files changed, 16 insertions(+), 43 deletions(-)

diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
index 0b5719d8b9..80288776b9 100644
--- a/test/functional/test_site/expected/bugs/index.html
+++ b/test/functional/test_site/expected/bugs/index.html
@@ -34,6 +34,7 @@
         <br></div>
     </header>
     <div id="flex-body">
+
       <div id="content-wrapper">
         <div class="website-content">
           <p><strong>Bug Description</strong></p>
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index 06836d9e75..f72ee82179 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -496,41 +496,6 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
             <p><strong>Test missing variable with default</strong></p>
             <p>Missing Variable</p>
           </div>
-          <p><strong>Trimmed include</strong></p>
-          <p><strong><span>Fragment with leading spaces and newline</span></strong></p>
-          <p><strong>Trimmed include fragment</strong></p>
-          <p><strong>Before | <span>Fragment with leading spaces and newline</span> | After</strong></p>
-          <p><strong>Include with custom variables</strong></p>
-          <div>
-            <p><strong>Test included variable as include attribute</strong></p>
-            <p>Included variable as include attribute</p>
-            <p><strong>Test included variable</strong></p>
-            <p>Included variable</p>
-            <p><strong>Test included variable with markdown</strong></p>
-            <p><strong><strong>Included variable with markdown</strong></strong></p>
-            <p><strong>Test included variable as attribute</strong></p>
-            <p style="color: blue">Test</p>
-            <p><strong>Test included variable as html element</strong></p>
-            <p><span>Included variable within html element</span></p>
-            <p><strong>Test included variable overridden by <a href="http://variables.md">variables.md</a></strong></p>
-            <p>Global Variable Overriding Included Variable</p>
-            <p><strong>Test included variables in included file</strong></p>
-            <div>
-              <p>Included variable in outer included file</p>
-              <p>Included variable overriding inner variable</p>
-            </div>
-            <p><strong>Inner included variables should not leak into other files</strong></p>
-            <div>
-              <p>Should be blank:</p>
-            </div>
-            <p><strong>Test included variable with global variable</strong></p>
-            <p>Included variable with Global Variable</p>
-            <p><strong>Test included variable overridden by set</strong></p>
-            <p>Inner variable overridden by set
-              Global variable overridden by set</p>
-            <p><strong>Test missing variable with default</strong></p>
-            <p>Missing Variable</p>
-          </div>
           <p><strong>Included variables should not leak into other files</strong></p>
           <div>
             <p>Should be blank:</p>
@@ -589,7 +554,9 @@ <h2 id="panel-with-src-from-another-markbind-site-header-2">Panel with src from
         <p><strong>Modal with panel inside</strong></p>
         <p><span for="modal-with-panel" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal-with-panel'].show()" class="trigger">trigger</span></p>
         <b-modal id="modal-with-panel" hide-footer="" size="" modal-class="mb-zoom" ref="modal-with-panel"><template slot="modal-title">modal title with panel inside</template>
-          <panel expanded="" id="panel-inside-modal"><template slot="_header"><h2 id="panel-inside-modal">Panel inside modal<a class="fa fa-anchor" href="#panel-inside-modal"></a></h2></template>
+          <panel expanded="" id="panel-inside-modal"><template slot="_header">
+              <h2 id="panel-inside-modal">Panel inside modal<a class="fa fa-anchor" href="#panel-inside-modal"></a></h2>
+            </template>
             <p><strong>Panel content inside modal</strong></p>
           </panel>
         </b-modal>
diff --git a/test/functional/test_site/expected/sub_site/nested_sub_site/index.html b/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
index 14d668a736..b88b6d4452 100644
--- a/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
+++ b/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
@@ -32,6 +32,8 @@
           <p>The base url in the nested_sub_site page's include is /test_site/sub_site/nested_sub_site.</p>
         </div>
       </div>
+
+
     </div>
     <footer>
       <div class="text-center">
diff --git a/test/functional/test_site/expected/testCodeBlocks.html b/test/functional/test_site/expected/testCodeBlocks.html
index d6ca3bb6e6..3448479b12 100644
--- a/test/functional/test_site/expected/testCodeBlocks.html
+++ b/test/functional/test_site/expected/testCodeBlocks.html
@@ -53,6 +53,8 @@
           </div>
         </div>
       </div>
+
+
     </div>
     <footer>
       <div class="text-center">
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
index 7d43dcdbc0..749ab70c9b 100644
--- a/test/functional/test_site_algolia_plugin/expected/index.html
+++ b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -39,7 +39,7 @@
           <li><a class="dropdown-item" href="/">Two</a></li>
         </dropdown>
         <p><strong>Modal content should have algolia-no-index class</strong></p>
-        <b-modal id="modal:trigger_id" ok-only="" size="" modal-class="mb-zoom" ref="modal:trigger_id"><template slot="modal-title">Modal</template>
+        <b-modal id="modal:trigger_id" hide-footer="" size="" modal-class="mb-zoom" ref="modal:trigger_id"><template slot="modal-title">Modal</template>
           Content should have `algolia-no-index` class
         </b-modal>
         <span for="modal:trigger_id" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal:trigger_id'].show()" class="trigger">Trigger should not have `algolia-no-index` class</span>
diff --git a/test/functional/test_site_special_tags/expected/index.html b/test/functional/test_site_special_tags/expected/index.html
index 00cd5ea7df..a314f98f79 100644
--- a/test/functional/test_site_special_tags/expected/index.html
+++ b/test/functional/test_site_special_tags/expected/index.html
@@ -25,7 +25,7 @@
         <h1 id="functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags">Functional test for htmlparser2 and markdown-it patches for special tags<a class="fa fa-anchor" href="#functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags"></a></h1>
         <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with the commonmark spec<a class="fa fa-anchor" href="#so-far-as-to-comply-with-the-commonmark-spec"></a></h2>
         <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;script&gt;</code> tag.<br>
-          There should be an alert with the value of 2 as well.<br></p>
+          There should be an alert with the value of 2 as well.</p>
         <script>
           let x = 1;
 
@@ -84,8 +84,9 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
           </p>
         </abc>
         <hr>
-        <p>There are two self closing special tags below, which should display nothing, but are present in the output. There is then one special tag with both and opening and closing tag with some text in it (<code>lorem ipsum...</code>). Note that script
-          and style tags are still not allowed to be self-closing, as per the html5 spec.</p>
+        <p>There are two self closing special tags below, which should display nothing, but are present in the output.
+          There is then one special tag with both and opening and closing tag with some text in it (<code>lorem ipsum...</code>).
+          Note that script and style tags are still not allowed to be self-closing, as per the html5 spec.</p>
         <testselfclosingtag></testselfclosingtag>
         <testselfclosingtag></testselfclosingtag>
         <testselfclosingtag>
@@ -93,9 +94,9 @@ <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with t
 Lorem ipsum lorem ipsum
 </testselfclosingtag>
         <hr>
-        <p>This should pass the htmlparser2 patch but not the markdown-it patch as it violates commonmark.<br> All lines after the first <code>!success</code> wrapping text will be wrapped in a <code>&lt;p&gt;...&lt;/p&gt;</code> tag as it is parsed as a
-          markdown paragraph.
-        </p>
+        <p>This should pass the htmlparser2 patch but not the markdown-it patch as it violates commonmark.<br>
+          All lines after the first <code>!success</code> wrapping text will be wrapped in a <code>&lt;p&gt;...&lt;/p&gt;</code> tag as it is
+          parsed as a markdown paragraph.</p>
         <div>
           <testtag>!success
 <p>let x = 2;</p>

From 703b237d9a031fe9c417ecf572971fe0c35d1622 Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Thu, 2 Apr 2020 20:12:23 +0800
Subject: [PATCH 09/11] Beautify by default

---
 docs/userGuide/siteConfiguration.md           | 10 +--
 src/Page.js                                   | 14 +--
 src/Site.js                                   |  2 +-
 test/functional/test_site/site.json           |  1 -
 test/functional/test_site/sub_site/site.json  |  1 -
 .../test_site_algolia_plugin/site.json        |  1 -
 .../test_site_convert/expected/Home.html      | 80 ++++++++++-------
 .../test_site_convert/expected/Page-1.html    | 80 ++++++++++-------
 .../test_site_convert/expected/_Footer.html   | 80 ++++++++++-------
 .../test_site_convert/expected/_Sidebar.html  | 85 ++++++++++++-------
 .../test_site_convert/expected/about.html     | 82 +++++++++++-------
 .../expected/contents/topic1.html             | 23 +++--
 .../expected/contents/topic2.html             | 20 +++--
 .../expected/contents/topic3a.html            | 20 +++--
 .../expected/contents/topic3b.html            | 20 +++--
 .../test_site_convert/expected/index.html     | 80 ++++++++++-------
 .../test_site_expressive_layout/site.json     |  1 -
 .../test_site_special_tags/site.json          |  1 -
 .../expected/contents/topic1.html             | 74 ++++++++++------
 .../expected/contents/topic2.html             | 71 ++++++++++------
 .../expected/contents/topic3a.html            | 71 ++++++++++------
 .../expected/contents/topic3b.html            | 71 ++++++++++------
 .../test_default/expected/index.html          |  4 +-
 .../test_minimal/expected/index.html          | 55 +++++++-----
 24 files changed, 578 insertions(+), 369 deletions(-)

diff --git a/docs/userGuide/siteConfiguration.md b/docs/userGuide/siteConfiguration.md
index 7b041bbfae..f4fcd142e8 100644
--- a/docs/userGuide/siteConfiguration.md
+++ b/docs/userGuide/siteConfiguration.md
@@ -202,15 +202,15 @@ The example above uses tags as an example of configuring plugin settings, refer
 
 **Specifies that the website should use MarkBind's search functionality.** Default: `true`. See [User Guide: Making the Site Searchable](makingTheSiteSearchable.html) for more details.
 
-#### **`htmlBeautify`**
+#### **`disableHtmlBeautify`**
 
-**Toggles-on html beautification done by [js-beautify](https://github.com/beautify-web/js-beautify) for html files generated by MarkBind.** By default, MarkBind turns this option off to improve the performance of the MarkBind `build` process. 
-However, toggling-on this option allows the user to edit the post-build HTML files in a friendly manner (through proper indentation of the code, for example). 
+**Turn off html beautification done by [js-beautify](https://github.com/beautify-web/js-beautify) for html files generated by MarkBind.** By default, MarkBind beautifies the HTML files it generates, which helps in user-friendly viewing and editing.
+Users can choose to turn this option off to improve the performance of the MarkBind `build` process.  
 <br>
-To toggle on the option, add the following to `site.json` - 
+To turn off the option, add the following to `site.json` - 
 ```js
 ...
-"htmlBeautify": true,
+"disableHtmlBeautify": true,
 ...
 ```
 
diff --git a/src/Page.js b/src/Page.js
index 3b8cbc4979..e9d8d6d817 100644
--- a/src/Page.js
+++ b/src/Page.js
@@ -62,7 +62,7 @@ class Page {
     this.content = pageConfig.content || '';
     this.faviconUrl = pageConfig.faviconUrl;
     this.frontmatterOverride = pageConfig.frontmatter || {};
-    this.htmlBeautify = pageConfig.htmlBeautify;
+    this.disableHtmlBeautify = pageConfig.disableHtmlBeautify;
     this.layout = pageConfig.layout;
     this.layoutsAssetPath = pageConfig.layoutsAssetPath;
     this.rootPath = pageConfig.rootPath;
@@ -822,9 +822,9 @@ class Page {
           this.buildPageNav();
 
           const renderedTemplate = this.template.render(this.prepareTemplateData());
-          const outputTemplateHTML = this.htmlBeautify
-            ? htmlBeautify(renderedTemplate, Page.htmlBeautifyOptions)
-            : renderedTemplate;
+          const outputTemplateHTML = this.disableHtmlBeautify
+            ? renderedTemplate
+            : htmlBeautify(renderedTemplate, Page.htmlBeautifyOptions);
 
           return fs.outputFileAsync(this.resultPath, outputTemplateHTML);
         })
@@ -1073,9 +1073,9 @@ class Page {
             baseUrl,
             hostBaseUrl,
           });
-          const outputContentHTML = this.htmlBeautify
-            ? htmlBeautify(content, Page.htmlBeautifyOptions)
-            : content;
+          const outputContentHTML = this.disableHtmlBeautify
+            ? content
+            : htmlBeautify(content, Page.htmlBeautifyOptions);
           return fs.outputFileAsync(resultPath, outputContentHTML);
         })
         .then(() => {
diff --git a/src/Site.js b/src/Site.js
index 8f91dc26f3..e493f1399a 100644
--- a/src/Site.js
+++ b/src/Site.js
@@ -237,7 +237,7 @@ class Site {
       faviconUrl: config.faviconUrl,
       frontmatter: config.frontmatter,
       globalOverride: this.siteConfig.globalOverride || {},
-      htmlBeautify: this.siteConfig.htmlBeautify,
+      disableHtmlBeautify: this.siteConfig.disableHtmlBeautify,
       pageTemplate: this.pageTemplate,
       plugins: this.plugins || {},
       rootPath: this.rootPath,
diff --git a/test/functional/test_site/site.json b/test/functional/test_site/site.json
index 3f0610ea8e..d67f514bac 100644
--- a/test/functional/test_site/site.json
+++ b/test/functional/test_site/site.json
@@ -1,6 +1,5 @@
 {
   "baseUrl": "/test_site",
-  "htmlBeautify": true,
   "faviconPath": "favicon.png",
   "titlePrefix": "",
   "pages": [
diff --git a/test/functional/test_site/sub_site/site.json b/test/functional/test_site/sub_site/site.json
index ddc4845f56..7fa3ebccaf 100644
--- a/test/functional/test_site/sub_site/site.json
+++ b/test/functional/test_site/sub_site/site.json
@@ -1,6 +1,5 @@
 {
   "baseUrl": "/sub_site",
-  "htmlBeautify": true,
   "pages": [
     {
       "src": "index.md",
diff --git a/test/functional/test_site_algolia_plugin/site.json b/test/functional/test_site_algolia_plugin/site.json
index 5ac3f5ad24..4f0af780da 100644
--- a/test/functional/test_site_algolia_plugin/site.json
+++ b/test/functional/test_site_algolia_plugin/site.json
@@ -1,6 +1,5 @@
 {
   "baseUrl": "/test_site_algolia_plugin",
-  "htmlBeautify": true,
   "titlePrefix": "",
   "ignore": [
     "_markbind/layouts/*",
diff --git a/test/functional/test_site_convert/expected/Home.html b/test/functional/test_site_convert/expected/Home.html
index 094d4e0593..119b72afbf 100644
--- a/test/functional/test_site_convert/expected/Home.html
+++ b/test/functional/test_site_convert/expected/Home.html
@@ -1,40 +1,57 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title></title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
-<body >
-<div id="app">
-    <header><navbar placement="top" type="inverse" class="temp-navbar">
-  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-  <li><a href="/index.html" class="nav-link">HOME</a></li>
-  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-  <li slot="right">
-    <form class="navbar-form">
-      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2">[[Home]]</li>
-<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-<div id="content-wrapper">
-<p>Welcome to the test-deploy wiki!</p></div>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title></title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+</head>
 
+<body>
+  <div id="app">
+    <header>
+      <navbar placement="top" type="inverse" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+        <li><a href="/index.html" class="nav-link">HOME</a></li>
+        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2">[[Home]]</li>
+            <li class="mt-2">[[Page-1]]</li>
+          </ul>
         </div>
+      </nav>
+
+      <div id="content-wrapper">
+        <p>Welcome to the test-deploy wiki!</p>
+      </div>
+
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -47,4 +64,5 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/Page-1.html b/test/functional/test_site_convert/expected/Page-1.html
index fdadbe87b6..6b0baac2fe 100644
--- a/test/functional/test_site_convert/expected/Page-1.html
+++ b/test/functional/test_site_convert/expected/Page-1.html
@@ -1,40 +1,57 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title></title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
-<body >
-<div id="app">
-    <header><navbar placement="top" type="inverse" class="temp-navbar">
-  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-  <li><a href="/index.html" class="nav-link">HOME</a></li>
-  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-  <li slot="right">
-    <form class="navbar-form">
-      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2">[[Home]]</li>
-<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-<div id="content-wrapper">
-<h1 id="page-1">Page 1<a class="fa fa-anchor" href="#page-1"></a></h1></div>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title></title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+</head>
 
+<body>
+  <div id="app">
+    <header>
+      <navbar placement="top" type="inverse" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+        <li><a href="/index.html" class="nav-link">HOME</a></li>
+        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2">[[Home]]</li>
+            <li class="mt-2">[[Page-1]]</li>
+          </ul>
         </div>
+      </nav>
+
+      <div id="content-wrapper">
+        <h1 id="page-1">Page 1<a class="fa fa-anchor" href="#page-1"></a></h1>
+      </div>
+
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -47,4 +64,5 @@ <h1 id="page-1">Page 1<a class="fa fa-anchor" href="#page-1"></a></h1></div>
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/_Footer.html b/test/functional/test_site_convert/expected/_Footer.html
index 5ab3838212..f496a01983 100644
--- a/test/functional/test_site_convert/expected/_Footer.html
+++ b/test/functional/test_site_convert/expected/_Footer.html
@@ -1,40 +1,57 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title></title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
-<body >
-<div id="app">
-    <header><navbar placement="top" type="inverse" class="temp-navbar">
-  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-  <li><a href="/index.html" class="nav-link">HOME</a></li>
-  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-  <li slot="right">
-    <form class="navbar-form">
-      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2">[[Home]]</li>
-<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-<div id="content-wrapper">
-<p>Custom footer.</p></div>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title></title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+</head>
 
+<body>
+  <div id="app">
+    <header>
+      <navbar placement="top" type="inverse" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+        <li><a href="/index.html" class="nav-link">HOME</a></li>
+        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2">[[Home]]</li>
+            <li class="mt-2">[[Page-1]]</li>
+          </ul>
         </div>
+      </nav>
+
+      <div id="content-wrapper">
+        <p>Custom footer.</p>
+      </div>
+
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -47,4 +64,5 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/_Sidebar.html b/test/functional/test_site_convert/expected/_Sidebar.html
index be35b53412..533b5f7b07 100644
--- a/test/functional/test_site_convert/expected/_Sidebar.html
+++ b/test/functional/test_site_convert/expected/_Sidebar.html
@@ -1,42 +1,60 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title></title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
-<body >
-<div id="app">
-    <header><navbar placement="top" type="inverse" class="temp-navbar">
-  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-  <li><a href="/index.html" class="nav-link">HOME</a></li>
-  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-  <li slot="right">
-    <form class="navbar-form">
-      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2">[[Home]]</li>
-<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-<div id="content-wrapper">
-<ul>
-<li>[[Home]]</li>
-<li>[[Page-1]]</li></ul></div>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title></title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+</head>
 
+<body>
+  <div id="app">
+    <header>
+      <navbar placement="top" type="inverse" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+        <li><a href="/index.html" class="nav-link">HOME</a></li>
+        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2">[[Home]]</li>
+            <li class="mt-2">[[Page-1]]</li>
+          </ul>
         </div>
+      </nav>
+
+      <div id="content-wrapper">
+        <ul>
+          <li>[[Home]]</li>
+          <li>[[Page-1]]</li>
+        </ul>
+      </div>
+
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -49,4 +67,5 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/about.html b/test/functional/test_site_convert/expected/about.html
index df9ac19d3f..1b0c2d4907 100644
--- a/test/functional/test_site_convert/expected/about.html
+++ b/test/functional/test_site_convert/expected/about.html
@@ -1,41 +1,58 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title></title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
-<body >
-<div id="app">
-    <header><navbar placement="top" type="inverse" class="temp-navbar">
-  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-  <li><a href="/index.html" class="nav-link">HOME</a></li>
-  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-  <li slot="right">
-    <form class="navbar-form">
-      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2">[[Home]]</li>
-<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-<div id="content-wrapper">
-<h1 id="about">About<a class="fa fa-anchor" href="#about"></a></h1>
-<p>Welcome to your <strong>About Us</strong> page.</p></div>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title></title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+</head>
 
+<body>
+  <div id="app">
+    <header>
+      <navbar placement="top" type="inverse" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+        <li><a href="/index.html" class="nav-link">HOME</a></li>
+        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2">[[Home]]</li>
+            <li class="mt-2">[[Page-1]]</li>
+          </ul>
         </div>
+      </nav>
+
+      <div id="content-wrapper">
+        <h1 id="about">About<a class="fa fa-anchor" href="#about"></a></h1>
+        <p>Welcome to your <strong>About Us</strong> page.</p>
+      </div>
+
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -48,4 +65,5 @@ <h1 id="about">About<a class="fa fa-anchor" href="#about"></a></h1>
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/contents/topic1.html b/test/functional/test_site_convert/expected/contents/topic1.html
index 27be1becfc..007b9872cf 100644
--- a/test/functional/test_site_convert/expected/contents/topic1.html
+++ b/test/functional/test_site_convert/expected/contents/topic1.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -42,16 +43,19 @@
 <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
 <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
 
-<div id="content-wrapper">
-<br>
-<h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
-<blockquote>
-<p>More content to be added</p></blockquote></div>
+      <div id="content-wrapper">
+        <br>
+        <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
+        <blockquote>
+          <p>More content to be added</p>
+        </blockquote>
+      </div>
 
-        </div>
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -64,4 +68,5 @@ <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/contents/topic2.html b/test/functional/test_site_convert/expected/contents/topic2.html
index 51f9663a31..8255a665b8 100644
--- a/test/functional/test_site_convert/expected/contents/topic2.html
+++ b/test/functional/test_site_convert/expected/contents/topic2.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -42,15 +43,17 @@
 <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
 <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
 
-<div id="content-wrapper">
-<br>
-<box>
-    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+      <div id="content-wrapper">
+        <br>
+        <box>
+          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
+      </div>
 
-        </div>
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -63,4 +66,5 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/contents/topic3a.html b/test/functional/test_site_convert/expected/contents/topic3a.html
index 4cb6f2501a..2c87c1c551 100644
--- a/test/functional/test_site_convert/expected/contents/topic3a.html
+++ b/test/functional/test_site_convert/expected/contents/topic3a.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -42,15 +43,17 @@
 <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
 <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
 
-<div id="content-wrapper">
-<br>
-<box>
-    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+      <div id="content-wrapper">
+        <br>
+        <box>
+          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
+      </div>
 
-        </div>
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -63,4 +66,5 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/contents/topic3b.html b/test/functional/test_site_convert/expected/contents/topic3b.html
index ed5c208000..439019c099 100644
--- a/test/functional/test_site_convert/expected/contents/topic3b.html
+++ b/test/functional/test_site_convert/expected/contents/topic3b.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -42,15 +43,17 @@
 <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
 <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li></ul></div></li></ul></div></nav>
 
-<div id="content-wrapper">
-<br>
-<box>
-    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+      <div id="content-wrapper">
+        <br>
+        <box>
+          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
+      </div>
 
-        </div>
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>
@@ -63,4 +66,5 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_convert/expected/index.html b/test/functional/test_site_convert/expected/index.html
index e5138c33af..4f2ee1ec16 100644
--- a/test/functional/test_site_convert/expected/index.html
+++ b/test/functional/test_site_convert/expected/index.html
@@ -1,40 +1,57 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Landing Page</title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
-<body >
-<div id="app">
-    <header><navbar placement="top" type="inverse" class="temp-navbar">
-  <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
-  <li><a href="/index.html" class="nav-link">HOME</a></li>
-  <li><a href="/about.html" class="nav-link">ABOUT</a></li>
-  <li slot="right">
-    <form class="navbar-form">
-      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2">[[Home]]</li>
-<li class="mt-2">[[Page-1]]</li></ul></div></nav>
 
-<div id="content-wrapper">
-<p>Welcome to the test-deploy wiki!</p></div>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Landing Page</title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+</head>
 
+<body>
+  <div id="app">
+    <header>
+      <navbar placement="top" type="inverse" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><i class="far fa-file-image"></i></a>
+        <li><a href="/index.html" class="nav-link">HOME</a></li>
+        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2">[[Home]]</li>
+            <li class="mt-2">[[Page-1]]</li>
+          </ul>
         </div>
+      </nav>
+
+      <div id="content-wrapper">
+        <p>Welcome to the test-deploy wiki!</p>
+      </div>
+
+    </div>
     <footer>
-	Custom footer.
-</footer></div>
+      Custom footer.
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
@@ -47,4 +64,5 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_expressive_layout/site.json b/test/functional/test_site_expressive_layout/site.json
index 4ace31252b..79b240d49c 100755
--- a/test/functional/test_site_expressive_layout/site.json
+++ b/test/functional/test_site_expressive_layout/site.json
@@ -1,6 +1,5 @@
 {
   "baseUrl": "/test_site_expressive_layout",
-  "htmlBeautify": true,
   "titlePrefix": "",
   "ignore": [
     "_markbind/layouts/*",
diff --git a/test/functional/test_site_special_tags/site.json b/test/functional/test_site_special_tags/site.json
index c66f0a2f94..5072da6cb2 100644
--- a/test/functional/test_site_special_tags/site.json
+++ b/test/functional/test_site_special_tags/site.json
@@ -1,5 +1,4 @@
 {
-  "htmlBeautify": true,
   "ignore": [
     "_markbind/layouts/*",
     "_markbind/logs/*",
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic1.html b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
index 04312d3cb7..5712d82b6a 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic1.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -21,35 +22,53 @@
 <body>
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a current">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
-<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a current">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+              <div class="dropdown-container dropdown-container-open">
+                <ul class="pl-3 site-nav-list">
+                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
-<div id="content-wrapper">
-<br>
-<h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
-<blockquote>
-<p>More content to be added</p></blockquote></div>
+      <div id="content-wrapper">
+        <br>
+        <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
+        <blockquote>
+          <p>More content to be added</p>
+        </blockquote>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
 
       <div class="text-center">
@@ -68,4 +87,5 @@ <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic2.html b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
index 8fd4b9c771..211b3e9660 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic2.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -21,34 +22,51 @@
 <body>
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a current">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
-<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a current">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+              <div class="dropdown-container dropdown-container-open">
+                <ul class="pl-3 site-nav-list">
+                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
-<div id="content-wrapper">
-<br>
-<box>
-    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+      <div id="content-wrapper">
+        <br>
+        <box>
+          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
 
       <div class="text-center">
@@ -67,4 +85,5 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
index adbb2fba04..fc00b5284b 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -21,34 +22,51 @@
 <body>
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
-<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
-<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+              <div class="dropdown-container dropdown-container-open">
+                <ul class="pl-3 site-nav-list">
+                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
+                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
-<div id="content-wrapper">
-<br>
-<box>
-    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+      <div id="content-wrapper">
+        <br>
+        <box>
+          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
 
       <div class="text-center">
@@ -67,4 +85,5 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
index 41e48280ed..aeac9a2778 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -21,34 +22,51 @@
 <body>
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
-<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li></ul></div></li></ul></div></nav>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+              <div class="dropdown-container dropdown-container-open">
+                <ul class="pl-3 site-nav-list">
+                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
-<div id="content-wrapper">
-<br>
-<box>
-    <span class="fas fa-tools"></span><span> This is a placeholder page</span></box></div>
+      <div id="content-wrapper">
+        <br>
+        <box>
+          <span class="fas fa-tools"></span><span> This is a placeholder page</span></box>
+      </div>
 
 
-        </div>
+    </div>
     <footer>
 
       <div class="text-center">
@@ -67,4 +85,5 @@
 </script>
 <script src="../markbind/js/setup.js"></script>
 <script src="../markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_templates/test_default/expected/index.html b/test/functional/test_site_templates/test_default/expected/index.html
index 4b659f6a1e..0c9278863a 100644
--- a/test/functional/test_site_templates/test_default/expected/index.html
+++ b/test/functional/test_site_templates/test_default/expected/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 
   <meta charset="utf-8">
@@ -205,4 +206,5 @@ <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/functional/test_site_templates/test_minimal/expected/index.html b/test/functional/test_site_templates/test_minimal/expected/index.html
index b5c196cc82..8c2a6a874b 100644
--- a/test/functional/test_site_templates/test_minimal/expected/index.html
+++ b/test/functional/test_site_templates/test_minimal/expected/index.html
@@ -1,31 +1,39 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="generator" content="MarkBind 2.12.0">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Hello World</title>
-    <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-    <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-    <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-    <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-    <link rel="stylesheet" href="markbind/css/octicons.css">
-    <link rel="stylesheet" href="markbind/css/github.min.css">
-    <link rel="stylesheet" href="markbind/css/markbind.css"><link rel="stylesheet" href="markbind/layouts/default/styles.css"><link rel="stylesheet" href="markbind/css/site-nav.css"></head>
-<body >
-<div id="app">
-    <header></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"></div></nav>
 
-<div id="content-wrapper">
-<h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
-<p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p></div>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hello World</title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <link rel="stylesheet" href="markbind/css/site-nav.css">
+</head>
+
+<body>
+  <div id="app">
+    <header></header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll"></div>
+      </nav>
 
+      <div id="content-wrapper">
+        <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
+        <p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
+      </div>
 
-        </div>
+
+    </div>
     <footer>
   
   <div class="text-center">
@@ -42,4 +50,5 @@ <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#w
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="markbind/layouts/default/scripts.js"></script>
-</html>
+
+</html>
\ No newline at end of file

From bcff35ddf744050e794fd40970de9466c5c3b99d Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Thu, 2 Apr 2020 22:19:15 +0800
Subject: [PATCH 10/11] Resolve conflicts

---
 test/functional/test_site/expected/index.html |  60 +++++---
 .../SpecifyingRequirements._include_.html     |  21 ++-
 .../testBaseUrlInIncludeSrc._include_.html    |   4 +-
 .../expected/sub_site/index._include_.html    |   2 +-
 .../test_site/expected/sub_site/index.html    |   2 +
 .../test_site/expected/testLayouts.html       |   2 +-
 .../expected/testLayoutsOverride.html         |   2 +-
 .../test_site/expected/testPlantUML.html      |   2 +
 .../expected/index.html                       |   2 +-
 .../test_site_convert/expected/Home.html      |   2 +-
 .../test_site_convert/expected/Page-1.html    |   2 +-
 .../test_site_convert/expected/_Footer.html   |   2 +-
 .../test_site_convert/expected/_Sidebar.html  |   2 +-
 .../test_site_convert/expected/about.html     |   2 +-
 .../expected/contents/topic1.html             |  56 ++++---
 .../expected/contents/topic2.html             |  56 ++++---
 .../expected/contents/topic3a.html            |  56 ++++---
 .../expected/contents/topic3b.html            |  56 ++++---
 .../test_site_convert/expected/index.html     |   2 +-
 .../expected/index.html                       |   2 +-
 .../test_default/expected/index.html          | 141 +++++++++++-------
 .../test_minimal/expected/index.html          |  10 +-
 22 files changed, 306 insertions(+), 180 deletions(-)

diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index f72ee82179..fc3e86df39 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -137,6 +137,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
           </ul>
         </div>
       </nav>
+
       <div id="content-wrapper">
         <div class="website-content">
           <p><strong>Test footnotes</strong></p>
@@ -250,17 +251,18 @@ <h1 id="heading-with-hidden-keyword">Heading with hidden keyword<a class="fa fa-
               Div with multiple tags
             </div>
             <p><strong>Div with hidden tag (Hidden)</strong></p>
-            
-<div>
-<p><strong>Div with tag in included file</strong></p>
-<div tags="tag-included-file">
-Div with tag in included file
-</div></div>
-<p><strong>Div with tag matching general tag</strong></p>
-<div tags="tag-exp-shown">
-Div with tag matching general tag
-</div>
-<p><strong>Div with tag matching general tag and specific tag (Hidden)</strong></p>
+
+            <div>
+              <p><strong>Div with tag in included file</strong></p>
+              <div tags="tag-included-file">
+                Div with tag in included file
+              </div>
+            </div>
+            <p><strong>Div with tag matching general tag</strong></p>
+            <div tags="tag-exp-shown">
+              Div with tag matching general tag
+            </div>
+            <p><strong>Div with tag matching general tag and specific tag (Hidden)</strong></p>
 
             <p><strong>Div with tag matching front matter tag overridden by matching site tag</strong></p>
             <div tags="tag-site-override-shown">
@@ -429,38 +431,52 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
           </box>
           <p><strong>Include a file using baseUrl</strong></p>
           <div>
-            <p>As we establish requirements, they should be recorded in some way for future reference, usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders, and refine requirements based on their
-              feedback. The next phase is to convert requirements into a product specification that specifies how the product will address the requirements.</p>
+            <p>As we establish requirements, they should be recorded in some way for future reference,
+              usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders,
+              and refine requirements based on their feedback. The next phase is to convert requirements into a product
+              specification that specifies how the product will address the requirements.</p>
           </div>
-          <panel src="/test_site/requirements/SpecifyingRequirements._include_.html#preview" type="minimal" fragment="preview"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <panel src="/test_site/requirements/SpecifyingRequirements._include_.html#preview" type="minimal" fragment="preview"><template slot="_header">
+              <p><strong>same test with panels</strong></p>
+            </template></panel>
           <p><strong>Include a file in a sub-folder that uses baseUrl</strong></p>
           <div>
             <div>
-              <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-                do.</p>
+              <p>Requirements gathering, requirements elicitation, requirements analysis,
+                requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+                of understanding what a software product should do.</p>
             </div>
           </div>
-          <panel src="/test_site/requirements/testBaseUrlInIncludeSrc._include_.html" type="minimal"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <panel src="/test_site/requirements/testBaseUrlInIncludeSrc._include_.html" type="minimal"><template slot="_header">
+              <p><strong>same test with panels</strong></p>
+            </template></panel>
           <p><strong>Include a file in a sub-folder that uses baseUrl using baseUrl</strong></p>
           <div>
             <div>
-              <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-                do.</p>
+              <p>Requirements gathering, requirements elicitation, requirements analysis,
+                requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+                of understanding what a software product should do.</p>
             </div>
           </div>
-          <panel src="/test_site/requirements/testBaseUrlInIncludeSrc._include_.html" type="minimal"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <panel src="/test_site/requirements/testBaseUrlInIncludeSrc._include_.html" type="minimal"><template slot="_header">
+              <p><strong>same test with panels</strong></p>
+            </template></panel>
           <p><strong>Include a file in a sub-site that uses baseUrl</strong></p>
           <div>
             <div>
               <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
           </div>
-          <panel src="/test_site/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html" type="minimal"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <panel src="/test_site/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html" type="minimal"><template slot="_header">
+              <p><strong>same test with panels</strong></p>
+            </template></panel>
           <p><strong>Include a file in a sub-site that uses baseUrl using baseUrl</strong></p>
           <div>
             <div>
               <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
           </div>
-          <panel src="/test_site/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html" type="minimal"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <panel src="/test_site/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html" type="minimal"><template slot="_header">
+              <p><strong>same test with panels</strong></p>
+            </template></panel>
           <p><strong>Trimmed include</strong></p>
           <p><strong><span>Fragment with leading spaces and newline</span></strong></p>
           <p><strong>Trimmed include fragment</strong></p>
diff --git a/test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html b/test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html
index 352bb5ca51..9201ebe7d7 100644
--- a/test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html
+++ b/test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html
@@ -1,15 +1,22 @@
 <h1 id="specifying-requirements">Specifying requirements<a class="fa fa-anchor" href="#specifying-requirements"></a></h1>
 <p>
-  <seg id="preview">As we establish requirements, they should be recorded in some way for future reference, usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders, and refine requirements based on their feedback.
-    The next phase is to convert requirements into a product specification that specifies how the product will address the requirements. </seg>
+  <seg id="preview">As we establish requirements, they should be recorded in some way for future reference,
+    usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders,
+    and refine requirements based on their feedback. The next phase is to convert requirements into a product
+    specification that specifies how the product will address the requirements. </seg>
 </p>
-<p>Given next are some tools and techniques that can be used to specify requirements. Note that they can also be used for establishing requirements too.</p>
+<p>Given next are some tools and techniques that can be used to specify requirements.
+  Note that they can also be used for establishing requirements too.</p>
 <h2 id="textual-descriptions-unstructured-prose">Textual descriptions (unstructured prose)<a class="fa fa-anchor" href="#textual-descriptions-unstructured-prose"></a></h2>
-<p>This is the most straight forward way of describing requirements. A textual description can be used to give a quick overview of the domain/system that is understandable to both the users and the development team. Textual descriptions are especially useful
-  when describing the vision of a product. However, lengthy textual descriptions are hard to follow.</p>
+<p>This is the most straight forward way of describing requirements.
+  A textual description can be used to give a quick overview of the domain/system that is understandable to both
+  the users and the development team. Textual descriptions are especially useful when describing the vision of a product.
+  However, lengthy textual descriptions are hard to follow.</p>
 <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
-<p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample feature
-  list from Minesweeper (only a brief description has been provided to save space).</p>
+<p>It is a list of features (or functionalities) grouped according to some criteria such as priority
+  (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
+  (e.g. order-related, invoice-related, etc.).
+  Here is a sample feature list from Minesweeper (only a brief description has been provided to save space).</p>
 <ol>
   <li>Basic play – Single player play.</li>
   <li>Difficulty levels – Additional Medium and Advanced levels.</li>
diff --git a/test/functional/test_site/expected/requirements/testBaseUrlInIncludeSrc._include_.html b/test/functional/test_site/expected/requirements/testBaseUrlInIncludeSrc._include_.html
index 651f4d6ade..26f65f051b 100644
--- a/test/functional/test_site/expected/requirements/testBaseUrlInIncludeSrc._include_.html
+++ b/test/functional/test_site/expected/requirements/testBaseUrlInIncludeSrc._include_.html
@@ -1,3 +1,5 @@
 <div>
-  <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should do.</p>
+  <p>Requirements gathering, requirements elicitation, requirements analysis,
+    requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+    of understanding what a software product should do.</p>
 </div>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/sub_site/index._include_.html b/test/functional/test_site/expected/sub_site/index._include_.html
index b3701fc392..d8882f7f54 100644
--- a/test/functional/test_site/expected/sub_site/index._include_.html
+++ b/test/functional/test_site/expected/sub_site/index._include_.html
@@ -11,4 +11,4 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
   <li>Timer – Additional fixed time restriction on the player.</li>
 </ol>
 <div id="image">
-  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
+  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/sub_site/index.html b/test/functional/test_site/expected/sub_site/index.html
index 4176d0d3f1..27efbb5868 100644
--- a/test/functional/test_site/expected/sub_site/index.html
+++ b/test/functional/test_site/expected/sub_site/index.html
@@ -40,6 +40,8 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
         <div id="image">
           <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
       </div>
+
+
     </div>
     <footer>
       <div class="text-center">
diff --git a/test/functional/test_site/expected/testLayouts.html b/test/functional/test_site/expected/testLayouts.html
index 8e9ce42bc4..81e0efb9b2 100644
--- a/test/functional/test_site/expected/testLayouts.html
+++ b/test/functional/test_site/expected/testLayouts.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hello World</title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site/expected/testLayoutsOverride.html b/test/functional/test_site/expected/testLayoutsOverride.html
index 945ce4df30..edf7595a29 100644
--- a/test/functional/test_site/expected/testLayoutsOverride.html
+++ b/test/functional/test_site/expected/testLayoutsOverride.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hello World</title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site/expected/testPlantUML.html b/test/functional/test_site/expected/testPlantUML.html
index ab3ae27fe3..1646199bc3 100644
--- a/test/functional/test_site/expected/testPlantUML.html
+++ b/test/functional/test_site/expected/testPlantUML.html
@@ -54,6 +54,8 @@
           <pic src="/test_site/diagrams/object.png"></pic>
         </p>
       </div>
+
+
     </div>
     <footer>
       <div class="text-center">
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
index 749ab70c9b..1779d5e26f 100644
--- a/test/functional/test_site_algolia_plugin/expected/index.html
+++ b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hello World</title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site_convert/expected/Home.html b/test/functional/test_site_convert/expected/Home.html
index 119b72afbf..6939af9ce5 100644
--- a/test/functional/test_site_convert/expected/Home.html
+++ b/test/functional/test_site_convert/expected/Home.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site_convert/expected/Page-1.html b/test/functional/test_site_convert/expected/Page-1.html
index 6b0baac2fe..410f1cd9df 100644
--- a/test/functional/test_site_convert/expected/Page-1.html
+++ b/test/functional/test_site_convert/expected/Page-1.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site_convert/expected/_Footer.html b/test/functional/test_site_convert/expected/_Footer.html
index f496a01983..bb257acb2a 100644
--- a/test/functional/test_site_convert/expected/_Footer.html
+++ b/test/functional/test_site_convert/expected/_Footer.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site_convert/expected/_Sidebar.html b/test/functional/test_site_convert/expected/_Sidebar.html
index 533b5f7b07..af4a34f271 100644
--- a/test/functional/test_site_convert/expected/_Sidebar.html
+++ b/test/functional/test_site_convert/expected/_Sidebar.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site_convert/expected/about.html b/test/functional/test_site_convert/expected/about.html
index 1b0c2d4907..e9212bbc27 100644
--- a/test/functional/test_site_convert/expected/about.html
+++ b/test/functional/test_site_convert/expected/about.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site_convert/expected/contents/topic1.html b/test/functional/test_site_convert/expected/contents/topic1.html
index 007b9872cf..4b1661a8fd 100644
--- a/test/functional/test_site_convert/expected/contents/topic1.html
+++ b/test/functional/test_site_convert/expected/contents/topic1.html
@@ -22,26 +22,42 @@
 <body>
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a current">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
-<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a current">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+              <div class="dropdown-container dropdown-container-open">
+                <ul class="pl-3 site-nav-list">
+                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
       <div id="content-wrapper">
         <br>
diff --git a/test/functional/test_site_convert/expected/contents/topic2.html b/test/functional/test_site_convert/expected/contents/topic2.html
index 8255a665b8..8e7fd148b2 100644
--- a/test/functional/test_site_convert/expected/contents/topic2.html
+++ b/test/functional/test_site_convert/expected/contents/topic2.html
@@ -22,26 +22,42 @@
 <body>
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a current">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
-<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a current">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+              <div class="dropdown-container dropdown-container-open">
+                <ul class="pl-3 site-nav-list">
+                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
       <div id="content-wrapper">
         <br>
diff --git a/test/functional/test_site_convert/expected/contents/topic3a.html b/test/functional/test_site_convert/expected/contents/topic3a.html
index 2c87c1c551..e10643ece9 100644
--- a/test/functional/test_site_convert/expected/contents/topic3a.html
+++ b/test/functional/test_site_convert/expected/contents/topic3a.html
@@ -22,26 +22,42 @@
 <body>
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
-<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
-<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li></ul></div></li></ul></div></nav>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+              <div class="dropdown-container dropdown-container-open">
+                <ul class="pl-3 site-nav-list">
+                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a current">Topic 3a</a></li>
+                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
       <div id="content-wrapper">
         <br>
diff --git a/test/functional/test_site_convert/expected/contents/topic3b.html b/test/functional/test_site_convert/expected/contents/topic3b.html
index 439019c099..14ad3ca654 100644
--- a/test/functional/test_site_convert/expected/contents/topic3b.html
+++ b/test/functional/test_site_convert/expected/contents/topic3b.html
@@ -22,26 +22,42 @@
 <body>
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button><div class="dropdown-container dropdown-container-open"><ul class="pl-3 site-nav-list">
-<li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-<li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li></ul></div></li></ul></div></nav>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+              <div class="dropdown-container dropdown-container-open">
+                <ul class="pl-3 site-nav-list">
+                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
+                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a current">Topic 3b</a></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
 
       <div id="content-wrapper">
         <br>
diff --git a/test/functional/test_site_convert/expected/index.html b/test/functional/test_site_convert/expected/index.html
index 4f2ee1ec16..ba07fcb539 100644
--- a/test/functional/test_site_convert/expected/index.html
+++ b/test/functional/test_site_convert/expected/index.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Landing Page</title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site_expressive_layout/expected/index.html b/test/functional/test_site_expressive_layout/expected/index.html
index 17e3bf1979..7b7901721a 100644
--- a/test/functional/test_site_expressive_layout/expected/index.html
+++ b/test/functional/test_site_expressive_layout/expected/index.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Landing Page</title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
diff --git a/test/functional/test_site_templates/test_default/expected/index.html b/test/functional/test_site_templates/test_default/expected/index.html
index 0c9278863a..48864b9977 100644
--- a/test/functional/test_site_templates/test_default/expected/index.html
+++ b/test/functional/test_site_templates/test_default/expected/index.html
@@ -23,24 +23,32 @@
 <body data-spy="scroll" data-target="#page-nav" data-offset="100">
   <div id="app">
     <header>
-  <navbar type="dark" class="temp-navbar">
-    <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
-    <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
-    <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <div class="nav-link temp-dropdown-placeholder">Topic 3</div><dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
-      <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
-      <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li></dropdown>
-    <li slot="right">
-      <form class="navbar-form">
-        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar></form></li></navbar></header><div id="flex-body">
-        <nav id="site-nav" class="navbar navbar-light bg-transparent">
-<div class="border-right-grey nav-inner position-sticky slim-scroll"><ul class="px-0 site-nav-list">
-<li class="mt-2"><a href="/index.html" class="site-nav__a current">Home 🏠</a></li>
-<li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-<li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-<li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
+      <navbar type="dark" class="temp-navbar">
+        <a slot="brand" href="/index.html" title="Home" class="navbar-brand">Your Logo</a>
+        <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
+        <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
+        <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
+        <dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
+          <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+          <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+        </dropdown>
+        <li slot="right">
+          <form class="navbar-form">
+            <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right=""></searchbar>
+          </form>
+        </li>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <nav id="site-nav" class="navbar navbar-light bg-transparent">
+        <div class="border-right-grey nav-inner position-sticky slim-scroll">
+          <ul class="px-0 site-nav-list">
+            <li class="mt-2"><a href="/index.html" class="site-nav__a current">Home 🏠</a></li>
+            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
+            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
+            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3
+                <i class="dropdown-btn-icon rotate-icon">
+                  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
               <div class="dropdown-container dropdown-container-open">
                 <ul class="pl-3 site-nav-list">
                   <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
@@ -51,6 +59,7 @@
           </ul>
         </div>
       </nav>
+
       <div id="content-wrapper">
         <br>
         <div class="jumbotron jumbotron-fluid bg-primary text-white">
@@ -60,12 +69,10 @@ <h1 class="display-4 no-index" id="landing-page-title">Landing Page Title<a clas
           </div>
         </div>
         <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1"></a></h1>
-        <p>Some text some text some text some text some text some text some text. <strong>Some text some text some text some text some text <mark>some text</mark> some text</strong>. Some text some text some text some text some text some text some text some
-          text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.</p>
+        <p>Some text some text some text some text some text some text some text. <strong>Some text some text some text some text some text <mark>some text</mark> some text</strong>. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.</p>
         <p><strong>A block quote:</strong></p>
         <blockquote>
-          <p>Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text
-            some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.</p>
+          <p>Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.</p>
         </blockquote>
         <p><strong>A list:</strong></p>
         <ul>
@@ -81,11 +88,9 @@ <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1"></a></h1>
         <p><strong>A <code>code</code> example:</strong></p>
         <pre><code class="hljs html"><span><span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span></span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span></span><span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span></span></code></pre>
         <h2 id="sub-heading-1-1">Sub Heading 1.1<a class="fa fa-anchor" href="#sub-heading-1-1"></a></h2>
-        <p>A <span effect="scale" placement="top" trigger="hover" data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-html-for="_content">❗️ some <strong>important explanation</strong></span>tooltip</span>,
-          a <span for="modal:modalinfo" trigger="click" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:modalinfo'].show()" class="trigger-click">modal</span>, a <a href="https://markbind.org/">link</a>,
-          a <span class="badge badge-danger">badge</span>, another <span class="badge badge-warning">badge</span>.</p>
-        <b-modal id="modal:modalinfo" hide-footer="" size="" modal-class="mb-zoom" ref="modal:modalinfo"><template slot="modal-title">Modal Title</template> Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text
-          some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
+        <p>A <span effect="scale" placement="top" trigger="hover" data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-html-for="_content">❗️ some <strong>important explanation</strong></span>tooltip</span>, a <span for="modal:modalinfo" trigger="click" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:modalinfo'].show()" class="trigger-click">modal</span>, a <a href="https://markbind.org/">link</a>, a <span class="badge badge-danger">badge</span>, another <span class="badge badge-warning">badge</span>.</p>
+        <b-modal id="modal:modalinfo" hide-footer="" size="" modal-class="mb-zoom" ref="modal:modalinfo"><template slot="modal-title">Modal Title</template>
+          Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
         </b-modal>
         <p><strong>A table:</strong></p>
         <div class="table-responsive">
@@ -119,15 +124,18 @@ <h2 id="sub-heading-1-2">Sub Heading 1.2<a class="fa fa-anchor" href="#sub-headi
         <div class="block-embed block-embed-service-youtube"><iframe type="text/html" src="//www.youtube.com/embed/v40b3ExbM0c" frameborder="0" width="640" height="390" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen></iframe></div>
         <p><strong>Tabs:</strong></p>
         <tabs>
-          <tab><template slot="_header">Tab X</template> Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text
-            some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
+          <tab><template slot="_header">Tab X</template>
+            Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
           </tab>
-          <tab><template slot="_header">Tab Y</template> ...
+          <tab><template slot="_header">Tab Y</template>
+            ...
           </tab>
           <tab-group><template slot="_header">Tab group</template>
-            <tab><template slot="_header">Tab Y.1</template> ...
+            <tab><template slot="_header">Tab Y.1</template>
+              ...
             </tab>
-            <tab><template slot="_header">Tab Y.2</template> ...
+            <tab><template slot="_header">Tab Y.2</template>
+              ...
             </tab>
           </tab-group>
         </tabs>
@@ -141,38 +149,60 @@ <h1 id="heading-2">Heading 2<a class="fa fa-anchor" href="#heading-2"></a></h1>
           info
         </box>
         <box type="warning" dismissible="">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </box>
-        <box type="tip"><template slot="_header"><p>Tip box heading</p></template> tip
+        <box type="tip"><template slot="_header">
+            <p>Tip box heading</p>
+          </template>
+          tip
         </box>
-        <box type="success"><template slot="_header"><p>Tip box heading</p></template> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
+        <box type="success"><template slot="_header">
+            <p>Tip box heading</p>
+          </template>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </box>
-        <box type="important" dismissible=""><template slot="_header"><p>Tip box heading</p></template> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
+        <box type="important" dismissible=""><template slot="_header">
+            <p>Tip box heading</p>
+          </template>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </box>
         <br>
         <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
-        <panel type="info"><template slot="_header"><p>Expandable panel</p></template> Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some
-          text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
+        <panel type="info"><template slot="_header">
+            <p>Expandable panel</p>
+          </template>
+          Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
         </panel>
         <br>
-        <panel type="success" minimized=""><template slot="_header"><p>Expanded panel</p></template><template slot="_alt"><p>Minimized panel</p></template> ...
+        <panel type="success" minimized=""><template slot="_header">
+            <p>Expanded panel</p>
+          </template><template slot="_alt">
+            <p>Minimized panel</p>
+          </template>
+          ...
         </panel>
         <br>
-        <panel type="seamless"><template slot="_header"><p>Expanded panel</p></template><template slot="_alt"><p>Minimized panel</p></template> ...
+        <panel type="seamless"><template slot="_header">
+            <p>Expanded panel</p>
+          </template><template slot="_alt">
+            <p>Minimized panel</p>
+          </template>
+          ...
         </panel>
         <br>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          <panel type="minimal" popup-url="https://markbind.org/userGuide/usingComponents.html#panels" no-switch=""><template slot="_header"><p><em><strong>Minimal panel <strong>-&gt;</strong></strong></em></p></template><template slot="_alt"><p>Minimal panel</p></template> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          <panel type="minimal" popup-url="https://markbind.org/userGuide/usingComponents.html#panels" no-switch=""><template slot="_header">
+              <p><em><strong>Minimal panel <strong>-&gt;</strong></strong></em></p>
+            </template><template slot="_alt">
+              <p>Minimal panel</p>
+            </template>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           </panel>
         </p>
         <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
+
+
       <nav id="page-nav" class="navbar navbar-light bg-transparent">
         <div class="border-left-grey nav-inner position-sticky slim-scroll">
           <a class="navbar-brand page-nav-title" href="#">Chapters of This Page</a>
@@ -185,15 +215,16 @@ <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
             <a class="nav-link py-1" href="#heading-2">Heading 2&#x200E;</a>
             <a class="nav-link py-1" href="#heading-3">Heading 3&#x200E;</a>
 
-
-</nav>
-</div>
-</nav>
-</div>
+          </nav>
+        </div>
+      </nav>
+    </div>
     <footer>
-  
-  <div class="text-center">
-    <small>[Generated by <a href="https://markbind.org/">MarkBind 2.13.1</a>]</small></div></footer></div>
+
+      <div class="text-center">
+        <small>[Generated by <a href="https://markbind.org/">MarkBind 2.13.1</a>]</small></div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>
diff --git a/test/functional/test_site_templates/test_minimal/expected/index.html b/test/functional/test_site_templates/test_minimal/expected/index.html
index 8c2a6a874b..ecde0a556a 100644
--- a/test/functional/test_site_templates/test_minimal/expected/index.html
+++ b/test/functional/test_site_templates/test_minimal/expected/index.html
@@ -5,7 +5,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hello World</title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
@@ -35,9 +35,11 @@ <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#w
 
     </div>
     <footer>
-  
-  <div class="text-center">
-    <small>[Generated by <a href="https://markbind.org/">MarkBind 2.13.1</a>]</small></div></footer></div>
+
+      <div class="text-center">
+        <small>[Generated by <a href="https://markbind.org/">MarkBind 2.13.1</a>]</small></div>
+    </footer>
+  </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>

From 47c9443cca40ccf3521d9cdfe9a724bfa3a6e475 Mon Sep 17 00:00:00 2001
From: yash-chowdhary <yashchowdhary98@gmail.com>
Date: Fri, 3 Apr 2020 10:02:00 +0800
Subject: [PATCH 11/11] Update documentation

---
 docs/userGuide/siteConfiguration.md               |  2 +-
 .../expected/testIncludeMultipleModals.html       | 14 +++++++++-----
 .../test_site/expected/testPopoverTrigger.html    | 15 +++++++++------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/docs/userGuide/siteConfiguration.md b/docs/userGuide/siteConfiguration.md
index f4fcd142e8..5ac44b6c66 100644
--- a/docs/userGuide/siteConfiguration.md
+++ b/docs/userGuide/siteConfiguration.md
@@ -205,7 +205,7 @@ The example above uses tags as an example of configuring plugin settings, refer
 #### **`disableHtmlBeautify`**
 
 **Turn off html beautification done by [js-beautify](https://github.com/beautify-web/js-beautify) for html files generated by MarkBind.** By default, MarkBind beautifies the HTML files it generates, which helps in user-friendly viewing and editing.
-Users can choose to turn this option off to improve the performance of the MarkBind `build` process.  
+You can choose to turn this option off to improve the performance of the MarkBind `build` process.  
 <br>
 To turn off the option, add the following to `site.json` - 
 ```js
diff --git a/test/functional/test_site/expected/testIncludeMultipleModals.html b/test/functional/test_site/expected/testIncludeMultipleModals.html
index 27a7f7ddf1..f9e970f5cf 100644
--- a/test/functional/test_site/expected/testIncludeMultipleModals.html
+++ b/test/functional/test_site/expected/testIncludeMultipleModals.html
@@ -5,7 +5,7 @@
   <meta name="default-head-top">
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Multiple inclusions of a modal should be supported</title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
@@ -30,8 +30,9 @@
 
           <b-modal id="modal:bugRepro" hide-footer="" size="lg" modal-class="mb-zoom" ref="modal:bugRepro"><template slot="modal-title">Establishing Requirements</template>
             <div>
-              <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-                do.</p>
+              <p>Requirements gathering, requirements elicitation, requirements analysis,
+                requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+                of understanding what a software product should do.</p>
             </div>
           </b-modal>
         </div>
@@ -39,12 +40,15 @@
 
           <b-modal id="modal:bugRepro" hide-footer="" size="lg" modal-class="mb-zoom" ref="modal:bugRepro"><template slot="modal-title">Establishing Requirements</template>
             <div>
-              <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-                do.</p>
+              <p>Requirements gathering, requirements elicitation, requirements analysis,
+                requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
+                of understanding what a software product should do.</p>
             </div>
           </b-modal>
         </div>
       </div>
+
+
     </div>
     <footer>
       <div class="text-center">
diff --git a/test/functional/test_site/expected/testPopoverTrigger.html b/test/functional/test_site/expected/testPopoverTrigger.html
index 19f2655236..b780734d56 100644
--- a/test/functional/test_site/expected/testPopoverTrigger.html
+++ b/test/functional/test_site/expected/testPopoverTrigger.html
@@ -5,7 +5,7 @@
   <meta name="default-head-top">
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.12.0">
+  <meta name="generator" content="MarkBind 2.13.1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Popover initiated by trigger should honor trigger attribute</title>
   <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
@@ -27,10 +27,13 @@
       <div id="content-wrapper">
         <p><strong>Popover initiated by trigger should honor trigger attribute</strong></p>
         <span id="pop:xp-user-stories" trigger="click" data-mb-component-type="popover" v-b-popover.click.top.html="popoverInnerGenerator" class="trigger-click">
-  popover
-  <div data-mb-html-for="content">
-    User stories
-  </div></span></div>
+          popover
+          <div data-mb-html-for="content">
+            User stories
+          </div></span>
+      </div>
+
+
     </div>
     <footer>
       <div class="text-center">
@@ -68,4 +71,4 @@
 </script>
 <script src="markbind/layouts/default/scripts.js"></script>
 
-</html>
+</html>
\ No newline at end of file