Upgrade js-beautify and provide option to turn it off

docs/userGuide/siteConfiguration.md

@@ -202,6 +202,18 @@ 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.
 
+#### **`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.
+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
+...
+"disableHtmlBeautify": true,
+...
+```
+
 #### **`timeZone`**
 
 **Time zone of the [time stamp](reusingContents.html#built-in-variable-timestamp).** Default: `"UTC"`. 

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.3",
     "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",

src/Page.js

@@ -62,6 +62,7 @@ class Page {
     this.content = pageConfig.content || '';
     this.faviconUrl = pageConfig.faviconUrl;
     this.frontmatterOverride = pageConfig.frontmatter || {};
+    this.disableHtmlBeautify = pageConfig.disableHtmlBeautify;
     this.layout = pageConfig.layout;
     this.layoutsAssetPath = pageConfig.layoutsAssetPath;
     this.rootPath = pageConfig.rootPath;
@@ -657,14 +658,14 @@ 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);
+        = `<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 +756,9 @@ class Page {
     if (pageSection.length === 0) {
       return;
     }
-    this.pageSectionsHtml[section] = htmlBeautify($.html(section), Page.htmlBeautifyOptions)
-      .trim();
+    this.pageSectionsHtml[section] = $.html(section);
     pageSection.remove();
-    this.content = htmlBeautify($.html(), Page.htmlBeautifyOptions);
+    this.content = $.html();
   }
 
   collectAllPageSections() {
@@ -803,7 +803,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 = result;
 
           const { relative } = urlUtils.getParentSiteAbsoluteAndRelativePaths(this.sourcePath, this.rootPath,
                                                                               this.baseUrlMap);
@@ -821,10 +821,12 @@ 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.disableHtmlBeautify
+            ? renderedTemplate
+            : htmlBeautify(renderedTemplate, Page.htmlBeautifyOptions);
+
+          return fs.outputFileAsync(this.resultPath, outputTemplateHTML);
         })
         .then(() => {
           const resolvingFiles = [];
@@ -1071,7 +1073,10 @@ class Page {
             baseUrl,
             hostBaseUrl,
           });
-          return fs.outputFileAsync(resultPath, htmlBeautify(content, Page.htmlBeautifyOptions));
+          const outputContentHTML = this.disableHtmlBeautify
+            ? content
+            : htmlBeautify(content, Page.htmlBeautifyOptions);
+          return fs.outputFileAsync(resultPath, outputContentHTML);
         })
         .then(() => {
           // Recursion call to resolve nested dependency

src/Site.js

@@ -237,6 +237,7 @@ class Site {
       faviconUrl: config.faviconUrl,
       frontmatter: config.frontmatter,
       globalOverride: this.siteConfig.globalOverride || {},
+      disableHtmlBeautify: this.siteConfig.disableHtmlBeautify,
       pageTemplate: this.pageTemplate,
       plugins: this.plugins || {},
       rootPath: this.rootPath,
@@ -943,7 +944,7 @@ class Site {
     injectMarkdownItSpecialTags(tagsToIgnore);
     Page.htmlBeautifyOptions = {
       indent_size: 2,
-      content_unformatted: ['pre', ...tagsToIgnore],
+      content_unformatted: ['pre', 'textarea', ...tagsToIgnore],
     };
   }
 

test/functional/test_site/expected/bugs/index.html

@@ -29,10 +29,12 @@
         <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">
+
       <div id="content-wrapper">
         <div class="website-content">
           <p><strong>Bug Description</strong></p>
@@ -41,6 +43,8 @@
           <p>Steps to Reproduce</p>
         </div>
       </div>
+
+
     </div>
     <footer>
       <div class="text-center">