Indent code snippets using js-beautify

.gitignore

@@ -62,4 +62,4 @@ env[23]/
 
 # Project-specific ignores
 js/app.js.map
-static/js/modules
+static/js/modules

package.json

@@ -31,7 +31,7 @@
     "build": "yarn build-scss && yarn build-js && yarn build-class-references",
     "build-scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
-    "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules",
+    "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules && cp node_modules/js-beautify/js/lib/beautify.js node_modules/js-beautify/js/lib/beautify-html.js node_modules/js-beautify/js/lib/beautify-css.js build/js/modules",
     "build-class-references": "node scripts/create-class-references.js",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
@@ -62,6 +62,7 @@
     "autoprefixer": "10.4.19",
     "cypress": "13.13.0",
     "jest": "29.7.0",
+    "js-beautify": "1.15.1",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
     "postcss": "8.4.39",

templates/_layouts/docs.html

@@ -126,6 +126,9 @@ <h4 class="p-table-of-contents__header">On this page:</h4>
       window.Prism = window.Prism || {};
       Prism.manual = true;
     </script>
+    <script defer src="{{ versioned_static('build/js/modules/beautify.js') }}"></script>
+    <script defer src="{{ versioned_static('build/js/modules/beautify-html.js') }}"></script>
+    <script defer src="{{ versioned_static('build/js/modules/beautify-css.js') }}"></script>
     <script defer src="{{ versioned_static('js/prism.min.js') }}"></script>
     <script defer src="{{ versioned_static('js/example.js') }}"></script>
 {% endblock %}

templates/static/js/example.js

@@ -54,9 +54,34 @@
     request.send(null);
   }
 
+  /**
+   * Format source code based on language
+   * @param {String} source - source code to format
+   * @param {String} lang - language of the source code
+   * @returns {String} formatted source code
+   */
+  function formatSource(source, lang) {
+    try {
+      switch (lang) {
+        case 'html':
+          return window.html_beautify(source, {indent_size: 2});
+        case 'js':
+          return window.js_beautify(source, {indent_size: 2});
+        case 'css':
+          return window.css_beautify(source, {indent_size: 2});
+        default:
+          return source;
+      }
+    } catch (error) {
+      // If beautify fails (e.g. invalid source, CDN outage, error upstream), return original source
+      console.error(`Failed to format ${lang} source code: ${error}`, `This could be due to invalid ${lang} source code, an issue with the formatter, or a CDN outage.`, {source});
+      return source;
+    }
+  }
+
   function createPreCode(source, lang) {
     var code = document.createElement('code');
-    code.appendChild(document.createTextNode(source));
+    code.appendChild(document.createTextNode(formatSource(source, lang)));
 
     var pre = document.createElement('pre');
     pre.classList.add('p-code-snippet__block');