diff --git a/.storybook/addon-config.js b/.storybook/addon-config.js
index f08d91e4..c7dd405d 100644
--- a/.storybook/addon-config.js
+++ b/.storybook/addon-config.js
@@ -11,6 +11,7 @@ exports.default = function () {
       },
     },
     '@storybook/addon-links',
+    '@whitespace/storybook-addon-html',
   ];
 
   // Html and pseudo knobs.
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 507f7bdd..d748f88b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -90,4 +90,11 @@ export const parameters = {
       },
     },
   },
+  html: {
+    prettier: {
+      tabWidth: 4,
+      useTabs: false,
+      htmlWhitespaceSensitivity: 'strict',
+    },
+  },
 };
diff --git a/package.json b/package.json
index c8a0489f..cb73ec1f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "dist:dev": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config ./webpack/webpack.dev.js",
     "test": "npm run test-storybook:ci",
     "test-storybook": "test-storybook",
-    "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"npx http-server storybook-static --port 6006 -a 127.0.0.1 --silent\" \"wait-on --timeout 10000 http://127.0.0.1:6006 && npm run test-storybook\""
+    "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"npx http-server storybook-static --port 6006 -a 127.0.0.1 --silent\" \"wait-on --timeout 10000 http://127.0.0.1:6006 && npm run test-storybook\"",
+    "postinstall": "npx patch-package"
   },
   "engines": {
     "node": ">=18.14"
@@ -49,6 +50,7 @@
     "@storybook/addons": "^6.1.18",
     "@storybook/html": "^6.3.8",
     "@storybook/test-runner": "^0.16.0",
+    "@whitespace/storybook-addon-html": "^5.1.6",
     "addon-screen-reader": "^1.8.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -70,8 +72,10 @@
     "lorem-ipsum": "^2.0.4",
     "mini-css-extract-plugin": "^1.6.2",
     "node-sass-magic-importer": "^5.3.2",
+    "prettier": "^2.8.8",
     "react": "^17",
     "react-dom": "^17",
+    "react-syntax-highlighter": "^15.5.0",
     "sass": "^1.41.0",
     "sass-loader": "^10.2.0",
     "semver": "^7.3.8",
diff --git a/patches/@whitespace+storybook-addon-html+5.1.6.patch b/patches/@whitespace+storybook-addon-html+5.1.6.patch
new file mode 100644
index 00000000..feedfd42
--- /dev/null
+++ b/patches/@whitespace+storybook-addon-html+5.1.6.patch
@@ -0,0 +1,19 @@
+diff --git a/node_modules/@whitespace/storybook-addon-html/preset.js b/node_modules/@whitespace/storybook-addon-html/preset.js
+index aca6ca4..f23183d 100644
+--- a/node_modules/@whitespace/storybook-addon-html/preset.js
++++ b/node_modules/@whitespace/storybook-addon-html/preset.js
+@@ -1,7 +1,3 @@
+-function config(entry = []) {
+-  return [...entry, require.resolve("./dist/esm/preset/preview")];
+-}
+-
+ function managerEntries(entry = []) {
+   return [...entry, require.resolve("./dist/esm/preset/manager")];
+ }
+@@ -12,6 +8,5 @@ function previewAnnotations(entry = []) {
+ 
+ module.exports = {
+   managerEntries,
+-  config,
+   previewAnnotations,
+ };